前端模块化方案总结

js设计之初，是用来进行表单验证等工作的，所以那个年代的js代码量相当少，逻辑也是比较简单的。但是随着CPU、浏览器性能的大幅度提升，js从一个简单的验证器一跃成为当前最为流行的编程语言之一。随之而来的是前端代码量的迅速膨胀，代码逻辑也是变的相当复杂。如果我们还是像当初一样，把变量和方法写在根作用于window下面的话，那么很容易造成命名冲突、业务逻辑混杂在一起等问题。

单图的命名空间

为了解决这个问题，我们需要找到一种方式来有效的隔离、组织、管理复杂的js代码，模块的概念便应运而生了。期初我们的解决方案是利用不同的命名空间来解决命名冲突问题：

var Banner = {
  isloading: false,
  getData: function(){}
}

优点：只需要保证命名空间的唯一性就可以解决命名冲突的问题了，然后把某一块的业务功能写在一个命名空间内，这样就实现了一个完整的功能模块。

缺点：外部可以随意修改该模块的成员变量，带来安全性问题。

立即执行函数

var Banner = （function(){
    var data = [];
    return {
      setData: function(){},
      getData: function(){}
    }
}）()

这样就隐藏了模块的实现细节，只是对外暴露了关键的api。当前主流的模块化方案走的就是这种思路。

主流方案

很多介绍会说AMD是异步加载方案，CMD是同步加载方案，其实这是不太准确的。我的理解是AMD是异步加载、异步执行，CMD是异步加载、同步执行。所依赖的模块的加载都是异步的，没有顺序之分，这个阶段，两种方案是没有差别的。差别在于执行阶段，AMD是加载后立即执行的，所以模块间的执行没有先后顺序。而CMD加载后并不执行，而是等到require进来的时候再执行，所以在CMD中模块的加载与书写的顺序是有关系的。

AMD：

define(['./a','./b'], function (a, b) {
    //此刻，所有模块均已加载完成
    //且完成执行
    a.test();
    b.test();
});

CMD：

define(function (requie, exports, module) {
    //此刻，所有模块均已加载完成
    //但是并未执行
    var a = require('./a');
    //此刻，a模块执行完毕
    a.test();
});

如果按照加载阶段区分同步、异步的话，那么AMD和CMD的加载阶段是异步的，而CommonJs的加载是同步的。这样设计的原因是，CommonJs用再服务端，require进来的模块都是本地的，使用同步的方式对性能也不会有太大的影响。

但是使用前两者的客户端则不然，如果采用同步的方式加载模块，那么就等于是串行的下载js文件，比起异步的方式并行下载js文件，耗费的时间不言而喻。

CommonJs：

var event = require("event");  
    var add = function() {
    event.bind(el, 'click', function() {  
        // todo  
    }); 
}  
exprots.add = add;

CommonJs的发展壮大，node功不可没，node使用的模块标准就是借鉴了CommonJs。node与CommonJs的不同之处请查看 CommonJS模块规范与NodeJS的模块系统底层原理。

ESM：

import React from 'react';

class A extends React.Component {

}
export default A;

modules是ES6引入的最重要一个特性，也是以后标准的模块化解决方案。ESM的实现原理请查看图说 ES Modules