1、模塊化

• 為什么要使用模塊化
  Javascript在發(fā)展初期就是為了實(shí)現(xiàn)簡(jiǎn)單的頁(yè)面交互邏輯，故簡(jiǎn)單的引入幾個(gè)腳本即可滿足需求；如今CPU、瀏覽器性能得到了極大的提升，很多頁(yè)面邏輯遷移到了客戶端（表單驗(yàn)證等），隨著web2.0時(shí)代的到來(lái)，Ajax技術(shù)得到廣泛應(yīng)用，jQuery等各種前端庫(kù)層出不窮，前端代碼日益膨脹；
  這時(shí)候的JavaScript作為嵌入式腳本語(yǔ)言的定位動(dòng)搖了，JavaScript沒(méi)有為組織代碼提供任何明顯幫助，甚至沒(méi)有類 or package的概念，更不用說(shuō)模塊（module）了，JavaScript極其簡(jiǎn)單的代碼組織規(guī)范不足以駕馭如此龐大規(guī)模的代碼了。

• 模塊化的作用：
  主要目的：解決命名沖突、依賴管理
  其他目的：提高代碼可讀性、代碼解耦（提高復(fù)用性）

2、CMD、AMD、CommonJS 規(guī)范分別指什么？有哪些應(yīng)用?

**CommonJS : **
CommonJS主要是針對(duì)服務(wù)端的一個(gè)模塊化規(guī)范，是NodeJS中的規(guī)范標(biāo)準(zhǔn)

• 1、定義模塊 根據(jù)CommonJS規(guī)范，一個(gè)單獨(dú)的文件就是一個(gè)模塊。每一個(gè)模塊都是一個(gè)單獨(dú)的作用域，也就是說(shuō)，在該模塊內(nèi)部定義的變量，無(wú)法被其他模塊讀取，除非定義為global對(duì)象的屬性.
• 2、模塊輸出： 模塊只有一個(gè)出口，CommonJS規(guī)范中定義了一個(gè)module.exports對(duì)象，我們需要把模塊希望輸出的內(nèi)容放入該對(duì)象
• 3、加載模塊： 加載模塊使用require方法，該方法讀取一個(gè)文件并執(zhí)行，返回文件內(nèi)部的module.exports對(duì)象

demo 一個(gè)簡(jiǎn)單的例子

//模塊定義 myModel.js
var name = 'my'

function printName() {
  console.log(name)
}
function printFullName(firstName) {
  console.log(firstName + name)
}
//模塊輸出
modules.exports = {
  printName : printName,
  printFullName : printFullName
}


//加載模塊
var nameModule = require('myModel.js');
nameModule.printName();

AMD:
AMD(Asynchronous Module Definition),即異步模塊定義，這是一個(gè)在瀏覽器端模塊化開(kāi)發(fā)的規(guī)范

由于不是JavaScript原生支持，使用AMD規(guī)范進(jìn)行頁(yè)面開(kāi)發(fā)需要用到對(duì)應(yīng)的庫(kù)函數(shù)，也就是被廣泛運(yùn)用的RequireJS，實(shí)際上AMD 是 RequireJS 在推廣過(guò)程中對(duì)模塊定義的規(guī)范化的產(chǎn)出

RequireJS 主要解決了兩個(gè)問(wèn)題

• 1、多個(gè)js文件可能有依賴關(guān)系，被依賴的文件需要早于依賴它的文件加載到瀏覽器
• 2、js加載的時(shí)候?yàn)g覽器會(huì)停止頁(yè)面渲染，加載文件越多，頁(yè)面失去響應(yīng)時(shí)間越長(zhǎng)

demo:一個(gè)requireJS的例子

定義模塊myModule.js
define(['myModule'],function() {
  var name =  'my'
  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)

• 1、id：可選參數(shù)，用來(lái)定義模塊的標(biāo)識(shí)，如果沒(méi)有提供該參數(shù)，腳本文件名（去掉拓展名）
• 2、dependencies：是一個(gè)當(dāng)前模塊依賴的模塊名稱數(shù)組
• 3、factory：工廠方法，模塊初始化要執(zhí)行的函數(shù)或?qū)ο?。如果為函?shù)，它應(yīng)該只被執(zhí)行一次。如果是對(duì)象，此對(duì)象應(yīng)該為模塊的輸出值

加載模塊
require([dependencies], function(){});

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ǔ)法
定義模塊
define(id?, deps?, factory)

• 一個(gè)文件一個(gè)模塊，所以經(jīng)常就用文件名作為模塊id
• CMD推崇依賴就近，所以一般不在define的參數(shù)中寫依賴，在factory中有三個(gè)參數(shù)function(require, exports, module)
  1、require 是一個(gè)方法，接受 模塊標(biāo)識(shí) 作為唯一參數(shù)，用來(lái)獲取其他模塊提供的接口
  2、exports 是一個(gè)對(duì)象，用來(lái)向外提供模塊接口
  3、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){

});