CMD规范及SeaJS

CMD规范：

define(factory)

• define Function，define是一个全局函数，用来定义模块。
• factory可以为函数，也可以是一个对象或者字符串。factory为对象，字符串时，表示模块的接口就是对象或者字符串。
• factory为函数时候，表示是模块的构造方法，执行该构造方法，可以得到模块向外提供的接口。方法执行默认传入三个参数，require/exports/module

  define(function(require,exports,module){
      // 模块代码
  })

define也可以接收两个以上参数，id表示模块标识，数组deps是模块依赖。

define(id?,deps?,factory)

define('hello',['jquery'],function(require,exports,module){
    // 模块代码
})

注意：带id和deps参数的define用法不属于CMD规范，而属于Modules/Transport规范

define.cmd
一个空对象，判断当前页面是否有CMD模块加载器

if(typeof define === 'function' && define.cmd){
    // 有Sea.js等CMD模块加载器存在
}

require [require(id)]
require是一个方法，是factory函数的第一个参数，require(id)接收模块标识为唯一参数，用来获取其他模块提供的接口

define(function(require,exports){
    // 获取模块a的接口
    var a = require('./a');
    // 调用模块a的方法
    a.doSomething();
})

require.async [require.async(id,callback)]
用来在模块内部异步加载模块，加载完成后执行指定回调

define(function(require, exports, module) {
  // 异步加载一个模块，在加载完成时，执行回调
  require.async('./b', function(b) {
    b.doSomething();
  });
  // 异步加载多个模块，在加载完成时，执行回调
  require.async(['./c', './d'], function(c, d) {
    c.doSomething();
    d.doSomething();
  });
});

require是同步执行的，require.async用来加载可延迟异步加载的模块。

require.resolve [require.resolve(id)]
不加载模块，只返回解析后的绝对路径。

define(function(require, exports) {
  console.log(require.resolve('./b'));
  // ==> http://example.com/path/to/b.js
});

用来获取模块路径， 一般用在插件环境或需动态拼接模块路径的场景下。

exports Object
exports是一个对象对外提供接口

define(function(require, exports) {
  // 对外提供 foo 属性
  exports.foo = 'bar';
  // 对外提供 doSomething 方法
  exports.doSomething = function() {};
});
// 使用return
define(function(require) {
  // 通过 return 直接提供接口
  return {
    foo: 'bar',
    doSomething: function() {}
  };
});
// 若return为模块中的唯一代码，可以简化如下
define({
  foo: 'bar',
  doSomething: function() {}
});
// 使用
define(function(require, exports, module) {
  module.exports = {
    foo: 'bar',
    doSomething: function() {}
  };
  // 不能直接使用exports={}
});

exports只是module.exports的一个引用，在factory内部给exports重新赋值时，不会改变module.exports.

module Object
module模块存储与当前模块相关联的一些属性和方法。
module.id String
模块唯一标识

define('id', [], function(require, exports, module) {
  // 模块代码
});

module.uri String
解析模块系统路径得到模块绝对路径。

define(function(require, exports, module) {
  console.log(module.uri); 
  // ==> http://example.com/path/to/this/file.js
});

一般情况下（没有在 define 中手写 id 参数时），module.id 的值就是 module.uri，两者完全相同。

module.dependencies Array
dependencies是一个数组表示当前模块的依赖。
module.exports Object
当前模块对外提供接口

对 module.exports 的赋值需要同步执行，不能放在回调函数里。

Sea.js简介

SeaJS提供简单/极致的模块化开发体验。专注于JS模板
一个文件就是一个模块，所有模块遵循CMD(Common Module Definition)规范。
seajs.config Object
1.alias Object
别名配置，配置之后可以在模块中使用require调用 require(‘jquery’);

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

2.paths Object
路径设置，方便跨目录调用，灵活设置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
})

3.vars Object
通过vars来进行变量配置

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

4.map Array
对模块路径进行映射修改，用于路径转换/在线调试

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

5.preload Array
使用preload配置项，在普通模块加载前，提前加载并初始化好指定模块

preload中的空字符串会被忽略
preload中的配置，需要等到use才加载
preload配置不能放在模块文件里边

// 在老浏览器中，提前加载ES5和JSON模块
seajs.config({
  preload: [
    Function.prototype.bind ? '' : 'es5-safe',
    this.JSON ？'' : 'json'
  ]
});
seajs.config({
  preload: 'a'
});
// 在模块b加载之前确定模块a加载并执行好
define(function(require,exports){
  // 此处执行时，不能保证模块a已加载并执行好
})
seajs.use('./b');

seajs.use Function
用来在页面中加载一个或者多个模块

// 加载单个模块
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的第一个参数必须有，可以时null也可以是一个变量

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

seajs.cache Object
通过seajs.cache，查询当前模块系统中的所有模块信息
seajs.resolve Function
利用模块系统内部机制对传入字符串参数进行路径解析

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

seajs.data Object
查看seajs左右配置即内部变量的值，可用于插件开发和加载问题的调试。

关于路径

配置路径以sea.js的路径为基本路径(base)

//sea.js的路径，即 base 路径，相对于当前页面
<script src="http://yslove.net/actjs/assets/sea-modules/seajs/2.1.1/sj.js"></script>
<script type="text/javascript">
//配置Seajs
seajs.config({
    alias: {
        //顶级标识，基于 base 路径
        'actjs': 'actjs/core/0.0.7/core.js',
            // => http://
        'position': 'actjs/util/0.0.2/position.js'
    }
});
seajs.config({
    alias: {
        //普通路径，相对于当前页面
        'affix': '../../actjs/assets/widget/src/widget-affix.js',
        //相对标识，相对于当前页面
        'init': './src/init.js'
    }
});
</script>

参考文章：
CMD规范定义
Seajs简易文档——予舍驿站
如有错误，烦请指正，谢谢！

赏

谢谢！

支付宝

微信