Seajs的使用

seajs.config
alias
别名配置,配置之后可在模块中使用require调用 require('jquery');

seajs.config({
    alias: { 'jquery': 'jquery/jquery/1.10.1/jquery' }
});
define(function(require, exports, module) {
    //引用jQuery模块
    var $ = require('jquery');
});

paths
设置路径,方便跨目录调用。通过灵活的设置path可以在不影响base的情况下指定到某个目录。

seajs.config({
    //设置路径
    paths: {
        'gallery': 'https://a.alipayobjects.com/gallery'
    },

    // 设置别名,方便调用
    alias: {
        'underscore': 'gallery/underscore'
    }
});
define(function(require, exports, module) {
    var _ = require('underscore');
     //=> 加载的是 https://a.alipayobjects.com/gallery/underscore.js
});

vars
变量配置。有些场景下,模块路径在运行时才能确定,这时可以使用 vars变量来配置。
vars 配置的是模块标识中的变量值,在模块标识中用 {key}来表示变量。

seajs.config({
    // 变量配置
    vars: {
        'locale': 'zh-cn'
    }
});
define(function(require, exports, module) {
  var lang = require('./i18n/{locale}.js');
     //=> 加载的是 path/to/i18n/zh-cn.js
});

map
该配置可对模块路径进行映射修改,可用于路径转换、在线调试等。

seajs.config({
    map: [
        [ '.js', '-debug.js' ]
    ]
});
define(function(require, exports, module) {
    var a = require('./a');
    //=> 加载的是 path/to/a-debug.js
});

preload
使用preload配置项,可以在普通模块加载前,提前加载并初始化好指定模块。
注:preload中的空字符串会被忽略掉。

// 在老浏览器中,提前加载好 ES5 和 json 模块
seajs.config({
    preload: [
        Function.prototype.bind ? '' : 'es5-safe',
        this.JSON ? '' : 'json'
    ]
});

注:preload中的配置,需要等到 use 时才加载。比如:

seajs.config({
    preload: 'a'
});

// 在加载 b 之前,会确保模块 a 已经加载并执行好
seajs.use('./b');

注:preload 配置不能放在模块文件里面:

seajs.config({
    preload: 'a'
});

define(function(require, exports) {
    // 此处执行时,不能保证模块 a 已经加载并执行好
});

debug
值为true时,加载器不会删除动态插入的 script 标签。插件也可以根据debug配置,来决策 log 等信息的输出。

base
Sea.js 在解析顶级标识时,会相对 base 路径来解析。

charset
获取模块文件时,<script> 或 <link> 标签的charset属性。 默认是utf-8
charset还可以是一个函数:

seajs.config({
    charset: function(url) {
        // xxx 目录下的文件用 gbk 编码加载
        if (url.indexOf('http://example.com/js/xxx') === 0) {
          return 'gbk';
        }

        // 其他文件用 utf-8 编码
        return 'utf-8';
    }
});

seajs.use
用来在页面中加载一个或多个模块。seajs.use(id, callback?)

// 加载一个模块
seajs.use('./a');

// 加载一个模块,在加载完成时,执行回调
seajs.use('./a', function(a) {
  a.doSomething();
});

// 加载多个模块,在加载完成时,执行回调
seajs.use(['./a', './b'], function(a, b) {
  a.doSomething();
  b.doSomething();
});

注意:seajs.use 与 DOM ready 事件没有任何关系。如果某些操作要确保在 DOM ready 后执行,需要使用 jquery 等类库来保证。比如

seajs.use(['jquery', './main'], function($, main) {
    $(document).ready(function() {
        main.init();
    });
});

注意:use方法第一个参数一定要有,但是可以是null,也可以是一个变量

var bootstrap = ['bootstrap.css', 'bootstrap-responsive.css', 'bootstrap.js'];

seajs.use(bootstrap, function() {
    //do something
});

seajs.cache
通过 seajs.cache,可以查阅当前模块系统中的所有模块信息。
比如,打开 seajs.org,然后在 WebKit Developer Tools 的 Console 面板中输入 seajs.cache,可以看到:

Object
  > http://seajs.org/docs/assets/main.js: x
  > https://a.alipayobjects.com/jquery/jquery/1.10.1/jquery.js: x
  > __proto__: Object

seajs.reslove
类似require.resolve,会利用模块系统的内部机制对传入的字符串参数进行路径解析。

seajs.resolve('jquery');
// => http://path/to/jquery.js

seajs.resolve('./a', 'http://example.com/to/b.js');
// => http://example.com/to/a.js

seajs.data
通过 seajs.data,可以查看 seajs 所有配置以及一些内部变量的值,可用于插件开发。当加载遇到问题时,也可用于调试。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 200,527评论 5 470
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,314评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 147,535评论 0 332
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,006评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,961评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,220评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,664评论 3 392
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,351评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,481评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,397评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,443评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,123评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,713评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,801评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,010评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,494评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,075评论 2 341

推荐阅读更多精彩内容

  • 为什么使用 Sea.js ? Sea.js 追求简单、自然的代码书写和组织方式,具有以下核心特性: 简单友好的模块...
    yangjiahao阅读 930评论 0 1
  • 一、seajs.config配置说明: 1.base说明: base是字符串类型,表示基础或叫做根路径(最好绝对地...
    柠檬树__阅读 1,108评论 0 5
  • JavaScript 模块化编程 网站越来越复杂,js代码、js文件也越来越多,会遇到什么问题? 命名冲突; 文件...
    magic_pill阅读 1,404评论 0 1
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,566评论 18 139
  • 云雾迷山翠隐烟。拾径登攀,香汗湿衫。 空中崖峭似蓬莱,绿漫波涛,浪涌峰峦。 人在玄霄不胜寒。一树襟飘,两袖衣纤。 ...
    天水居士阅读 269评论 4 8