聊聊前端模块化

从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

引用：模块化思维导图