- 模塊化 -AMD-CMD規(guī)范
- requireJS實(shí)踐
- r.js打包工具使用
1超陆、為什么要使用模塊化？####
- 解決命名沖突
- 依賴(lài)管理
- 提高代碼可讀性
- 代碼解耦砖瞧，提高復(fù)用性
2屯蹦、CMD、AMD脐区、CommonJS 規(guī)范分別指什么愈诚？有哪些應(yīng)用？####
AMD：
AMD即 Asynchronous Module Definition牛隅，中文名為異步模塊定義炕柔。它是一個(gè)在瀏覽器端模塊化開(kāi)發(fā)的規(guī)范
使用AMD規(guī)范進(jìn)行開(kāi)發(fā)需要使用RequireJS
requireJS主要解決兩個(gè)問(wèn)題:
js文件之間的依賴(lài)關(guān)系：被依賴(lài)的文件需要早于依賴(lài)它的文件加載到瀏覽器
-
js加載的時(shí)候?yàn)g覽器會(huì)停止頁(yè)面渲染，加載文件越多媒佣，頁(yè)面失去響應(yīng)時(shí)間越長(zhǎng)
語(yǔ)法：define(id, dependences, factory);
// 定義模塊 myModule.js define(['dependency'], function(){ var name = 'Byron'; function printName(){ console.log(name); } return { printName: printName }; }); // 加載模塊 require(['myModule'], function (my){ my.printName(); }); CommonJS:
用于服務(wù)器端模塊化匕累。
定義模塊：一個(gè)單獨(dú)的文件就是一個(gè)模塊，每一個(gè)模塊都是一個(gè)單獨(dú)的作用域（在模塊內(nèi)部定義的變量默伍，無(wú)法被其他模塊讀取欢嘿，除非定義為global對(duì)象的屬性）
模塊輸出：模塊只有一個(gè)出口 module.exports 對(duì)象，需要將模塊希望輸出的內(nèi)容放在該對(duì)象中
加載模塊：加載模塊使用require方法也糊，該方法讀取一個(gè)文件并執(zhí)行炼蹦，返回文件內(nèi)部的 module.exports 對(duì)象
語(yǔ)法：
require(dependences) // 加載依賴(lài)模塊
exports.factory = function(){ // ...}; // 使用”exports”對(duì)象來(lái)做為輸出的唯一表示。
//模塊定義 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();
CMD：
CMD即 Common Module Definition狸剃，中文為通用模塊定義掐隐，它是一個(gè)在瀏覽器端模塊化開(kāi)發(fā)的規(guī)范。
和AMD不同的是捕捂，它并不是異步加載瑟枫，而是松散加載，只有當(dāng)需要加載模塊的時(shí)候指攒，再用require方法引用模塊慷妙。
使用CMD規(guī)范進(jìn)行開(kāi)發(fā)需要使用SeaJS
-
Sea.js推薦一個(gè)模塊一個(gè)文件
語(yǔ)法：define(factory); // 定義模塊 myModule.jsdefine(function(require, exports, module) {
var $ = require('jquery.js')
$('div').addClass('active');
});// 加載模塊
seajs.use(['myModule.js'], function(my){
doSomething
});
AMD和CMD
- 模塊定義時(shí)對(duì)依賴(lài)的處理不同：
- AMD推崇依賴(lài)前置，在定義模塊的時(shí)候就要聲明其依賴(lài)的模塊
- CMD推崇就近依賴(lài)允悦，只有在用到某個(gè)模塊的時(shí)候再去require
- 對(duì)依賴(lài)模塊的執(zhí)行時(shí)機(jī)處理不同（同第一點(diǎn)膝擂，換種表述方式）：
- AMD依賴(lài)前置虑啤，js可以方便知道依賴(lài)模塊是誰(shuí)，立即加載
- CMD就近依賴(lài)架馋，需要使用把模塊變?yōu)樽址馕鲆槐椴胖酪蕾?lài)了那些模塊
- AMD模塊的加載就是異步的
- SeaJS和RequireJS可以完成相同的功能
2狞山、使用 requirejs 完善入門(mén)任務(wù)15，包括如下功能：####
1. 首屏大圖為全屏輪播
2. 有回到頂部功能
3. 圖片區(qū)使用瀑布流布局（圖片高度不一）叉寂，下部有加載更多按鈕萍启，點(diǎn)擊加載更多會(huì)加載更多數(shù)據(jù)(數(shù)據(jù)在后端 mock)
4. 使用 r.js 打包應(yīng)用
參考資料：
Javascript模塊化編程(一)：模塊的寫(xiě)法
Javascript模塊化編程(二)：AMD規(guī)范
詳解JavaScript模塊化開(kāi)發(fā)
requirejs中文網(wǎng)
