1： 為什么要使用模塊化？
模塊化可以使代碼低耦合，功能模塊直接不相互影響。
1.可維護(hù)性：根據(jù)定義，每個(gè)模塊都是獨(dú)立的。良好設(shè)計(jì)的模塊會(huì)盡量與外部的代碼撇清關(guān)系，以便于獨(dú)立對(duì)其進(jìn)行改進(jìn)和維護(hù)。維護(hù)一個(gè)獨(dú)立的模塊比起一團(tuán)凌亂的代碼來(lái)說(shuō)要輕松很多。
2.命名空間：在JavaScript中，最高級(jí)別的函數(shù)外定義的變量都是全局變量（這意味著所有人都可以訪問(wèn)到它們）。也正因如此，當(dāng)一些無(wú)關(guān)的代碼碰巧使用到同名變量的時(shí)候，我們就會(huì)遇到“命名空間污染”的問(wèn)題。
3.可復(fù)用性：現(xiàn)實(shí)來(lái)講，在日常工作中我們經(jīng)常會(huì)復(fù)制自己之前寫過(guò)的代碼到新項(xiàng)目中。
2： CMD、AMD、CommonJS 規(guī)范分別指什么？有哪些應(yīng)用
Asynchronous Module Definition _（AMD）/（異步模塊定義）
它推崇依賴前置，采用異步方式加載模塊，模塊的加載不影響它后面語(yǔ)句的運(yùn)行。所有依賴這個(gè)模塊的語(yǔ)句，都定義在一個(gè)回調(diào)函數(shù)中，等到加載完成之后，這個(gè)回調(diào)函數(shù)才會(huì)運(yùn)行。
特點(diǎn):
1.依賴前置,需要在定義的時(shí)候，寫好需要的依賴。應(yīng)用有require.js
2.多個(gè)JS有依賴關(guān)系。被依賴的JS需要早于依賴它的文件提前加入。
3.JS加載的時(shí)候，頁(yè)面會(huì)停止渲染。加載的文件越多。頁(yè)面失去響應(yīng)的時(shí)間越長(zhǎng)。
應(yīng)用:require.js
//定義模塊：
define(id ?, dependencies?, function)
-----------------------------------------------
//id:可選參數(shù),用來(lái)定義模塊標(biāo)識(shí)。如果沒(méi)有寫，就用文件名。
//denpendencies:當(dāng)前的模塊依賴的模塊，數(shù)組形式。
//function:執(zhí)行的函數(shù)
//加載模塊
require([dependencies], function)
//---------------------------------------------
//dependencies：當(dāng)前模塊需要的依賴的模塊。
//function：回調(diào)函數(shù)，在模塊加載完了后，會(huì)被執(zhí)行。
//require是異步執(zhí)行。在依賴模塊沒(méi)有被加載完。是不會(huì)執(zhí)行回調(diào)函數(shù)的。同時(shí)瀏覽器不會(huì)失去響應(yīng)。
Common Module Definition ——（CMD）
通用模塊定義,是一種模塊定義方式和模塊加載方式的規(guī)范
依賴就近，需要的時(shí)候再引入這個(gè)依賴項(xiàng)，用的時(shí)候再require。
推崇一個(gè)文件一個(gè)模塊，所以經(jīng)常將文件名作為模塊id
因推崇依賴就近，所以一般不在define的參數(shù)中寫依賴，在factory中寫。
應(yīng)用：sea.js
define(function(require,exports,module){})
//require:獲取其他的模塊提供的接口。
//exports:對(duì)外提供模塊的接口。
//module是個(gè)對(duì)象，上面存儲(chǔ)了與當(dāng)前模塊相關(guān)的屬性和方法
CommonJS
1-.一個(gè)單獨(dú)的文件就是一個(gè)模塊，每個(gè)模塊都是一個(gè)單獨(dú)的作用域
在模塊內(nèi)部定義的變量，無(wú)法被其他模塊讀取，除非定義為global對(duì)象的屬性
2-.模塊輸出：模塊只有一個(gè)出口，module.exports對(duì)象，我們需要把模塊希望輸出的內(nèi)容放入該對(duì)象
3-.加載模塊：加載模塊使用require方法，該方法讀取一個(gè)文件并執(zhí)行，返回 文件內(nèi)部的module.exports對(duì)象，如果請(qǐng)求的模塊不能返回，那么”require”必須拋出一個(gè)錯(cuò)誤。
應(yīng)用：服務(wù)器端
3： 使用 requirejs 完善入門任務(wù)15，包括如下功能：
1. 首屏大圖為全屏輪播
2. 有回到頂部功能
3. 圖片區(qū)使用瀑布流布局（圖片高度不一），下部有加載更多按鈕，點(diǎn)擊加載更多會(huì)加載更多數(shù)據(jù)(數(shù)據(jù)在后端 mock)
4. 使用 r.js 打包應(yīng)用
- 先把獨(dú)立的效果手動(dòng)封裝模塊化...(抽象)
- 再利用 requireJs 命令壓縮..
Command：r.js -o build.js - 應(yīng)用到文檔.
index.js
define(['jquery','component/carousel','component/goTop','component/news'
],function($,carousel,GoTop,News){
carousel.init($('.carousel'));
new GoTop();
new News($('.container'));
})
main.js
requirejs.config({
baseUrl: '../js', //找到j(luò)s目錄
paths: {
'jquery': 'lib/jquery-3.2.1.min'
}
});
requirejs(['app/index']); //js/app/index.js
build.js
({
baseUrl: "../js", //找到j(luò)s目錄
paths: {
'jquery': './lib/jquery-3.2.1.min'
},
name: "app/main", //找到main.js
out: "./index.merge.min.js" //合并文件輸出到那
})
