題目一 為什么要使用模塊化

1. 解決命名沖突
2. 解決依賴管理
3. 提高代碼可讀性
4. 代碼解耦，提高復用性
5. 是大規(guī)模網(wǎng)站的協(xié)同開發(fā)更加方便，每個人只需關注自己功能的實現(xiàn)即可

題目二 CMD、AMD/CommonJs規(guī)范分別指什么?有哪些應用

CMD（Common Module Definition）通用模塊定義，是一種模塊定義和模塊加載方式的規(guī)范

語法：

define
define(id?,deps?,factory)
CMD推崇依賴就近，所以一般不再define的參數(shù)中寫依賴，在factory中寫
factory有三個參數(shù)

function(require,exports,module)
require是一個方法，接受模塊標識作為唯一參數(shù)，用來獲取其他模塊提供的接口
exports是一個對象，用來想外提供模塊接口
module是個對象，上面存儲了與當前模塊相關的屬性和方法

//在a.js中定義模塊
define(function(require,exports,module){
    var $ = require("jquery.js")
    // dosomething with jquery
    exports.foo = something
})
//在c.js中使用模塊
defind(function(require,exports,module){
    var a = require('./a.js')
    a.foo//do something with a.foo函數(shù)
    exports.bar = thisthing//本模塊輸出的接口
})

AMD （Async Module Definition）異步模塊定義,回一個瀏覽器斷模塊化開發(fā)的規(guī)范

主要解決

1. js文件依賴問題
2. js加載時瀏覽器會停止頁面渲染，加載文件越多，頁面失去的響應時間越長

語法

define
define(id?dependencies?,factory);
id:可選參數(shù)，用來定義模塊的標識，如果沒有提供該參數(shù)，腳本文件名為模塊標識符
dependencies：是一個當前模塊依賴的模塊名稱數(shù)組
factory：工廠方法，模塊初始化要執(zhí)行的函數(shù)或?qū)ο?，如果為函?shù)，它應該只執(zhí)行一次，如果是對象，此對象應該為模塊的輸出值

require
require(['dependencies'],function(depName){

})
dependencies:標識所依賴的模塊
function(){}：當模塊加載成功后執(zhí)行的回調(diào)函數(shù)，加載的模塊會以參數(shù)形式傳入該函數(shù)
require()函數(shù)在加載依賴函數(shù)時是異步加載，所以瀏覽器不會失去響應，它指定的回調(diào)函數(shù)，只有前面的模塊都加載成功了，才會運行，解決了依賴性

//定義module.js
define(['dependencies'],function(){
    var name = 'Array';
    function printName(){console.log(name)}
    return {printName: pirintName}
})

//加載模塊
require(['module'],function(module){
    module.printName()
})

CommonJS

CommonJS是個模塊化規(guī)范

1. 一個單獨的文件就是一個模塊，每個模塊都是一個單獨的作用域，在模塊內(nèi)部定義的變量，無法被其他模塊讀取，除非定義為global對象的屬性

2. 模塊輸出：模塊只有一個出口，module.exports對象，我們需要把模塊輸出的內(nèi)容放入該對象

3. 加載模塊：加載模塊使用require方法，該方法讀取一個文件并執(zhí)行，返回文件內(nèi)部的module.exports對象，如果請求的模塊不能返回，那么"require"必須拋出一個錯誤。

//模塊定義model.js

var name = "Array"

function printName(){
    console.log(name);
}
function printFullName(firstName){
    console.log(firstName + name)
}
module.exports = {
    printName: printName;
    printFullName: printFullName
}

//加載模塊
var nameModule = require("./model.js")
nameModule.printName() // "Array"
nameModule.printFullName("Bob") // "Bob Array"

應用 ：因為require是同步的，所以主要是在服務器端使用
瀏覽器斷加載JavaScript是異步的，所以傳統(tǒng)的CommonJs在瀏覽器環(huán)境中無法正常加載

題目三 使用requirejs完善入門任務15，包括如下功能：

1. 首屏大圖為全屏輪播
2. 有回到頂部功能
3. 圖片區(qū)使用瀑布流布局（圖片高度不一），下部有加載更多按鈕，點擊加載更多會加載更多數(shù)據(jù)（數(shù)據(jù)在后端mock）
3. 使用r.js打包應用

效果預覽
源碼地址