前端开发一直在强调js模块化，将一个功能当做一个模块来开发，js本身并没有模块的功能。JS中的模块化规范主要有：
- AMD，即 Asynchronous Module Definition: 异步模块定义：这种规范可以异步的加载或依赖其他模块， Require.js就遵循的AMD规范 。
- CMD，即 Common Module Definition，CMD则是依赖就近，用的时候再require。玉伯写的sea.js 就是遵循的CMD规范。
- CommonJS，NodeJS就采用了CommonJS。
- UMD，即通用模块定义，UMD规范兼容AMD 和 CommonJs。
AMD 规范
AMD规范只定义了一个函数 "define"，它是全局变量。函数的描述为：
// '?' 表示该参数是可选的
define(id?, dependencies?, callback);
- id，是个字符串， 指定模块的名字。如果没有提供该参数，模块的名字应该默认为模块加载器请求的指定脚本的名字。如果提供了该参数，模块名必须是“顶级”的和绝对的（不允许相对名字）。
- dependencies，是个数组， 指定该模块依赖的模块数组。依赖模块依次执行，并且执行的结果，应该按照依赖模块数组中的位置顺序以参数的形式传入callback中。
- factory，依赖模块加载成功之后的回调函数或对象，如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值。。
AMD规范定义了三个特殊的依赖关键字。如果"require","exports", 或 "module" 出现在依赖列表中，参数应该按照CommonJS模块规范自由变量去解析。
如果依赖参数没传，默认为["require", "exports", "module"]。然而，如果factory的形参个数小于3，加载器会选择以函数指定的参数个数调用factory。
AMD 定义模块：
// 要在声明模块的时候指定所有的依赖(dep)，并且还要当做形参传到factory中
// 这里的依赖是jquery
define(['jquery'], factory($) {
return {
myMethod: function() {
console.log('AMD 规范');
}
};
})
一个使用Simplified CommonJS Wrapping的模块定义：
define(function (require, exports, module) {
var a = require('a'),
b = require('b');
exports.action = function () {};
};
})
CMD 规范
CMD, 是seajs推崇的规范，CMD则是依赖就近，用的时候再require。写法如下：
// define(factory方法)
define(function(require, exports, module) {
var a = require('a');
a.hello();
});
AMD和CMD都是异步加载模块，最大的区别是对依赖模块的执行时机不同，而不是加载方式不同。
- AMD依赖前置，提前执行，依赖模块一目了然；
- CMD依赖就近，并行加载所有依赖的模块, 但不会立即执行模块, 等到对应 require 语句时，才执行模块。因此CMD需要从factory.toString() 中提取到依赖模块，这会导致更长的等待时间，实际上解析模块用的时间短到可以忽略。
CommonJS 规范
NodeJS的模块系统就是遵循CommonJS规范实现的。CommonJS是主要为了JS在后端的表现制定的，实现CommonJS规范的API是同步加载模块的， 因为在服务端模块的加载一般是从本地磁盘中读取，加载速度很快，不像客户端端需要发送请求加载， 可能出现'假死'状况。
CommonJS定义的模块分为:
- 模块引用(require)：用来引入外部模块
- 模块定义(exports)：用于导出当前模块的方法或变量，唯一的导出口
- 模块标识(module)：module对象就代表模块本身
//add.js
exports.add = function(x, y){
return x+y;
};
//main.js
var math = require('add');
exports.add = function(n){
return math.add(100, n);
};
Browserify(http://browserify.org/) 是目前最常用的 CommonJS 格式转换的工具, 能够将commonJs规范的代码转换为浏览器可直接执行的代码。
虽说Node遵循CommonJS的规范，但是相比也是做了一些取舍，填补了一些新东西的。
UMD（通用模块规范）
UMD规范则是兼容了 AMD 和 CommonJs。
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD
define(['jquery'], factory);
} else if (typeof exports === 'object') {
// Node, CommonJS之类的
module.exports = factory(require('jquery'));
} else {
// 浏览器全局变量 (root 即window)
root.returnExports = factory(root.jQuery);
}
}(this, function ($) {
function add(){};
// 暴露公共方法
return {
add: add
};
}));
网友评论