1蚯撩、為什么要使用模塊化?
a)解決命名沖突
b)增強(qiáng)代碼的閱讀以及維護(hù)性
c)便于依賴管理
d)提高代碼的復(fù)用率
2胎挎、CMD、AMD忆家、CommonJS 規(guī)范分別指什么犹菇?有哪些應(yīng)用
CMD規(guī)范(Common Module Definition):是sea.js在推廣過(guò)程中對(duì)模塊定義的規(guī)范化產(chǎn)出,主要用于瀏覽器端项栏。它主要特點(diǎn)是:對(duì)于依賴的模塊是延遲執(zhí)行蹬竖,依賴可以就近書寫沼沈,等到需要用這個(gè)依賴的時(shí)候再引入這個(gè)依賴,應(yīng)用有sea.js
//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;
exports.increment = function(val) {
return add(val, 1);
};
});
//program.js
define(function(require, exports, module) {
var inc = require('increment').increment;
var a = 1;
inc(a); // 2
module.id == "program";
});
AMD規(guī)范(Asynchronous Module Definition):是 RequireJS 在推廣過(guò)程中對(duì)模塊定義的規(guī)范化產(chǎn)出币厕,也是主要用于瀏覽器端列另。其特點(diǎn)是:依賴前置,需要在定義時(shí)就寫好需要的依賴页衙,提前執(zhí)行依賴阴绢,應(yīng)用有require.js
define(id?, dependencies?, factory)
id: 定義中模塊的名字店乐,可選呻袭;如果沒(méi)有提供該參數(shù),模塊的名字應(yīng)該默認(rèn)為模塊加載器請(qǐng)求的指定腳本的名字廉侧。。
依賴dependencies:是一個(gè)當(dāng)前模塊依賴的段誊,已被模塊定義的模塊標(biāo)識(shí)的數(shù)組字面量栈拖。 依賴參數(shù)是可選的,如果忽略此參數(shù)涩哟,它應(yīng)該默認(rèn)為["require", "exports", "module"]诗鸭。然而参滴,如果工廠方法的長(zhǎng)度屬性小于3,加載器會(huì)選擇以函數(shù)的長(zhǎng)度屬性指定的參數(shù)個(gè)數(shù)調(diào)用工廠方法砾赔。
工廠方法factory,模塊初始化要執(zhí)行的函數(shù)或?qū)ο蠹嗣ぁH绻麨楹瘮?shù)专普,它應(yīng)該只被執(zhí)行一次。如果是對(duì)象檀夹,此對(duì)象應(yīng)該為模塊的輸出值。
define('modal', ['jQuery', 'dialog'], function($, Dialog){
$('.modal').show();
Dialog.open();
});
CommonJS規(guī)范是在服務(wù)器端模塊的規(guī)范娜亿,是同步加載的蚌堵。應(yīng)用有node.js
在一個(gè)模塊中买决,存在一個(gè)自由的變量”require”吼畏,它是一個(gè)函數(shù)。這個(gè)”require”函數(shù)接收一個(gè)模塊標(biāo)識(shí)符躲舌∨悍颍“require”返回外部模塊所輸出的API枯冈。
在一個(gè)模塊中毅贮,會(huì)存在一個(gè)名為”exports”的自由變量尘奏,它是一個(gè)對(duì)象,模塊可以在執(zhí)行的時(shí)候把自身的API加入到其中瑰煎。模塊必須使用”exports”對(duì)象來(lái)做為輸出的唯一表示。
//math.js
exports.add = function() {
var sum = 0, i = 0, args = arguments, l = args.length;
while (i < l) {
sum += args[i++];
}
return sum;
};
//increment.js
var add = require('math').add;
exports.increment = function(val) {
return add(val, 1);
};
//program.js
var inc = require('increment').increment;
var a = 1;
inc(a);
// 2