前端模块化方案学习

我在目前的项目中遇到了一个匪夷所思的问题：CommonJS规范是同步加载模块资源，为什么前端项目中webpack使用的写法却可以遵循这个偏服务器端的一个规范呢？为什么不用适合浏览器异步加载策略的AMD规范呢？

首先要理解一下CommonJS、AMD两种规范各是什么意思？

CommonJS的核心思想是把一个文件当做一个模块，要在哪里使用这个模块，就在哪里require这个模块，然后require方法开始加载这个模块并且执行其中的代码，最后会返回你指定的export对象。例如：

a.js中

    module.export = function() {
        hello: function() {
            alert("你好");
        }
    }

你在其它js中可以这样

var a = require('./xxx/a.js');
a.hello(); // ==> 弹窗“你好”

顺便在这里说一下commonJS中有的地方用module.export = xxx，有的地方用export = xxx，其实它们没有多大区别，node.js中 module是个对象，export是其中的一个属性，而export就是对moudle.export这个属性的一个引用罢了。
参考链接：node.js中module.export与export的区别。

BUT
CommonJS 加载模块是同步的，所以只有加载完成才能执行后面的操作，不能非阻塞的并行加载多个模块。像Node.js主要用于服务器的编程，加载的模块文件一般都已经存在本地硬盘，所以加载起来比较快，不用考虑异步加载的方式，所以CommonJS规范比较适用。但如果是浏览器环境，要从服务器加载模块，这是就必须采用异步模式。所以就有了 AMD CMD 解决方案。

AMD和CMD规范都是异步加载的方式，CMD没有具体了解过就不多说了，它的典型实现是SeaJS，据说是按需加载就近原则，as lazy as posible.

AMD全称(Asynchromous Module Definition)，它主要是采用了异步加载模块的方式，可以并行加载多个模块，等所有模块都加载并且解释执行完成后，才会执行接下来的代码（包括用AMD规范转换成CommonJS模块定义），讲究一个“提前执行”的思想，RequireJS就是对AMD规范最直接的实现。

下面用RequireJS来执行几个模块，看看会发生什么。
a.js

define(function() {
    console.log("I am module a, I have been required and excuted");
});

b.js

define(['c'], function(c) {
    console.log("I am module b, I have been required and excuted, I depend on module c");
});

c.js

define(function() {
    console.log("I am module c, I have been required and excuted");
});

main.js

//转换成CommonJS模块定义
define(function(require, exports, module) {
    require("a");
    console.log("a required");

    require("b");
    console.log("b required");

    console.log("all modules have been required");
});

然后你觉得结果会是这样吗？

QQ图片20170228200910.png

No! No! No！
如果你用的是实现CommonJS规范的Browserify或者用webpack来运行这些模块的话，结果确实是上述那样，上图就是CommonJS规范所得到的结果。

实际结果是：

QQ截图20170228201817.png

仔细一想，RequireJS是标准的采用AMD规范异步加载方式的，也就是说不管你用了AMD规范转换成CommonJS规范写的模块（伪同步，和CommonJS写法相同而已实际还是异步）还是直接异步加载，AMD规范始终遵循一切模块皆优先加载并执行，所以就算把require模块写到某句执行的代码后面，它仍然会被拉到最先去执行。

这里想记一下我查询资料得知的一些关于模块加载和解析执行的东西。

一个模块被require之后它会经历两个步骤，首先是加载，这个加载，可以是从本地加载的，比如webpack打包后的模块，也可以是从服务器请求来的模块资源。接着模块中的代码会被浏览器解释执行。CommonJS规范和AMD规范最大区别就体现在加载那一步骤上，如果都是从本地加载的，ok，是不是并行加载无所谓，反正都很快，如果是前端请求服务器获取模块资源，CommonJS的同步加载方式就坑爹了，它会由于某个请求加载的时间过长导致浏览器阻塞，不会往下执行，所以就会出现网页打开缓慢的现象。但是CommonJS和AMD的模块执行那一步所用的时间是一样的。

所以这就很好解释了为什么webpack可以让前端模块开发使用CommonJS，原因是无所谓。webpack也支持AMD、CMD规范，我自己试验过用无论是采用CommonJS还是AMD规范编写模块，最后都会被webpack分析依赖关系，然后打包到本地。之后浏览器加载的时候其实都是在读取本地文件（我的理解，总之同步异步没有什么区别了）。

最后放出一张我觉得很好地帮我理解RequireJS、SeaJS和Browserify、Webpack的图

Paste_Image.png

RequireJS和SeaJS都是在线编译的，就是在浏览器上加了一个CommonJS和AMD规范的解释器解释执行。
browserify和webpack是预编译，在本地将你写的CommonJS和AMD模块编译装换成浏览器认识的JS。