模块化之CommonJs、AMD、CMD

介绍

随着前端业务得复杂程度越来越高，模块化成了大趋势，目前有这么几种模块化得规范，AMD，CMD，CommonJs。CommonJs规范的实践者是nodejs和ES6。AMD、CMD规范的实践者分别是requirejs和seajs。

commonjs

commonjs的目标是制定一个js模块化的标准，它的目标制定一个可以同时在客服端和服务端运行的模块。这些模块拥有自己独立的作用域，也可以向顶层曝露出自己的api也就是module.exports。在ES6中common被制定为标准。但是在ES6还未被浏览器完美支持的情况下，commonjs规范之能在服务端发挥它的作用。比如在nodejs和webpack等中。

nodejs

语法：
模块必须通过module.exports导出对外得变量或接口，通过require()来导入其他的模块。
特点：
每个文件都是一个模块，都有自己得作用域，变量，函数等，对其他文件不可见，
如果想在多个文件分享变量，必须定义为global对象的属性。（不推荐）
CommonJS 模块系统是同步加载。
入口文件：
一般都会有一个入口文件，在index.html中加载这个入口文件，入口再加载其他文件
模块缓存：
第一次加载某个模块时，Node会缓存该模块。以后再加载该模块，就直接从缓存取出该模块的module.exports属性。
加载机制：
CommonJS模块的加载机制是，输入的是被输出的值的拷贝。也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。

ES6模块化

语法：
使用export关键字将任意变量、函数或者类公开给其他模块。
特点：
在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。
ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性。

//导出变量
export var color = "red";

//导出函数
export function add(num1,num2){
    return num1+num2;
}

//导出对象，即导出引用
export {multiply}

在模块中使用import关键字来导入其他模块。

import  identifier from "./example.js"

其中还有各种写法，比如
导入单个绑定

import {sum} from './example.js'

导入多个绑定

import {sum,multiply} from './example.js'

限制
export 与 import 都有一个重要的限制，那就是它们必须被用在其他语句或表达式的外部，而不能使用在if等代码块内部。原因之一是模块语法需要让 JS 能静态判断需要导出什么，正因为此，你只能在模块的顶级作用域使用 export与import。

AMD

AMD是为了弥补commonjs规范在浏览器中目前无法支持ES6的一种解决方案。异步模块定义规范（AMD）制定了定义模块的规则，这样模块和模块的依赖可以被异步加载。这和浏览器的异步加载模块的环境刚好适应（浏览器同步加载模块会导致性能、可用性、调试和跨域访问等问题）。
定义模块：分两种，独立模块和非独立模块，独立模块是不依赖其他模块；非独立模块是依赖于其他模块。
独立模块

define(function(){
    ……
    return {
        //返回接口
    }
})

非独立模块：

define(['module1','module2'],function(m1,m2){
    ……
    return {
        //返回接口
    }
})

加载模块：
同样使用require（）方法来加载模块，但由于是异步的，因此使用回调函数的形式。

require(['foo','bar'],function(foo,bar){
    ……
})

上面方法表示加载foo和bar两个模块，当这两个模块都加载成功后，执行一个回调函数。该回调函数就用来完成具体的任务。
require方法也可以用在define方法内部。

define(function(require){
     var otherModule = require('otherModule');
})

配置：
require方法本身也是一个对象，它带有一个config方法，用来配置require.js运行参数。

require.config({
    paths: {
        jquery:'lib/jquery'
    }
});

使用
在主页面index.html中先通过script标签引入require.min.js。
再通过script标签引入一个入口文件main.js，此入口文件一般用于配置（require.config），以及引入其他模块。

CommonJS与AMD
CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。
AMD规范则是异步加载模块，允许指定回调函数，在回调函数中执行操作。