提到模塊化就離不開(kāi)工程化幻林，所以先扯個(gè)圖在這沪饺。闷愤。。（我對(duì)工程化的理解和實(shí)踐還很不全面遭居，這個(gè)圖完全是按照這個(gè)文章的思路加點(diǎn)自己的理解總結(jié)的，還有很多不全面和不準(zhǔn)確的地方俱萍，懇請(qǐng)指正）
下面進(jìn)入文章的正題枪蘑，模塊化。（就是上圖中間空出的那個(gè)大分支）
從我接觸前端起 ES6 就已經(jīng)進(jìn)入大眾視野照捡，大家已經(jīng)開(kāi)始使用 import/export话侧，導(dǎo)致我對(duì)早期模塊化和相關(guān)的工具很不了解，經(jīng)常聽(tīng)到悲立、看到AMD/CMD/CommonJS/requirejs/r.js/sea.js 但是卻不知道他們的區(qū)別和關(guān)系新博。恰好最近有一個(gè)項(xiàng)目（哦，其實(shí)還是第一篇博客 的這個(gè)）在整合 react 進(jìn)來(lái)寥殖，遇到了一些和模塊化相關(guān)的問(wèn)題涩蜘，借此把之前模模糊糊的問(wèn)題梳理一下。
總體概覽：
我們主要要講的是粤策，早期各種流派的模塊化規(guī)范误窖，和實(shí)現(xiàn)了相應(yīng)規(guī)范的工具。下面我們就沿著這個(gè)路子詳細(xì)談?wù)劇?/p>
先說(shuō)標(biāo)準(zhǔn)：
在還沒(méi)有標(biāo)準(zhǔn)的規(guī)范出臺(tái)之前柔吼，社區(qū)為了實(shí)現(xiàn)模塊化已經(jīng)推出了幾種丙唧，包括：AMD,CMD,CommonJs。這三種規(guī)范之間還有著錯(cuò)綜復(fù)雜的關(guān)系培漏，并且 CMD 是國(guó)內(nèi)發(fā)展出來(lái)的。但是這些都不是我們的重點(diǎn)牌柄。規(guī)范規(guī)定了他們的寫(xiě)法珊佣，和模塊加載的時(shí)機(jī)、方式等彩扔。具體來(lái)說(shuō)的話(huà)就是：
AMD：
- 語(yǔ)法：
define(["require"],function(require){
//注意這里虫碉，即使沒(méi)有 require 胸梆，也就是可能沒(méi)用到這個(gè)模塊，AMD 默認(rèn)也是 下載并執(zhí)行好的
if(false){
var module = require('./a');
}
return ...//這里返回的就是 require 時(shí)候參數(shù)里拿到的東西
})
- 特征
都是在調(diào)用 define 方法確定了依賴(lài)之后就開(kāi)始下載文件并執(zhí)行兢卵。
也就是說(shuō)實(shí)際上是一個(gè)異步加載的過(guò)程绪颖。 - 相關(guān)工具
requireJs
注：其實(shí)就是在前端實(shí)現(xiàn)了一個(gè)在線(xiàn)的加載器。requireJs 提供了一個(gè)基于 node 的命令行工具 r.js窃款，用來(lái)壓縮多個(gè)模塊文件牍氛。在 node 端完成這個(gè)任務(wù)，避免客戶(hù)端多次請(qǐng)求紊扬。其實(shí)就是一個(gè)線(xiàn)下的打包器唉擂。我個(gè)人覺(jué)得這兩種方案就是在平衡合并請(qǐng)求和按需加載之間的矛盾。
CMD
- 語(yǔ)法：
define(function(require, exports, module) {
...
//依賴(lài)就近啤挎，用的時(shí)候才執(zhí)行
var clock = require('clock');
clock.start();
});
- 特征：
- 相關(guān)工具：
SeaJs
和 RequireJs 的語(yǔ)法很像，但是指定依賴(lài)的模塊是在傳過(guò)去的方法里確定的胜臊，而不是調(diào)用傳參的方式伙判。仔細(xì)想便知，這樣加載器在確定加載文件實(shí)際上只能通過(guò)靜態(tài)分析的方法去解析然后加載（事實(shí)也確實(shí)如此勒魔，是正則匹配require的過(guò)程）菇曲。但是執(zhí)行是在用的時(shí)候才執(zhí)行常潮。
CommonJs
是 node 采用的規(guī)范，此處不詳述了孵户。岔留。好了。竖配。里逆。去睡覺(jué)了。龄减。??
（推薦一篇講 browserify 運(yùn)行原理的文章班眯，覺(jué)得不錯(cuò)，建議一看宠能。具體剖析等我什么時(shí)候也能自己寫(xiě)模塊加載器的時(shí)候再寫(xiě)吧磁餐。阿弃。羞延。）
參考文章：
前端工程——基礎(chǔ)篇
前端模塊化開(kāi)發(fā)的價(jià)值
前端模塊化開(kāi)發(fā)那點(diǎn)歷史
browserify 運(yùn)行原理分析
RequireJS和AMD規(guī)范
LABjs伴箩、RequireJS、SeaJS 哪個(gè)最好用棺蛛？為什么巩步？
AMD 是提前執(zhí)行，CMD 是延遲執(zhí)行 如何理解呢终畅？
