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);