JS：模块化规范CommonJS、AMD、ES6 Module

CommonJS

特点

CommonJS 使用同步方式加载模块。
服务端加载js模块通常只需从本地读取即可，采用同步加载方式的CommonJS 适用于服务端使用。
Node.js即采用CommonJS进行模块化管理。

机制

当 CommonJS 第一次加载某个模块时，Node.js 会将该模块缓存到内存中。
当再次加载该模块时，Node.js会直接从内存中读取该模块的 module.exports 属性。
当模块被引入时，引入的值是其在缓存中的拷贝，一旦模块被引入，模块内部的变化就影响不到这个引入值。

示例

// 引入
const $ = require("lib/js/jquery-1.11.3.min.js"); 
// 导出
module.exports = function(para){
   
	console.dir(para);
}
// 具名拆分导出
module.exports.func = function(para){
   
	console.dir(para);
}

注意 由于exports 是对module.exports的引用（即exports=module.exports），所以不要直接为exports赋值，尽可以在拆分具名导出时省略module（即类似exports.func = function(){}写法），整体导出必须使用module.exports。

注意 示例代码运行时，会整体加载jquery模块，引用时生成一个$对象。这种加载称为“运行时加载”，因为只有运行时才能得到这个对象，导致无法在编译时进行“静态优化”。

AMD / require.js

特点

AMD 全称 Asynchronous Module Definition，即异步模块定义规范。
客户端加载js模块需要从远端请求获取，AMD采用异步加载方式更适合客户端浏览器使用。

机制

在require.js内部通过使用head.appendChild()将每一个模块依赖加载为一个script标签。等待所有的依赖加载完毕，require.js将按照正确调用顺序调用它们。

require.js加载时会检查data-main属性，当require.js加载执行后，会继续异步加载data-main指向的js文件，并作为当前网页逻辑入口。理想情况下，整个网页只需要这一个script标记，利用require.js加载依赖的其它文件。

注意 main.js中的脚本都是异步加载的，如果在页面中配置了其它JS加载，则不能保证它们所依赖的JS已经加载成功。

由于HTML中的script标签在加载和执行过程中会阻塞页面渲染，所以通常会将script标签放置在body元素的底部或使用异步方式加载脚本资源。

语法：

define(module_name, dependencies_array, module)

• module_name: 模块名，可选。
• dependencies_array: 依赖的模块，可选。
• module: 模块实现函数或对象。

require(dependencies_array, module);

• dependencies_array: 依赖的模块。
• module: 模块实现函数。

require.config (option);

• options: 配置参数对象。

如果模块实现是函数则必须有返回值作为输出，该函数将在其依赖的模块加载成功后被调用 。依赖的模块会以参数形式传入该函数，在其内部可以使用这些模块。

示例

// beta.js
define(function () {
    return "beta"; });

// alpha.js 模块实现为函数
define([