历史上JavaScript一直没有模块体系,在其他高级语言中,Java有类文件,Python有import机制,Ruby有require,PHP有include和require。而JavaScript则是通过<script>标签引入代码,显得杂乱无章。人们不得不用命名空间等方式人为地约束代码,以求达到安全和易用的目的。
为此,社区指定了一些模块加载方案,最主要的有CommonJS,AMD和CMD三种。前者用于服务器,后两者用于浏览器。同时,ES6也从语言规格的层面上,实现了模块功能,完全可以代替CommonJS,AMD和CMD,成为浏览器和服务器通用的模块解决方案。
下面将就上面这四种方案进行简单介绍。
CommonJS
CommonJS是服务器端模块的规范,它的提出主要是为了弥补当前JavaScript没有标准的缺陷,以达到像Python,Java具备大型应用开发大型应用的基础能力,而不是停留在小脚本程序的阶段。NodeJS采取的就是CommonJS规范。
CommonJS对模块的定义很简单,主要分为模块引用,模块定义和模块标识3个方面。
模块引用
模块引用的实例如下
var math = require('math');
在CommonJS规范中,存在require()方法,这个方法接受模块标识,以此引入一个模块的API到当前上下文中。
模块定义
在模块中,上下文提供require()方法来引入外部模块。对应引入的功能,上下文提供了exports对象用于导出当前模块的方法或者变量,并且它是唯一导出的出口。在模块中,还存在一个module对象,它代表模块自身,而exports是module的属性。在Node中,一个文件就是一个模块,将方法挂在在exports对象上作为属性即可定义导出的方式:
// math.js
exports.add = function() {
var sum = 0,
i = 0,
args = arguments,
l = arguments.length;
while(i < 1) {
sum += args[i++];
}
return sum;
}
在另一个文件中,我们通过require()方法来引入模块后,就能调用定义的属性和方法了:
//program.js
var math = require('math');
exports.increment = function(val) {
return math.add(val, 1);
}
需要注意的是,module.exports
和exports
是相同的引用,即
exports = module.exports
最终模块返回的是module.exports
。
所以下面的写法是错误的
exports = function(val) {
return val + 1;
}
这样做的话exports
就不再指向module.exports
。正确的写法是
module.exports = function(val) {
return val + 1;
}
模块标识
模块标识其实就是传递给require()方法的参数,它必须是符合驼峰名
的字符串,或者以.
, ..
开头的相对路径,或者绝对路径。它可以没有文件名后缀.js。
模块的定义十分简单,接口也十分简洁。它的意义在于将类聚的方法和变量等限定在私有的作用域中,同时支持引入和引出功能以顺畅的连接上下游依赖。每个模块有独立的空间,它们互不干扰,在引用时也显得干净利落。
AMD
AMD(Asynchronous Module Definition)是RequireJS在推广过程中对模块定义的规范化产出。
AMD异步加载所需的模块,然后在回调函数中执行主逻辑。这正是我们在浏览器端开发所习惯了的方式。
AMD规范的模块定义如下:
define(id?, dependencies?, factory)
它的模块id和依赖是可选的,factory的内容就是实际代码的内容。下面的代码简单的定义了两个模块。
// a.js
define(function(){
var exports = {};
exports.sayHello = function() {
alert("Hello from module: " + module.id);
};
return exports;
});
// b.js
define(['a'], function(a) {
a.sayHello();
});
AMD与CommonJS规范的Node不同的是AMD模块需要用define来明确定义一个模块,而Node是隐式包装的,它们的目的都是为了进行作用域的隔离,仅在需要的时候被引入;另一个不同是AMD的内容需要通过返回的方式实现导出。
CMD
CMD与AMD规范的主要区别在于定义模块和依赖模块引入的部分。AMD需要在声明模块的时候指定所有的依赖,通过形参传递到依赖模块内容中:
define(['dep1', 'dep2'], function(dep1, dep2){
return function(){};
});
与AMD模块相比,CMD模块更接近于Node对CommonJS规范的定义:
define(factory);
在依赖部分,CMD支持动态引入,示例如下:
define(function(require, exports, module){
// 获取模块a的接口
var a = require('./a');
// 调用模块a的方法
a.doSomething();
});
CommonJS, AMD, CMD 区别
CommonJS加载模块是同步的,所以只有加载完成后才能执行后面的操作,像NodeJS主要用于服务器端的编程,加载的模块文件一般都已存在本地硬盘,所以加载起来比较快,不用考虑异步加载的方式,所以CommonJS规范比较适用。但如果是浏览器环境,要从服务器加载模块,这时就必须采用异步模式。所以就有了AMD,CMD解决方案。
- 对于依赖的模块,AMD是提前执行,CMD是推迟执行。
- CMD推崇依赖就近,AMD推崇依赖前置。
// CMD
define(function(require, exports, module)){
var a = require('./a');
a.doSomething();
var b = require('./b');
b.doSomething();
}
// AMD
define(['./a', './b'], function(a, b) {
a.doSomething();
b.doSomething();
});