1、模塊化開(kāi)發(fā)

1.什么是模塊化開(kāi)發(fā)？

簡(jiǎn)單的說(shuō)模塊就是實(shí)現(xiàn)特定功能的一組方法。

模塊化開(kāi)發(fā)其實(shí)就是讓JavaScript文件可以互相引用，每個(gè)文檔代表一個(gè)模塊，提高代碼的使用頻率。

模塊化是一種將系統(tǒng)分離成獨(dú)立功能部分的方法，可將系統(tǒng)分割成獨(dú)立的功能部分，嚴(yán)格定義模塊接口、模塊間具有透明性。

2.模塊化開(kāi)發(fā)的優(yōu)缺點(diǎn)有哪些？

優(yōu)點(diǎn)：
1.便于多人協(xié)作開(kāi)發(fā)，每個(gè)部分開(kāi)發(fā)不會(huì)干擾其它地方
2.便于調(diào)試修改，因?yàn)槟K獨(dú)立，發(fā)現(xiàn)問(wèn)題比較容易，修改一處，也不影響別處，利于前端性能優(yōu)化
3.利于代碼復(fù)用，小塊的代碼可以更方便拿到別的項(xiàng)目中不加或者稍加修改使用，提高可維護(hù)性
4.便于功能的擴(kuò)充，因?yàn)檐浖鱾€(gè)部分是獨(dú)立的，不需要理解整個(gè)軟件就可以添加功能，特別適合二次開(kāi)發(fā)。
5.解決了部分惱人的命名沖突以及煩瑣的文件依賴

缺點(diǎn)：
1.系統(tǒng)分層，調(diào)用鏈會(huì)很長(zhǎng)
2.模塊間通信,模塊間發(fā)送消息會(huì)很耗性能

模塊化的意義在于最大化的設(shè)計(jì)重用，以最少的模塊、零部件，更快速的滿足更多的個(gè)性化需求。

3.常見(jiàn)的模塊化的寫(xiě)法有哪些

• 原始寫(xiě)法（封裝函數(shù)）

       function m1(){
   　　　　//...
   　　}
   　　function m2(){
   　　　　//...
   　　}
  

這種做法的缺點(diǎn)很明顯："污染"了全局變量，無(wú)法保證不與其他模塊發(fā)生變量名沖突，而且模塊成員之間看不出直接關(guān)系。

• 對(duì)象寫(xiě)法
  為了解決原始封裝函數(shù)的缺點(diǎn)，可以把模塊寫(xiě)成一個(gè)對(duì)象，所有的模塊成員都放到這個(gè)對(duì)象里面。

      var module1 = new Object({
  　　　　_count : 0,
  　　　　m1 : function (){
  　　　  　　　//...
  　　　　},
  　　　　m2 : function (){
  　　　  　　　//...
  　　　　}
  　　});
  

  方法都封裝在module1對(duì)象里。使用的時(shí)候，就是調(diào)用這個(gè)對(duì)象的屬性。例如：module1.m1();但是，這樣的寫(xiě)法會(huì)暴露所有模塊成員，內(nèi)部狀態(tài)可以被外部改寫(xiě)。比如module1._count = 5;，外部代碼可以直接改變內(nèi)部計(jì)數(shù)器的值。

• 立即執(zhí)行函數(shù)寫(xiě)法
  立即執(zhí)行函數(shù)可以達(dá)到不暴露私有成員的目的。

      var module1 = (function(){
  　　　　var _count = 0;
  　　　　var m1 = function(){
  　　　　　　//...
  　　　　};
  　　　　var m2 = function(){
  　　　　　　//...
  　　　　};
  　　　　return {
  　　　　　　m1 : m1,
  　　　　　　m2 : m2
  　　　　};
  　　})();
  

  外部代碼無(wú)法讀取內(nèi)部的_count變量。

2、模塊化規(guī)范

1.模塊的規(guī)范有哪些？

模塊的規(guī)范有CommonJS（nodeJS）,AMD(requireJS),CMD(sea.js)

原生JavaScript中并不支持模塊化開(kāi)發(fā)，所以出現(xiàn)了一些規(guī)范，就是所說(shuō)的AMD和CMD，這兩種方式適合使用桌面端，可以進(jìn)行異步加載，而在NodeJS中使用CommonJS是同步的，所以CommonJS并不適合桌面端。

2.CommonJS

NodeJS實(shí)現(xiàn)了JavaScript語(yǔ)言編寫(xiě)后臺(tái)，其中使用CommonJS規(guī)范實(shí)現(xiàn)了模塊化開(kāi)發(fā)

CommonJS定義的模塊分為:{模塊引用(require)} {模塊定義(exports)} {模塊標(biāo)識(shí)(module)}
require()用來(lái)引入外部模塊；exports對(duì)象用于導(dǎo)出當(dāng)前模塊的方法或變量，唯一的導(dǎo)出口；module對(duì)象就代表模塊本身。

3.AMD

AMD是"Asynchronous Module Definition"的縮寫(xiě)，意思就是"異步模塊定義"。它采用異步方式加載模塊，模塊的加載不影響它后面語(yǔ)句的運(yùn)行。所有依賴這個(gè)模塊的語(yǔ)句，都定義在一個(gè)回調(diào)函數(shù)中，等到加載完成之后，這個(gè)回調(diào)函數(shù)才會(huì)運(yùn)行。

AMD也采用require()語(yǔ)句加載模塊，但是不同于CommonJS，它要求兩個(gè)參數(shù)：
require([module], callback);
第一個(gè)參數(shù)[module]，是一個(gè)數(shù)組，里面的成員就是要加載的模塊；第二個(gè)參數(shù)callback，則是加載成功之后的回調(diào)函數(shù)。

異步加載，瀏覽器不會(huì)假死，所以AMD比較適合瀏覽器環(huán)境。

4.CMD

玉伯寫(xiě)了seajs，就是遵循他提出的CMD規(guī)范，與AMD蠻相近的，不過(guò)用起來(lái)感覺(jué)更加方便些，最重要的是中文版。
define(function(require,exports,module){...});

3、requireJs

1.require.js的誕生，就是為了解決這兩個(gè)問(wèn)題：

1.實(shí)現(xiàn)js文件的異步加載，避免網(wǎng)頁(yè)失去響應(yīng)；
2.管理模塊之間的依賴性，便于代碼的編寫(xiě)和維護(hù)。

2.requireJS的使用步驟

1.在要使用的主頁(yè)面引入requirejs文件
<script src="js/require.js" defer async="true" ></script>
defer async="true"可以解決可能造成網(wǎng)頁(yè)失去響應(yīng)的問(wèn)題。

async屬性表明這個(gè)文件需要異步加載，避免網(wǎng)頁(yè)失去響應(yīng)。IE不支持這個(gè)屬性，只支持defer，所以把defer也寫(xiě)上。

2.加載我們自己的代碼，假定我們自己的代碼文件是main.js，也放在js目錄下面。
<script src="js/require.js" data-main="js/main"></script>
data-main屬性的作用是，指定網(wǎng)頁(yè)程序的主模塊。

3.編寫(xiě)模塊的依賴

    　require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
　　　　// some code here
　　});

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)部就可以使用這些模塊。

4.模塊的加載
使用require.config()方法，我們可以對(duì)模塊的加載行為進(jìn)行自定義。require.config()就寫(xiě)在主模塊（main.js）的頭部。參數(shù)就是一個(gè)對(duì)象，這個(gè)對(duì)象的paths屬性指定各個(gè)模塊的加載路徑。

require.config({
        //規(guī)范的模塊
        paths: {
　　　　　　"underscore": "lib/underscore.min",
　　　　　　"backbone": "lib/backbone.min",
　　　　　　"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
　　　　},
　　　　//非規(guī)范的模塊
　　　　shim: {
　　　　　　'underscore':{
　　　　　　　　exports: '_'
　　　　　　},
　　　　　　'backbone': {
　　　　　　　　deps: ['underscore', 'jquery'],
　　　　　　　　exports: 'Backbone'
　　　　　　}
　　　　}
　　});

5.AMD模塊的定義
require.js加載的模塊，采用AMD規(guī)范。也就是說(shuō)，模塊必須按照AMD的規(guī)定來(lái)寫(xiě)。
具體來(lái)說(shuō)，就是模塊必須采用特定的define()函數(shù)來(lái)定義。如果一個(gè)模塊不依賴其他模塊，那么可以直接定義在define()函數(shù)之中。

    //定義模塊
    // math.js
    define(function (){
　　　　var add = function (x,y){
　　　　　　return x+y;
　　　　};
　　　　return {
　　　　　　add: add
　　　　};
　　});

    //加載模塊
    　require(['math'], function (math){
　　　　alert(math.add(1,1));
　　});