随着JS项目越来越大,再依靠简单的命名空间来解决冲突不是很可取,项目大了之后不只有变量冲突的问题,还有模块依赖以及加载策略的问题等,这次就介绍现存的几种模块化、依赖的解决方案。
AMD
AMD规范起源于CommonJS的一个草案,由于没有达成一致所以后来就分道扬镳。
定义模块:
define(id?, dependencies?, factory);
http://requirejs.org/docs/api.html#define
使用模块:
require(id);
例子:
add.js
define(function(){
return function (a, b) {
return a + b;
};
});
app.js
define(['./add'],function (add) {
var sum = add(1,2);
console.log(sum);
});
或
define(function (require,exports,module) {
var sum = 0;
var add = require('./add');
sum = add(1,2);
console.log(sum);
});
CommonJS
CommonJS规范因NodeJS而大放异彩。
定义模块:
并没有像AMD那种需要define包裹,一个文件就是一个模块。要导出模块则挂在到exports对象上即可。
使用模块:
require('moduleId');
add.js
exports.add = function(a,b){
return a + b;
}
app.js
var sum = 0;
var plus = require('./add').add;//被引用的模块若是挂在exports上的则导出的是一个对象,所以需要指定到具体的方法,若模块是直接赋值给module.exports上的则不需要。
sum = plus(1,2);
console.log(sum);
相比于AMD格式,CommonJS格式简单、清爽、明了。
http://javascript.ruanyifeng.com/nodejs/module.html
CMD
定义、使用方法类似AMD,只是模块的执行时机和顺序不同。
具体参考:https://github.com/seajs/seajs/issues/242
ES6 module
ES6最具有意义的部分,有望成为浏览器和服务器通用的模块解决方案。
定义模块:
类似CommonJS,只不过导出是使用export。
使用模块:
import xx from 'xx'
add.js
export function add(a,b){
return a + b;
}
app.js
import {add} from 'add';
var sum = 0;
sum = add(1,2);
console.log(sum);