JavaScript模块探索
随着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);
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2016-10-03，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读