js 模块

模块的来源

最早的模块机制出现在node，即common js, 因为后端开发比较的复杂，为了避免命名重复产生冲突同时也为了实现功能的复用，于是引入了模块机制。
随着前端开发越来越复杂，一些底层的通用的功能可以抽象成函数，同样为了避免命名冲突，前端JS也引入了模块机制。

前后端模块规范

现在我们接触到四种模块规范：

1. node的common js
2. AMD
3. CMD
4. es6中的模块

common js

基本概念

node应用由模块组成，采用commonJS模块规范，具体而言，每个文件都是一个模块，模块内的变量函数对象都是文件私有的，CommonJS定义的模块分为:
模块引用(require)：用来引入外部模块，
模块定义(exports)：用于导出当前模块的方法或变量，唯一的导出口，
模块标识(module)：代表模块本身，

优点：
1.解决了变量污染问题，每个模块具有独立的空间，互不干扰。
2.支持引入导出功能，可以连接各个模块，实现彼此间的依赖。
3.接口简洁，定义模块十分简单。
缺点：
1.只适用于后端，不适合浏览器端。

具体写法

//math.js
module.exports = function (){}

//foo.js
var math = require('./math')

AMD && CMD

为什么前端不用common js?
因为commonjs是同步的，也就是require的过程中，必须完成这个加载动作后面的代码才会执行，这对服务器端不是一个问题，因为所有的模块都存放在本地硬盘，可以同步加载完成，等待时间就是硬盘的读取时间。这种形式不适合于浏览器场景，因为模块都放在服务器端，等待时间取决于网速的快慢，可能要等很长时间，浏览器处于"假死"状态，所以浏览器加载需要异步加载。

AMD

基本概念

AMD意思是异步模块定义，它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。AMD 是基于require.js实现的。

具体写法

定义：define()

// math.js
    define([module1, module2], function (module1, module2) {})

引入使用：require()

// main.js
    require(['math'], function (math){})

CMD

基本概念

CMD是基于sea.js实现的, 一个模块就是一个文件，它既遵循了amd规范，又遵循commonJs规范。
define：一个全局函数，用来定义模块，接受对象，字符串，函数作为参数，当参数为函数时，函数的参数有（require，exports，module）。
require：是一个方法，接受 模块作为唯一参数，用来获取其他模块提供的接口。
exports：是一个对象，用来向外提供模块接口。

具体用法

define(function(require,exports,module){
    var a = require('./a')
    // do something
    var b = require('/b')
    // do something
    module.exports = ...
})

更多详情见链接：https://github.com/seajs/seajs/issues/242

AMD和 CMD的区别

1. 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）。CMD 推崇 as lazy as possible.
2. CMD 推崇依赖就近，AMD 推崇依赖前置。

es6 模块

基本概念

在es6中实现了模块功能，而且可以通用于服务器和浏览器，es6模块的设计思想是尽量的静态化，使得编译时就确定模块的依赖关系，以及输入和输出的变量（之前的common js AMD都只能在运行时确定）。模块功能主要由两个命令构成：
1.export：用于规定模块的对外接口
2.import：用于输入其他模块提供的功能

具体用法

// a.js
export:
export var a = 'hello'
export function multiple (){}
等价于：
var a = 'hello'
function multiple (){}
export {a, multiple}

// b.js
import:
import {a, multiple} from 'a.js'

参考文档：
https://www.cnblogs.com/chenguangliang/p/5856701.html (commom js AMD)
http://es6.ruanyifeng.com/#docs/module (es6)