在講React組件化之前，先討論下Javascript的模塊化思想帚稠。
在JavaScript發(fā)展初期就是為了實現(xiàn)簡單的頁面交互邏輯浇借，寥寥數(shù)語即可螟够；如今CPU读慎、瀏覽器性能得到了極大的提升漱贱，很多頁面邏輯遷移到了客戶端（表單驗證等），隨著web2.0時代的到來夭委，Ajax技術(shù)得到廣泛應(yīng)用幅狮，jQuery等前端庫層出不窮，前端代碼日益膨脹 株灸。
這時候JavaScript作為嵌入式的腳本語言的定位動搖了崇摄，JavaScript卻沒有為組織代碼提供任何明顯幫助，甚至沒有類的概念慌烧，更不用說模塊（module）了逐抑，JavaScript極其簡單的代碼組織規(guī)范不足以駕馭如此龐大規(guī)模的代碼。
模塊
既然JavaScript不能handle如此大規(guī)模的代碼杏死，我們可以借鑒一下其它語言是怎么處理大規(guī)模程序設(shè)計的泵肄，在Java中有一個重要帶概念——package，邏輯上相關(guān)的代碼組織到同一個包內(nèi)淑翼，包內(nèi)是一個相對獨立的王國腐巢，不用擔(dān)心命名沖突什么的，那么外部如果使用呢玄括？直接import對應(yīng)的package即可
import java.util.ArrayList
遺憾的是JavaScript在設(shè)計時定位原因冯丙，沒有提供類似的功能，開發(fā)者需要模擬出類似的功能遭京，來隔離胃惜、組織復(fù)雜的JavaScript代碼，我們稱為模塊化哪雕。
一個模塊就是實現(xiàn)特定功能的文件船殉，有了模塊，我們就可以更方便地使用別人的代碼斯嚎，想要什么功能利虫，就加載什么模塊。模塊開發(fā)需要遵循一定的規(guī)范堡僻，各行其是就都亂套了糠惫。
規(guī)范形成的過程是痛苦的，前端的先驅(qū)在刀耕火種钉疫、茹毛飲血的階段開始硼讽，發(fā)展到現(xiàn)在初具規(guī)模，簡單了解一下這段不凡的歷程牲阁。
函數(shù)封裝
我們在講函數(shù)的時候提到固阁，函數(shù)一個功能就是實現(xiàn)特定邏輯的一組語句打包壤躲，而且JavaScript的作用域就是基于函數(shù)的，所以把函數(shù)作為模塊化的第一步是很自然的事情您炉，在一個文件里面編寫幾個相關(guān)函數(shù)就是最開始的模塊了柒爵。
function() f1 {
statement
}
這樣在需要的以后夾在函數(shù)所在文件役电，調(diào)用函數(shù)就可以了 赚爵。
這種做法的缺點很明顯：污染了全局變量，無法保證不與其他模塊發(fā)生變量名沖突法瑟，而且模塊成員之間沒什么關(guān)系冀膝。
對象
為了解決上面問題，對象的寫法應(yīng)運而生霎挟，可以把所有的模塊成員封裝在一個對象中窝剖。
var myModule = {
x: 1,
y: 2,
fn1: function() {
},
fn2: function() {
}
}
這樣我們在希望調(diào)用模塊的時候引用對應(yīng)文件，然后
myModule.fn2();
這樣避免了變量污染酥夭，只要保證模塊名唯一即可赐纱，同時同一模塊內(nèi)的成員也有了關(guān)系 。
看似不錯的解決方案熬北，但是也有缺陷疙描，外部可以隨意修改內(nèi)部成員。
myModule1.x = 100;
這樣就會產(chǎn)生意外的安全問題讶隐。
立即執(zhí)行函數(shù)
可以通過立即執(zhí)行函數(shù)起胰，來達到隱藏細節(jié)的目的。
var myModule = (function() {
var var1 = 1;
var var2 = 2;
function fn1() {
}
function fn2(){
}
return {
fn1: fn1,
fn2: fn2
};
})();
這樣在模塊外部無法修改我們沒有暴露出來的變量巫延、函數(shù) , 達到作用域封裝的效果效五。
構(gòu)造函數(shù)
構(gòu)造函數(shù)是我比較傾向的一種模塊化寫法，同樣不會污染全局作用域炉峰，局部封裝畏妖。這里我以做過的項目舉例：
這里是以頁面來劃分模塊。
這里是以頁面里的組件來劃分模塊疼阔。
這里是用JS寫的公共組件戒劫。
因為要做的頁面是tab切換，這個組件里tab對應(yīng)頁面的內(nèi)容渲染組件竿开。
我只截取了關(guān)鍵代碼谱仪，其實大致的處理是這樣的:
每個組件內(nèi)負責(zé)渲染以及邏輯處理
index.js就好比一個入口文件，最終由app.start()方法進入入口實現(xiàn)所有組件的內(nèi)部渲染否彩。
這里我的頁面還是有點區(qū)別疯攒，由于每個tab對應(yīng)每個content都是列表形式，就是說所有的內(nèi)容模板都一樣列荔，我就把模板定義寫在入口文件中敬尺，在寫頁面的時候還是要根據(jù)實際情況來寫枚尼，前提是整個脈絡(luò)要理清楚。
最終結(jié)果：
目前砂吞，通行的JavaScript模塊規(guī)范主要有兩種：CommonJS和AMD署恍。
CommonJS
我們先從CommonJS談起，因為在網(wǎng)頁端沒有模塊化編程只是頁面JavaScript邏輯復(fù)雜蜻直，但也可以工作下去盯质，在服務(wù)器端卻一定要有模塊，所以雖然JavaScript在web端發(fā)展這么多年概而，第一個流行的模塊化規(guī)范卻由服務(wù)器端的JavaScript應(yīng)用帶來呼巷，CommonJS規(guī)范是由NodeJS發(fā)揚光大，這標志著JavaScript模塊化編程正式登上舞臺赎瑰。
定義模塊
根據(jù)CommonJS規(guī)范王悍，一個單獨的文件就是一個模塊。每一個模塊都是一個單獨的作用域餐曼，也就是說压储，在該模塊內(nèi)部定義的變量，無法被其他模塊讀取源譬，除非定義為global對象的屬性 集惋。
模塊輸出
模塊只有一個出口，module.exports對象瓶佳，我們需要把模塊希望輸出的內(nèi)容放入該對象 芋膘。
加載模塊
加載模塊使用require方法，該方法讀取一個文件并執(zhí)行霸饲，返回文件內(nèi)部的module.exports對象 为朋。
例子
//模塊定義 myModel.js
var name = 'Byron';
function printName(){
console.log(name);
}
function printFullName(firstName){
console.log(firstName + name);
}
module.exports = {
printName: printName,
printFullName: printFullName
}
//加載模塊
var nameModule = require('./myModel.js');
nameModule.printName();
}
不同的實現(xiàn)對require時的路徑有不同要求，一般情況可以省略js拓展名厚脉，可以使用相對路徑习寸，也可以使用絕對路徑，甚至可以省略路徑直接使用模塊名（前提是該模塊是系統(tǒng)內(nèi)置模塊）
尷尬的瀏覽器
仔細看上面的代碼傻工，會發(fā)現(xiàn)require是同步的霞溪。模塊系統(tǒng)需要同步讀取模塊文件內(nèi)容，并編譯執(zhí)行以得到模塊接口中捆。 這在服務(wù)器端實現(xiàn)很簡單鸯匹，也很自然，然而泄伪， 想在瀏覽器端實現(xiàn)問題卻很多殴蓬。 瀏覽器端，加載JavaScript最佳蟋滴、最容易的方式是在document中插入script 標簽染厅。但腳本標簽天生異步痘绎，傳統(tǒng)CommonJS模塊在瀏覽器環(huán)境中無法正常加載。
解決思路之一是肖粮，開發(fā)一個服務(wù)器端組件孤页，對模塊代碼作靜態(tài)分析，將模塊與它的依賴列表一起返回給瀏覽器端涩馆。 這很好使行施，但需要服務(wù)器安裝額外的組件，并因此要調(diào)整一系列底層架構(gòu)凌净。 另一種解決思路是悲龟，用一套標準模板來封裝模塊定義，但是對于模塊應(yīng)該怎么定義和怎么加載冰寻，又產(chǎn)生的分歧：
AMD
AMD 即Asynchronous Module Definition，中文名是異步模塊定義的意思皿渗。它是一個在瀏覽器端模塊化開發(fā)的規(guī)范
由于不是JavaScript原生支持斩芭，使用AMD規(guī)范進行頁面開發(fā)需要用到對應(yīng)的庫函數(shù)，也就是大名鼎鼎RequireJS乐疆，實際上AMD 是 RequireJS 在推廣過程中對模塊定義的規(guī)范化的產(chǎn)出
requireJS主要解決兩個問題
多個js文件可能有依賴關(guān)系划乖，被依賴的文件需要早于依賴它的文件加載到瀏覽器 js加載的時候瀏覽器會停止頁面渲染，加載文件越多挤土，頁面失去響應(yīng)時間越長
看一個使用requireJS的例子
// 定義模塊 myModule.js
define(['dependency'], function(){
var name = 'Byron';
function printName(){
console.log(name);
}
return {
printName: printName
};
});
// 加載模塊
require(['myModule'], function (my){
my.printName();
});
語法
requireJS定義了一個函數(shù) define琴庵，它是全局變量，用來定義模塊 仰美。
define(id?, dependencies?, factory);
id：可選參數(shù)迷殿，用來定義模塊的標識，如果沒有提供該參數(shù)咖杂，腳本文件名（去掉拓展名）
dependencies：是一個當(dāng)前模塊依賴的模塊名稱數(shù)組
factory：工廠方法庆寺，模塊初始化要執(zhí)行的函數(shù)或?qū)ο蟆Ｈ绻麨楹瘮?shù)诉字，它應(yīng)該只被執(zhí)行一次懦尝。如果是對象，此對象應(yīng)該為模塊的輸出值 壤圃。
在頁面上使用require函數(shù)加載模塊：
require([dependencies], function(){});
require()函數(shù)接受兩個參數(shù)
第一個參數(shù)是一個數(shù)組陵霉，表示所依賴的模塊
第二個參數(shù)是一個回調(diào)函數(shù)，當(dāng)前面指定的模塊都加載成功后伍绳，它將被調(diào)用踊挠。加載的模塊會以參數(shù)形式傳入該函數(shù)，從而在回調(diào)函數(shù)內(nèi)部就可以使用這些模塊墨叛。
require()函數(shù)在加載依賴的函數(shù)的時候是異步加載的止毕，這樣瀏覽器不會失去響應(yīng)模蜡，它指定的回調(diào)函數(shù)，只有前面的模塊都加載成功后扁凛，才會運行忍疾，解決了依賴性的問題。
CMD
CMD 即Common Module Definition通用模塊定義谨朝，CMD規(guī)范是國內(nèi)發(fā)展出來的卤妒，就像AMD有個requireJS，CMD有個瀏覽器的實現(xiàn)SeaJS字币，SeaJS要解決的問題和requireJS一樣则披，只不過在模塊定義方式和模塊加載（可以說運行、解析）時機上有所不同洗出。
語法
Sea.js 推崇一個模塊一個文件士复，遵循統(tǒng)一的寫法 。
define(id?, deps?, factory)
因為CMD推崇
一個文件一個模塊翩活，所以經(jīng)常就用文件名作為模塊id
CMD推崇依賴就近阱洪，所以一般不在define的參數(shù)中寫依賴，在factory中寫
factory有三個參數(shù)
function(require, exports, module)
require
require 是 factory 函數(shù)的第一個參數(shù)菠镇。
require(id)
require 是一個方法冗荸，接受 模塊標識 作為唯一參數(shù)，用來獲取其他模塊提供的接口利耍。
exports
exports 是一個對象蚌本，用來向外提供模塊接口 。
module
module 是一個對象隘梨，上面存儲了與當(dāng)前模塊相關(guān)聯(lián)的一些屬性和方法 程癌。
demo
// 定義模塊 myModule.js
define(function(require, exports, module) {
var $ = require('jquery.js');
$('div').addClass('active');
// 通過 exports 對外提供接口
exports.doSomething = ...
// 或者通過 module.exports 提供整個接口
module.exports = ...
});
// 加載模塊
seajs.use(['myModule.js'], function(my){
});
AMD與CMD區(qū)別
最明顯的區(qū)別就是在模塊定義時對依賴的處理不同
AMD推崇依賴前置，在定義模塊的時候就要聲明其依賴的模塊
CMD推崇就近依賴出嘹，只有在用到某個模塊的時候再去require
這種區(qū)別各有優(yōu)劣席楚，只是語法上的差距，而且requireJS和SeaJS都支持對方的寫法 AMD和CMD最大的區(qū)別是對依賴模塊的執(zhí)行時機處理不同税稼，注意不是加載的時機或者方式不同
很多人說requireJS是異步加載模塊烦秩，SeaJS是同步加載模塊，這么理解實際上是不準確的郎仆，其實加載模塊都是異步的只祠，只不過AMD依賴前置，js可以方便知道依賴模塊是誰扰肌，立即加載抛寝，而CMD就近依賴，需要使用把模塊變?yōu)樽址馕鲆槐椴胖酪蕾嚵四切┠K，這也是很多人詬病CMD的一點盗舰，犧牲性能來帶來開發(fā)的便利性晶府，實際上解析模塊用的時間短到可以忽略
為什么我們說兩個的區(qū)別是依賴模塊執(zhí)行時機不同，為什么很多人認為ADM是異步的钻趋，CMD是同步的（除了名字的原因川陆。。蛮位。）
同樣都是異步加載模塊较沪，AMD在加載模塊完成后就會執(zhí)行改模塊，所有模塊都加載執(zhí)行完后會進入require的回調(diào)函數(shù)失仁，執(zhí)行主邏輯尸曼，這樣的效果就是依賴模塊的執(zhí)行順序和書寫順序不一定一致，看網(wǎng)絡(luò)速度萄焦，哪個先下載下來控轿，哪個先執(zhí)行，但是主邏輯一定在所有依賴加載完成后才執(zhí)行
CMD加載完某個依賴模塊后并不執(zhí)行楷扬，只是下載而已解幽，在所有依賴模塊加載完成后進入主邏輯，遇到require語句的時候才執(zhí)行對應(yīng)的模塊烘苹，這樣模塊的執(zhí)行順序和書寫順序是完全一致的
這也是很多人說AMD用戶體驗好，因為沒有延遲片部，依賴模塊提前執(zhí)行了镣衡，CMD性能好，因為只有用戶需要的時候才執(zhí)行的原因档悠。
