題目1: 為什么要使用模塊化啤握?
1.可以解決命名沖突
2.使代碼更易讀节槐、易維護(hù)
3.解決了文件依賴的問題
4.代碼解耦褐奴,提高復(fù)用性
題目2: CMD配乱、AMD溉卓、CommonJS 規(guī)范分別指什么?有哪些應(yīng)用
- CMD:即Common Module Definition通用模塊定義搬泥,SeaJS推廣過程中產(chǎn)生的;
在 CMD 規(guī)范中桑寨,一個模塊就是一個文件,用define關(guān)鍵字定義一個模塊忿檩,這是一個函數(shù);
使用方式是每次想要調(diào)用其他模塊的時候在寫到現(xiàn)在編寫的模塊中.
define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
var b = require('./b')
b.doSomething()
})
- AMD:即Asynchronous Module Definition尉尾,中文名是異步模塊定義的意思。它采用異步方式加載模塊燥透,模塊的加載不影響它后面語句的運(yùn)行沙咏。所有依賴這個模塊的語句,都定義在一個回調(diào)函數(shù)中班套,等到加載完成之后肢藐,這個回調(diào)函數(shù)才會運(yùn)行。它是一個在瀏覽器端模塊化開發(fā)的規(guī)范吱韭;
使用AMD規(guī)范進(jìn)行頁面開發(fā)需要用到對應(yīng)的庫函數(shù)吆豹,也就是大名鼎鼎RequireJS;
define(id?, dependencies?, factory);
id: 定義中模塊的名字,可選痘煤;如果沒有提供該參數(shù)凑阶,模塊的名字應(yīng)該默認(rèn)為模塊加載器請求的指定腳本的名字。
依賴dependencies:是一個數(shù)組速勇,表示所依賴的模塊晌砾。
工廠方法factory,是一個回調(diào)函數(shù)烦磁,當(dāng)前面指定的模塊都加載成功后养匈,它將被調(diào)用。加載的模塊會以參數(shù)形式傳入該函數(shù)都伪,從而在回調(diào)函數(shù)內(nèi)部就可以使用這些模塊呕乎。
- CommonJS:是服務(wù)器端模塊的規(guī)范,Node.js采用了這個規(guī)范陨晶。
在一個模塊中猬仁,存在一個自由的變量”require”,它是一個函數(shù)先誉;
在一個模塊中湿刽,會存在一個名為”exports”的自由變量,它是一個對象褐耳,模塊可以在執(zhí)行的時候把自身的API加入到其中诈闺;
模塊必須使用”exports”對象來做為輸出的唯一表示。
// math.js
exports.add = function() {
var sum = 0, i = 0, args = arguments, l = args.length;
while (i < l) {
sum += args[i++];
}
return sum;
};
// increment.js
var add = require('math').add;
exports.increment = function(val) {
return add(val, 1);
};
題目3: 使用 requirejs 完善入門任務(wù)15铃芦,包括如下功能:
- 首屏大圖為全屏輪播
- 有回到頂部功能
- 圖片區(qū)使用瀑布流布局(圖片高度不一)雅镊,下部有加載更多按鈕,點擊加載更多會加載更多數(shù)據(jù)(數(shù)據(jù)在后端 mock)
4(可選). 使用 r.js 打包應(yīng)用