為什么要使用模塊化？
最主要的目的：
- 解決命名沖突
- 依賴(lài)管理
其他價(jià)值:
- 提高代碼可讀性
- 代碼解耦，提高復(fù)用性
CMD、AMD、CommonJS 規(guī)范分別指什么？有哪些應(yīng)用
CommonJS
CommonJS API定義很多普通應(yīng)用程序（主要指非瀏覽器的應(yīng)用）使用的API，從而填補(bǔ)了這個(gè)空白。它的終極目標(biāo)是提供一個(gè)類(lèi)似Python，Ruby和Java標(biāo)準(zhǔn)庫(kù)。
CommonJS規(guī)范是由NodeJS發(fā)揚(yáng)光大，這標(biāo)志著JavaScript模塊化編程正式登上舞臺(tái)。
- 定義模塊 根據(jù)CommonJS規(guī)范，一個(gè)單獨(dú)的文件就是一個(gè)模塊。每一個(gè)模塊都是一個(gè)單獨(dú)的作用域，也就是說(shuō)，在該模塊內(nèi)部定義的變量，無(wú)法被其他模塊讀取，除非定義為global對(duì)象的屬性
- 模塊輸出： 模塊只有一個(gè)出口，module.exports對(duì)象，我們需要把模塊希望輸出的內(nèi)容放入該對(duì)象
- 加載模塊： 加載模塊使用require方法，該方法讀取一個(gè)文件并執(zhí)行，返回文件內(nèi)部的module.exports對(duì)象
AMD
AMD 即Asynchronous Module Definition，中文名是異步模塊定義的意思。它是一個(gè)在瀏覽器端模塊化開(kāi)發(fā)的規(guī)范
由于不是JavaScript原生支持，使用AMD規(guī)范進(jìn)行頁(yè)面開(kāi)發(fā)需要用到對(duì)應(yīng)的庫(kù)函數(shù)，也就是大名鼎鼎RequireJS，實(shí)際上AMD 是 RequireJS 在推廣過(guò)程中對(duì)模塊定義的規(guī)范化的產(chǎn)出。
語(yǔ)法
requireJS定義了一個(gè)函數(shù) define，它是全局變量，用來(lái)定義模塊
define(id?, dependencies?, factory);
id：可選參數(shù)，用來(lái)定義模塊的標(biāo)識(shí)，如果沒(méi)有提供該參數(shù)，腳本文件名（去掉拓展名）
dependencies：是一個(gè)當(dāng)前模塊依賴(lài)的模塊名稱(chēng)數(shù)組
factory：工廠方法，模塊初始化要執(zhí)行的函數(shù)或?qū)ο?。如果為函?shù)，它應(yīng)該只被執(zhí)行一次。如果是對(duì)象，此對(duì)象應(yīng)該為模塊的輸出值
在頁(yè)面上使用require函數(shù)加載模塊
require([dependencies], function(){});
require()函數(shù)接受兩個(gè)參數(shù)
第一個(gè)參數(shù)是一個(gè)數(shù)組，表示所依賴(lài)的模塊
第二個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)，當(dāng)前面指定的模塊都加載成功后，它將被調(diào)用。加載的模塊會(huì)以參數(shù)形式傳入該函數(shù)，從而在回調(diào)函數(shù)內(nèi)部就可以使用這些模塊
require()函數(shù)在加載依賴(lài)的函數(shù)的時(shí)候是異步加載的，這樣瀏覽器不會(huì)失去響應(yīng)，它指定的回調(diào)函數(shù)，只有前面的模塊都加載成功后，才會(huì)運(yùn)行，解決了依賴(lài)性的問(wèn)題。
AMD demo:
define(['jquery','app/goTop','app/water','app/carousel'],function($,GoTop,Water,Carousel){
GoTop.init() //回到頂部
Water.init($('.pb-content')) //瀑布流
Carousel.init($('.carousel')) //輪播
})
CMD
CMD 即Common Module Definition通用模塊定義，CMD規(guī)范是國(guó)內(nèi)發(fā)展出來(lái)的，就像AMD有個(gè)requireJS，CMD有個(gè)瀏覽器的實(shí)現(xiàn)SeaJS，SeaJS要解決的問(wèn)題和requireJS一樣，只不過(guò)在模塊定義方式和模塊加載（可以說(shuō)運(yùn)行、解析）時(shí)機(jī)上有所不同
語(yǔ)法
Sea.js 推崇一個(gè)模塊一個(gè)文件，遵循統(tǒng)一的寫(xiě)法
define(id?, deps?, factory)
因?yàn)镃MD推崇
一個(gè)文件一個(gè)模塊，所以經(jīng)常就用文件名作為模塊id
CMD推崇依賴(lài)就近，所以一般不在define的參數(shù)中寫(xiě)依賴(lài)，在factory中寫(xiě)
factory有三個(gè)參數(shù):
function(require, exports, module)
CMD demo:
// 定義模塊 myModule.js
define(function(require, exports, module) {
var $ = require('jquery.js')
$('div').addClass('active');
});
// 加載模塊
seajs.use(['myModule.js'], function(my){
});
AMD & CMD 比較：
關(guān)于這兩個(gè)的區(qū)別網(wǎng)上可以搜出一堆文章，簡(jiǎn)單總結(jié)一下
最明顯的區(qū)別就是在模塊定義時(shí)對(duì)依賴(lài)的處理不同
AMD推崇依賴(lài)前置，在定義模塊的時(shí)候就要聲明其依賴(lài)的模塊
CMD推崇就近依賴(lài)，只有在用到某個(gè)模塊的時(shí)候再去require
這種區(qū)別各有優(yōu)劣，只是語(yǔ)法上的差距，而且requireJS和SeaJS都支持對(duì)方的寫(xiě)法
AMD和CMD最大的區(qū)別是對(duì)依賴(lài)模塊的執(zhí)行時(shí)機(jī)處理不同，注意不是加載的時(shí)機(jī)或者方式不同
很多人說(shuō)requireJS是異步加載模塊，SeaJS是同步加載模塊，這么理解實(shí)際上是不準(zhǔn)確的，其實(shí)加載模塊都是異步的，只不過(guò)AMD依賴(lài)前置，js可以方便知道依賴(lài)模塊是誰(shuí)，立即加載，而CMD就近依賴(lài)，需要使用把模塊變?yōu)樽址馕鲆槐椴胖酪蕾?lài)了那些模塊，這也是很多人詬病CMD的一點(diǎn)，犧牲性能來(lái)帶來(lái)開(kāi)發(fā)的便利性，實(shí)際上解析模塊用的時(shí)間短到可以忽略
為什么我們說(shuō)兩個(gè)的區(qū)別是依賴(lài)模塊執(zhí)行時(shí)機(jī)不同，為什么很多人認(rèn)為ADM是異步的，CMD是同步的（除了名字的原因。。。）
同樣都是異步加載模塊，AMD在加載模塊完成后就會(huì)執(zhí)行該模塊，所有模塊都加載執(zhí)行完后會(huì)進(jìn)入require的回調(diào)函數(shù)，執(zhí)行主邏輯，這樣的效果就是依賴(lài)模塊的執(zhí)行順序和書(shū)寫(xiě)順序不一定一致，看網(wǎng)絡(luò)速度，哪個(gè)先下載下來(lái)，哪個(gè)先執(zhí)行，但是主邏輯一定在所有依賴(lài)加載完成后才執(zhí)行
CMD加載完某個(gè)依賴(lài)模塊后并不執(zhí)行，只是下載而已，在所有依賴(lài)模塊加載完成后進(jìn)入主邏輯，遇到require語(yǔ)句的時(shí)候才執(zhí)行對(duì)應(yīng)的模塊，這樣模塊的執(zhí)行順序和書(shū)寫(xiě)順序是完全一致的
這也是很多人說(shuō)AMD用戶體驗(yàn)好，因?yàn)闆](méi)有延遲，依賴(lài)模塊提前執(zhí)行了，CMD性能好，因?yàn)橹挥杏脩粜枰臅r(shí)候才執(zhí)行的原因
