CommonJS范例
CommonJS定义的模块分为3部份:
require
模块援用exports
模块导出module
模块自身
依据CommonJS范例,一个零丁的文件就是一个模块
。每个模块都是一个零丁的作用域,也就是说,在一个文件定义的变量(还包含函数和类),都是私有的,对其他文件是不可见的
// a.js
var a = {
"a":a,
"b":b
}
module.export = a //模块导出
// b.js
var b = require('./a.js') //模块引入
CommonJS 加载模块是同步
的,所以只要加载完成才实行背面的操纵
AMD(Asynchromous Module Definition)范例
AMD 加载模块是
异步
的define(id?, dependencies?, factory);
id: 模块标识,能够省略。 dependencies: 所依靠的模块,能够省略。 factory: 模块的完成,或许一个JavaScript对象。
//a.js 只要factory
define(function() {
return {
mix: function(source, target) {
...
}
};
});
//b.js 依靠a.js
define(['a'], function(a) {
return {
show: function() {
...
}
}
});
//c.js 依靠a.js b.js
define(['a', 'b'], function(a, b) {
....
});
//d.js 对象模块
define({
data1: [],
data2: []
});
AMD范例许可输出模块兼容CommonJS范例,这时候define要领以下:
define(function (require, exports, module) {
var reqModule = require("./a.js");
requModule.mix();
exports.asplode = function () {
...
}
});
CMD(Common Module Definition)范例
CMD和AMD的区分有以下几点:
关于依靠的模块
AMD是提早实行
,CMD是耽误实行。不过RequireJS从2.0最先,也改成能够耽误实行(依据写法差别,处理方式不通过)CMD推重
依靠就近
,AMD推重依靠前置
//AMD写法
define(['./a','./b'], function (a, b) {
//依靠一最先就写好
a.mix();
b.show();
});
//CMD写法
define(function (requie, exports, module) {
//依靠能够就近誊写
var a = require('./a');
a.mix();
if (...) {
var b = requie('./b');
b.show();
}
});
UMD(Universal Module Definition)范例
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD
define(['jquery'], factory);
} else if (typeof exports === 'object') {
// Node, CommonJS-like
module.exports = factory(require('jquery'));
} else {
// Browser globals (root is window)
root.returnExports = factory(root.jQuery);
}
}(this, function ($) {
// methods
function myFunc(){};
// exposed public method
return myFunc;
}));
运用UMD范例的js文件实在就是一个马上实行函数。函数有两个参数,第一个参数是当前运行时环境,第二个参数是模块的定义体。在实行UMD范例时,会优先推断
是当前环境是不是支撑AMD
环境,然后再磨练是不是支撑CommonJS
环境,不然以为当前环境为浏览器环境( window
)