為什么要使用模塊化
目的：
- 解決命名沖突的問題
- 解決依賴管理的問題
- 使代碼的可讀性更高
- 代碼解耦提高復用性
CMD、AMD、CommonJS 規(guī)范分別指什么？有哪些應用
CommonJS 規(guī)范
CommonJS 規(guī)范規(guī)定，每個文件就是一個模塊，有自己的作用域。在一個文件里面定義的變量、函數(shù)、類，都是私有的，對其他文件不可見。
//math.js
var x = 5;
var addX = function (value) {
return value + x;
};
module.exports.x = x;
module.exports.addX = addX;
//math.js
var math= require('./math.js');
console.log(math.x)//5
console.log(math.addX)//6
其中module變量代表當前模塊，這個變量是一個對象，它的exports屬性是對外的接口。加載某個模塊時其實是加載該模塊的module.exports，require方法用于加載該模塊
AMD規(guī)范
AMD是Asynchronous Module Definition的簡寫，意思就是"異步模塊定義"。是 RequireJS 在推廣過程中的規(guī)范化產出。
requireJS定義了一個函數(shù) define，它是全局變量，用來定義模塊
語法：define(id?, dependencies?, factory);
- id：可選參數(shù)，用來定義模塊的標識，如果沒有提供該參數(shù)，腳本文件名（去掉拓展名）
- dependencies：是一個當前模塊依賴的模塊名稱數(shù)組
- factory：工廠方法，模塊初始化要執(zhí)行的函數(shù)或對象。如果為函數(shù)，它應該只被執(zhí)行一次。如果是對象，此對象應該為模塊的輸出值。
在頁面上使用require函數(shù)加載模塊
require([dependencies], function(){});
require()函數(shù)接受兩個參數(shù)
- 第一個參數(shù)是一個數(shù)組，表示所依賴的模塊
- 第二個參數(shù)是一個回調函數(shù)，當前面指定的模塊都加載成功后，它將被調用。加載的模塊會以參數(shù)形式傳入該函數(shù)，從而在回調函數(shù)內部就可以使用這些模塊
require()函數(shù)在加載依賴的函數(shù)的時候是異步加載的，這樣瀏覽器不會失去響應，它指定的回調函數(shù)，只有前面的模塊都加載成功后，才會運行，解決了依賴性的問題。
CMD
CMD是Common Moudle Definition的縮寫，意思就是通用模塊定義，這個規(guī)范是Sea.js推廣過程中產生的，Sea.js要解決的問題和requireJS一樣，只不過在模塊定義方式和模塊加載（可以說運行、解析）時機上有所不同
語法：define(id?, deps?, factory)
工廠函數(shù)中有require, exports, module三個參數(shù)
require是接受其他模塊方法，exports是模塊提供給外部調用的api，module儲存模塊的一些信息
// 定義模塊 myModule.js
define(function(require, exports, module) {
var $ = require('jquery.js')
$('div').addClass('active');
});
// 加載模塊
seajs.use(['myModule.js'], function(my){
});
AMD和CMD的區(qū)別
普通的區(qū)別：
- AMD推崇依賴前置，在定義模塊的時候就要聲明其依賴的模塊
- CMD推崇就近依賴，只有在用到某個模塊的時候再去require
這種區(qū)別各有優(yōu)劣，只是語法上的差別。
他們最大的區(qū)別是對依賴模塊的執(zhí)行時機不同：
- AMD在加載模塊完成后就會執(zhí)行該模塊，所有模塊都加載執(zhí)行完后會進入require的回調函數(shù)，執(zhí)行主邏輯，這樣的效果就是依賴模塊的執(zhí)行順序和書寫順序不一定一致，看網絡速度，哪個先下載下來，哪個先執(zhí)行，但是主邏輯一定在所有依賴加載完成后才執(zhí)行。
- CMD加載完某個依賴模塊后并不執(zhí)行，只是下載而已，在所有依賴模塊加載完成后進入主邏輯，遇到require語句的時候才執(zhí)行對應的模塊。
應用：
- CommonJS 適用于服務端，基于 Node，可用 Glup、 Webpack 之類的打包壓縮再用于瀏覽器環(huán)境。
- AMD 用于瀏覽器環(huán)境，如 RequireJS
- CMD 用于瀏覽器環(huán)境， SeaJS 推廣中產出
使用 requirejs 完善以下功能
1. 首屏大圖為全屏輪播
2. 有回到頂部功能
3. 圖片區(qū)使用瀑布流布局（圖片高度不一），下部有加載更多按鈕，點擊加載更多會加載更多數(shù)據(數(shù)據在后端 mock)
4. 使用 r.js 打包應用
