為什么要使用模塊化？
- 解決命名沖突
- 依賴管理
- 模塊的版本管理。通過別名等配置，配合構(gòu)建工具，可以比較輕松地實(shí)現(xiàn)模塊的版本管理。
- 提高代碼可維護(hù)性和可讀性
- 前端性能優(yōu)化
- 可以很方便實(shí)現(xiàn)模塊的跨服務(wù)器和瀏覽器共享
CMD、AMD、CommonJS 規(guī)范分別指什么？有哪些應(yīng)用
CommonJs
CommonJS是服務(wù)器端模塊的規(guī)范，Node.js采用了這個(gè)規(guī)范并首先采用了js模塊化的概念。
根據(jù)CommonJS規(guī)范，一個(gè)單獨(dú)的文件就是一個(gè)模塊。加載模塊使用require方法，該方法讀取一個(gè)文件并執(zhí)行，最后返回文件內(nèi)部的exports對(duì)象。
//add.js
exports.add = function(){...};
//calculate.js
var cc = require('add');
exports.add = function(n){
return cc.add(val,n);
};
然而CommonJS規(guī)范并不適用于瀏覽器端,由于瀏覽器端的瓶頸在于帶寬/網(wǎng)絡(luò),
如果客戶端同步加載一個(gè)個(gè)文件，然后執(zhí)行，那么就會(huì)出現(xiàn)假死情況
因此誕生了AMD，CMD，異步模塊加載機(jī)制
CMD（Common Module Definition）
CMD是SeaJS 在推廣過程中對(duì)模塊定義的規(guī)范化產(chǎn)出
與AMD的不同在于, AMD推崇依賴前置會(huì)在一開始加載好所有需要的模塊,而CMD則推崇依賴就近,當(dāng)需要時(shí)才加載
//math.js
define(function(require, exports, module) {
exports.add = function() {
var sum = 0, i = 0, args = arguments, l = args.length;
while (i < l) {
sum += args[i++];
}
return sum;
};
});
//increment.js
define(function(require, exports, module) {
var add = require('math').add; //需要用到math時(shí)加載模塊
exports.increment = function(val) {
return add(val, 1);
};
});
AMD (Asynchronous Module Definition, 異步模塊定義)
AMD屬于依賴前置，把項(xiàng)目中需要用到的依賴提前聲明，等獲取之后執(zhí)行callback
//創(chuàng)建文件check_amd.js, 定義模塊
define(['check'], function(){
var flag = true;
function check(){
return flag;
}
return {
check: check
};
});
//在需要用到的頁面加載模塊
require(['check_amd'], function (check){
if(check.check()){
console.log("哈哈哈");
}
});
使用 requirejs 完善入門任務(wù)15，包括如下功能：
- 首屏大圖為全屏輪播
- 有回到頂部功能
- 圖片區(qū)使用瀑布流布局（圖片高度不一），下部有加載更多按鈕，點(diǎn)擊加載更多會(huì)加載更多數(shù)據(jù)(數(shù)據(jù)在后端 mock)
- 使用 r.js 打包應(yīng)用
