从JSP到React，前端模块化到底经历了哪些。
模块化方案
在ajax出现之前，js不需要实现复杂的业务需求，模块化也就没有必要。
当ajax出现之后，js实现的业务逻辑越来越多，js没有模块化解决方案的问题就暴露了出来，代码中的全局变量、函数会互相冲突，为了保证依赖关系，必须严格按照顺序导入script标签。
全局变量/命名空间/立即函数
基于同一个全局变量，各模块按照各自的命名空间挂载，依靠IIFE立即函数实现模块局部作用域的隔离。
CommonJS
Node.js的模块化规范，经过转换可以在浏览器环境执行。
模块同步加载，关键字 module.exports require。
AMD/CMD/UMD
- AMD 异步模块定义，随 RequireJS 而流行。特点是依赖前置，提前执行依赖。
// a.js
define(function(){
console.log('a.js执行');
return {
hello: function(){
console.log('hello, a.js');
}
}
});
// main.js
require(['a'], function(a){
console.log('main.js执行');
a.hello();
})
- CMD 通用模块定义，实现是 SeaJS，特点是就近依赖，延迟执行。
// a.js
define(function(require, exports, module){
console.log('a.js执行');
return {
hello: function(){
console.log('hello, a.js');
}
}
});
// b.js
define(function(require, exports, module){
console.log('b.js执行');
return {
hello: function(){
console.log('hello, b.js');
}
}
});
// main.js
define(function(require, exports, module){
console.log('main.js执行');
var a = require('a');
a.hello();
$('#b').click(function(){
var b = require('b');
b.hello();
});
});
- UMD 整合CommonJS和AMD两种规范
(function (global, factory) {
if (typeof exports === 'object' && typeof module !== undefined) { //检查CommonJS是否可用
module.exports = factory(require('jquery'));
} else if (typeof define === 'function' && define.amd) { //检查AMD是否可用
define('toggler', ['jquery', factory])
} else { //两种都不能用，把模块添加到JavaScript的全局命名空间中。
global.toggler = factory(global, factory);
}
})(this, function ($) {
function init() {
}
return {
init: init
}
});
ES6 Modules
- ES2015 推出的标准化模块方案。关键字
export [default]import。 - ES6 模块的对外接口是静态的，因此可以支持模块静态分析，tree shaking 基于ES6 模块实现，必须在ES6模块下才能开启。
- ES6 模块是动态引用，没有清除缓存的烦恼。
模块和组件
- 模块 是语言层面的，往往表现为一个单独的JS文件，对外暴露出一些属性或方法。
- 组件 是业务层面的概念，是一个可独立使用的功能实现。一个组件包含它需要的所有资源，包含逻辑 (JavaScript)、样式 (CSS)、模板 (HTML/template)和静态资源文件 (image/iconfont)。
组件化方案
- 基于模块的多入口文件组件 e.g. RequireJS
组件通过AMD等规范将自己也暴露成一个模块，但是资源文件并没有实现模块化 - 单JavaScript入口组件 e.g. Webpack
打包工具将所有资源都视作可加载的模块，对外只暴露一个JS模块入口 - Web Component
通过该技术，可以实现组件内外样式隔绝，通过<link rel="import" .../>就可以使用组件。但是兼容性还有问题，目前也没有体现出对单入口组件的优势。包含内容：- 自定义元素 Custom Element
- HTML模板 HTML Template
- Shadow DOM
- HTML引入 HTML Import
引用：模块化思维导图
