題目1： 為什么要使用模塊化？
使用模塊化可以：
- 解決命名沖突；
- 可進(jìn)行依賴管理；
- 增強(qiáng)代碼的可讀性；
- 代碼解耦，提高代碼的復(fù)用率；
題目2： CMD、AMD、CommonJS 規(guī)范分別指什么？有哪些應(yīng)用
-
CMD：
CMD 即Common Module Definition通用模塊定義，CMD規(guī)范是國(guó)內(nèi)發(fā)展出來(lái)的，就像AMD有個(gè)requireJS，CMD有個(gè)瀏覽器的實(shí)現(xiàn)SeaJS，SeaJS要解決的問(wèn)題和requireJS一樣，只不過(guò)在模塊定義方式和模塊加載（可以說(shuō)運(yùn)行、解析）時(shí)機(jī)上有所不同
語(yǔ)法
Sea.js 推崇一個(gè)模塊一個(gè)文件，遵循統(tǒng)一的寫(xiě)法
define
define(id?, deps?, factory)
因?yàn)镃MD推崇
- 一個(gè)文件一個(gè)模塊，所以經(jīng)常就用文件名作為模塊id
- CMD推崇依賴就近，所以一般不在define的參數(shù)中寫(xiě)依賴，在factory中寫(xiě)
factory有三個(gè)參數(shù)
function(require, exports, module)
require
require 是 factory 函數(shù)的第一個(gè)參數(shù)
require(id)
require 是一個(gè)方法，接受 模塊標(biāo)識(shí) 作為唯一參數(shù)，用來(lái)獲取其他模塊提供的接口
exports
exports 是一個(gè)對(duì)象，用來(lái)向外提供模塊接口
module
module 是一個(gè)對(duì)象，上面存儲(chǔ)了與當(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：
AMD 即Asynchronous Module Definition，中文名是異步模塊定義的意思。它是一個(gè)在瀏覽器端模塊化開(kāi)發(fā)的規(guī)范
由于不是JavaScript原生支持，使用AMD規(guī)范進(jìn)行頁(yè)面開(kāi)發(fā)需要用到對(duì)應(yīng)的庫(kù)函數(shù)，也就是大名鼎鼎RequireJS，實(shí)際上AMD 是 RequireJS 在推廣過(guò)程中對(duì)模塊定義的規(guī)范化的產(chǎn)出
requireJS主要解決兩個(gè)問(wèn)題
- 多個(gè)js文件可能有依賴關(guān)系，被依賴的文件需要早于依賴它的文件加載到瀏覽器
- js加載的時(shí)候?yàn)g覽器會(huì)停止頁(yè)面渲染，加載文件越多，頁(yè)面失去響應(yīng)時(shí)間越長(zhǎng)
看一個(gè)使用requireJS的例子
// 定義模塊 myModule.js
define(['dependency'], function(){
var name = 'Byron';
function printName(){
console.log(name);
}
return {
printName: printName
};
});
// 加載模塊
require(['myModule'], function (my){
my.printName(); });
語(yǔ)法
requireJS定義了一個(gè)函數(shù) define，它是全局變量，用來(lái)定義模塊
define(id?, dependencies?, factory);
id：可選參數(shù)，用來(lái)定義模塊的標(biāo)識(shí)，如果沒(méi)有提供該參數(shù)，腳本文件名（去掉拓展名）
dependencies：是一個(gè)當(dāng)前模塊依賴的模塊名稱(chēng)數(shù)組
factory：工廠方法，模塊初始化要執(zhí)行的函數(shù)或?qū)ο?。如果為函?shù)，它應(yīng)該只被執(zhí)行一次。如果是對(duì)象，此對(duì)象應(yīng)該為模塊的輸出值
在頁(yè)面上使用require函數(shù)加載模塊
require([dependencies], function(){});
require()函數(shù)接受兩個(gè)參數(shù)
- 第一個(gè)參數(shù)是一個(gè)數(shù)組，表示所依賴的模塊
- 第二個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)，當(dāng)前面指定的模塊都加載成功后，它將被調(diào)用。加載的模塊會(huì)以參數(shù)形式傳入該函數(shù)，從而在回調(diào)函數(shù)內(nèi)部就可以使用這些模塊
require()函數(shù)在加載依賴的函數(shù)的時(shí)候是異步加載的，這樣瀏覽器不會(huì)失去響應(yīng)，它指定的回調(diào)函數(shù)，只有前面的模塊都加載成功后，才會(huì)運(yùn)行，解決了依賴性的問(wèn)題。
-
CommonJS服務(wù)器端規(guī)范(node.js使用)
node.js 天然支持CommonJS規(guī)范
定義模塊: 根據(jù)CommonJS規(guī)范，一個(gè)單獨(dú)的文件就是一個(gè)模塊。每一個(gè)模塊都是一個(gè)單獨(dú)的作用域，也就是說(shuō)，在該模塊內(nèi)部定義的變量，無(wú)法被其他模塊讀取，除非定義為global對(duì)象的屬性
模塊輸出： 模塊只有一個(gè)出口，module.exports對(duì)象，我們需要把模塊希望輸出的內(nèi)容放入該對(duì)象
加載模塊： 加載模塊使用require方法，該方法讀取一個(gè)文件并執(zhí)行，返回文件內(nèi)部的module.exports對(duì)象
//在文件a.js中定義模塊
var people = {
name:'ruoyu',
sayName: function(){
console.log(this.name)
}
}
module.exports = people;
//在文件b.js中定義加載模塊，終端輸入node b.js運(yùn)行
var p = require('./a');
p.sayName();
console.log('hello')
require是同步的。即模塊系統(tǒng)需要同步讀取模塊文件內(nèi)容，并編譯執(zhí)行以得到模塊接口。這在服務(wù)器端實(shí)現(xiàn)很簡(jiǎn)單，在瀏覽器端，加載JavaScript最佳、最容易的方式是在document中插入script 標(biāo)簽。但腳本標(biāo)簽天生異步，傳統(tǒng)CommonJS模塊在瀏覽器環(huán)境中無(wú)法正常加載。
解決思路之一是，開(kāi)發(fā)一個(gè)服務(wù)器端組件，對(duì)模塊代碼作靜態(tài)分析，將模塊與它的依賴列表一起返回給瀏覽器端。但需要服務(wù)器安裝額外的組件，并因此要調(diào)整一系列底層架構(gòu)。
