参考探索js的模块化
什么是JavaScript模块化？
模块化在我看来，就是把一些公共的函数封装起来给其他地方调用，而不用重复去写一些冗余的函数代码。
JavaScript模块化大致发展过程
CommonJS(服务端) => AMD (浏览器端) => CMD / UMD => ES Module
CommonJS
CommonJS主要用于服务器端。 这个规范是同步的
特点：
模块可以多次加载，首次加载的结果将会被缓存，想让模块重新运行需要清除缓存。
-
模块的加载是一项阻塞操作，也就是同步加载。
// a.js module.exports = { moduleFunc: function() { return true; }; } // 或 exports.moduleFunc = function() { return true; }; // 在 b.js 中引用 var moduleA = require('a.js'); // 或 var moduleFunc = require('a.js').moduleFunc; console.log(moduleA.moduleFunc()); console.log(moduleFunc())
AMD规范
在commonJS中， 模块的加载过程是一个同步的过程， 很明显地，如果在浏览器端， 肯定就会引起浏览器页面的阻塞，因此，这时候对模块异步加载的需求就出现了。从而出现AMD规范
异步模块定义规范（AMD）制定了定义模块的规则，这样模块和模块的依赖可以被异步加载。这和浏览器的异步加载模块的环境刚好适应（浏览器同步加载模块会导致性能、可用性、调试和跨域访问等问题）
这时候RequireJS应运而生
RequireJS
特点：
前置依赖，异步加载
-
便于管理模块之间的依赖性，有利于代码的编写和维护。
// a.js define(function (require, exports, module) { console.log('a.js'); exports.name = 'Jack'; }); // b.js define(function (require, exports, module) { console.log('b.js'); exports.desc = 'Hello World'; }); // main.js require(['a', 'b'], function (moduleA, moduleB) { console.log('main.js'); console.log(moduleA.name + ', ' + moduleB.desc); }); // 执行顺序： // a.js // b.js // main.js
然而， 他也有他的不足之处
按照 AMD 的规范，在定义模块的时候需要把所有依赖模块都罗列一遍（前置依赖），而且在使用时还需要在 factory 中作为形参传进去。
define(['a', 'b', 'c', 'd', 'e', 'f', 'g'], function(a, b, c, d, e, f, g){ ..... });
是不是看起来又丑又复杂。。
RequireJS 模块化的顺序是这样的：模块预加载 => 全部模块预执行 => 主逻辑中调用模块，所以实质是依赖加载完成后还会预先一一将模块执行一遍，这种方式会使得程序效率有点低。
这个时候就出现了CMD规范，典型的就是seajs模块化
SeaJS
SeaJS 模块化的顺序是这样的：模块预加载 => 主逻辑调用模块前才执行模块中的代码，通过依赖的延迟执行，很好解决了 RequireJS 被诟病的缺点。
// a.js
define(function (require, exports, module) {
console.log('a.js');
exports.name = 'Jack';
});
// main.js
define(function (require, exports, module) {
console.log('main.js');
var moduleA = require('a');
console.log(moduleA.name);
});
// 执行顺序
// main.js
// a.js
ES6的module
ES Module 的思想是尽量的静态化，即在编译时就确定所有模块的依赖关系，以及输入和输出的变量，和 CommonJS 和 AMD/CMD 这些标准不同的是，它们都是在运行时才能确定需要依赖哪一些模块并且执行它。ES Module 使得静态分析成为可能
模块功能主要由两个命令构成：export 和 import。export 命令用于规定模块的对外接口，import 命令用于输入其他模块提供的功能。
-
通过 export 命令定义了模块的对外接口，其他 JS 文件就可以通过 import 命令加载这个模块。
模块的定义 /** * export 只支持对象形式导出，不支持值的导出，export default 命令用于指定模块的默认输出， * 只支持值导出，但是只能指定一个，本质上它就是输出一个叫做default 的变量或方法 */ // 写法 1 export var m = 1; // 写法 2 var m = 1; export { m }; // 写法 3 var n = 1; export { n as m }; // 写法 4 var n = 1; export default n; 模块的引入 // 解构引入 import { firstName, lastName, year } from 'a-module'; // 为输入的变量重新命名 import { lastName as surname } from 'a-module'; // 引出模块对象（引入所有） import * as ModuleA from 'a-module';
在使用 ES Module 值得注意的是：import 和 export 命令只能在模块的顶层，在代码块中将会报错
这是因为 ES Module 需要在编译时期进行模块静态优化，import 和 export 命令会被 JavaScript 引擎静态分析，先于模块内的其他语句执行，这种设计有利于编译器提高效率，但也导致无法在运行时加载模块（动态加载）。
