JS模块化

模块化规范：CommonJS，AMD，CMD，UMD，ES6 Module

CommonJS

CommonJS是服务器端模块的规范，Node.js采用了这个规范。是一种同步的方式。
根据CommonJS规范，一个单独的文件就是一个模块，使用exports/require方法。

//导出 module.exports
module.exports = { age: 1, a: 'hello', foo:function(){} }

//nodeJS中同步加载
var math = require('math');
math.add(2,3);

服务器端的编程，需要加载的模块文件一般都已经存在本地硬盘，加载起来比较快，所以CommonJS规范比较适用。但是在浏览器中如果用同步加载的方式会导致页面卡顿，影响用户体验，所以就有了AMD。

AMD与RequireJS

AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。
所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行

//模块定义 define(id?, dependencies?, factory)
define("alpha", [ "require", "exports", "beta" ], function( require, exports, beta ){
    exports.verb = function(){
        return beta.verb();
    }
});
//模块加载 require([module], callback)
require(['math'], function(math) {
　math.add(2, 3);
});

RequireJS

RequireJS 是一个前端的模块化管理的工具库，遵循AMD规范。

RequireJS 的基本思想为：通过一个函数来将所有所需要的或者说所依赖的模块实现装载进来，然后返回一个新的函数（模块），我们所有的关于新模块的业务代码都在这个函数内部操作，其内部也可无限制的使用已经加载进来的以来的模块。

define定义模块

//独立模块，不依赖其他模块
define(function() {
    return {
        method1: function(){},
        method2: function(){}
    }
});
//非独立模块 define([modules], callback);
define([ 'module1', 'module2' ], function(m1, m2) {
    ...
});

require方法调用模块

//require([modules], callback);
require(['foo', 'bar'], function(foo, bar) {
    foo.func();
    bar.func();
} );

CMD和SeaJS

AMD是"Common Module Definition" ，AMD是依赖前置（预加载），而CMD是依赖就近，想什么时候 require就什么时候加载，实现了懒加载（延迟执行）
CMD没有全局 require，每个API都简单纯粹。

// CMD
define(function(require, exports, module) {  
    var a = require('./a')  
    a.doSomething();  
    ...
    var b = require('./b')   // 依赖可以就近书写  
    b.doSomething();
})

虽然RequireJS也支持SeaJS的写法，但是依赖的模块任然是预先加载的

UMD

UMD（Universal Module Definition）是AMD+CommonJS+全局变量的结合

UMD先判断是否支持Node.js的模块（exports）是否存在，存在则使用Node.js模块模式。
再判断是否支持AMD（define是否存在），存在则使用AMD方式加载模块。

(function (window, factory) {
    if (typeof exports === 'object')
        module.exports = factory();
    } else if (typeof define === 'function' && define.amd) {
        define(factory);
    } else {
        window.eventUtil = factory();
    }
})(this, function () {
    //module ...
});

有了 UMD 后我们的代码和同时运行在 Node 和浏览器上，所以现在前端大多数的库最后打包都使用的是 UMD 规范

ES6 Module

ES6后直接使用export/import就可以进行模块管理，不再需要AMD, CommonJS

export * from 'module'; //重定向导出 不包括 module内的default
export { name1, name2, ..., nameN } from 'module'; // 重定向命名导出
export { import1 as name1, import2 as name2, ..., nameN } from 'module'; // 重定向重命名导出

export { name1, name2, …, nameN }; // 与之前声明的变量名绑定 命名导出
export { variable1 as name1, variable2 as name2, …, nameN }; // 重命名导出

export let name1 = 'name1'; // 声明命名导出 或者 var, const，function， function*, class

export default expression; // 默认导出
export default function () { ... } // 或者 function*, class
export default function name1() { ... } // 或者 function*, class

import { a, b, c } from 'module';  //命名导出
import { a as newA, b, c as newC } from 'module'; 

import 'module'; // 副作用，只是运行module，不为了导出内容，多次调用次语句只能执行一次

var promise = import('module'); //动态导入(异步导入)

注意项

1.语法是静态的，import 会自动提升到代码的顶层
2.使用 import 导入的变量是只读的，无法被赋值，而且是引用传递

与CommonJs的区别

1.CommonJs导出的是变量的一份拷贝，ES6 Module导出的是变量的绑定（引用）
2.CommonJs是单个值导出，ES6 Module可以导出多个
3.CommonJs是动态语法可以写在判断里，ES6 Module静态语法只能写在顶层
4.CommonJs的 this 是当前模块，ES6 Module的 this 是 undefined