題目1：為什么要使用模塊化？
-
最主要的目的：
- 解決命名沖突
- 依賴管理
- 其他價值
提高代碼可讀性
代碼解耦，提高復(fù)用性
在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ú)立的王國，不用擔(dān)心命名沖突什么的，那么外部如果使用呢？直接import對應(yīng)的package即可
import java.util.ArrayList;
遺憾的是JavaScript在設(shè)計時定位原因，沒有提供類似的功能，開發(fā)者需要模擬出類似的功能，來隔離、組織復(fù)雜的JavaScript代碼，我們稱為模塊化。
一個模塊就是實現(xiàn)特定功能的文件，有了模塊，我們就可以更方便地使用別人的代碼，想要什么功能，就加載什么模塊。模塊開發(fā)需要遵循一定的規(guī)范，各行其是就都亂套了
題目2： CMD、AMD、CommonJS 規(guī)范分別指什么？有哪些應(yīng)用
- CMD 即Common Module Definition通用模塊定義，CMD規(guī)范是國內(nèi)發(fā)展出來的，就像AMD有個requireJS，CMD有個瀏覽器的實現(xiàn)SeaJS，SeaJS要解決的問題和requireJS一樣，只不過在模塊定義方式和模塊加載（可以說運(yùn)行、解析）時機(jī)上有所不同
語法
Sea.js 推崇一個模塊一個文件，遵循統(tǒng)一的寫法
- define
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 是一個方法，接受 模塊標(biāo)識 作為唯一參數(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');
});
// 加載模塊
seajs.use(['myModule.js'], function(my){
});
- AMD 即Asynchronous Module Definition，中文名是異步模塊定義的意思。它是一個在瀏覽器端模塊化開發(fā)的規(guī)范
由于不是JavaScript原生支持，使用AMD規(guī)范進(jìn)行頁面開發(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ù)，用來定義模塊的標(biāo)識，如果沒有提供該參數(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ù)，只有前面的模塊都加載成功后，才會運(yùn)行，解決了依賴性的問題。
- CommonJs
定義模塊 根據(jù)CommonJS規(guī)范，一個單獨(dú)的文件就是一個模塊。每一個模塊都是一個單獨(dú)的作用域，也就是說，在該模塊內(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)置模塊）
尷尬的瀏覽器
仔細(xì)看上面的代碼，會發(fā)現(xiàn)require是同步的。模塊系統(tǒng)需要同步讀取模塊文件內(nèi)容，并編譯執(zhí)行以得到模塊接口。
這在服務(wù)器端實現(xiàn)很簡單，也很自然，然而， 想在瀏覽器端實現(xiàn)問題卻很多。
瀏覽器端，加載JavaScript最佳、最容易的方式是在document中插入script 標(biāo)簽。但腳本標(biāo)簽天生異步，傳統(tǒng)CommonJS模塊在瀏覽器環(huán)境中無法正常加載。
解決思路之一是，開發(fā)一個服務(wù)器端組件，對模塊代碼作靜態(tài)分析，將模塊與它的依賴列表一起返回給瀏覽器端。 這很好使，但需要服務(wù)器安裝額外的組件，并因此要調(diào)整一系列底層架構(gòu)。
另一種解決思路是，用一套標(biāo)準(zhǔn)模板來封裝模塊定義，但是對于模塊應(yīng)該怎么定義和怎么加載，又產(chǎn)生的分歧：
題目3： 使用 requirejs 完善入門任務(wù)15，包括如下功能：
1. 首屏大圖為全屏輪播
2. 有回到頂部功能
3. 圖片區(qū)使用瀑布流布局（圖片高度不一），下部有加載更多按鈕，點(diǎn)擊加載更多會加載更多數(shù)據(jù)(數(shù)據(jù)在后端 mock)
4. 使用 r.js 打包應(yīng)用
