前端模塊化

前端模塊規範有三種：CommonJs,AMD和CMD。
CommonJs用在服務器端，AMD和CMD用在瀏覽器環境
AMD 是 RequireJS 在推廣過程當中對模塊定義的規範化產出。
CMD 是 SeaJS 在推廣過程當中對模塊定義的規範化產出。
AMD:提早執行（異步加載：依賴先執行）+延遲執行
CMD:延遲執行（運行到需加載，根據順序執行）

一.模塊

之前使用JS的方式要更改,之前只能說是JS的最初級應用,如今對JS應該使用模塊化寫法.

好處:

模塊就是實現特定功能的文件，把幾個函數放在一個文件裏就構成了一個模塊。須要的時候加載這個文件，調用其中的函數便可。
但這樣作會污染全局變量，沒法保證不與其餘模塊發生變量名衝突，並且模塊成員之間沒什麼關係。

簡單的例子:

var module = (function(){
　　　　var star = 0;
　　　　var f1 = function (){
　　　　　　alert('ok');
　　　　};
　　　　var f2 = function (){
　　　　　　//...
　　　　};
       return {
          f1:f1,
          f2:f2
       };
　　})();
    module.f1();  //ok
    alert(module.star)  //undefined   由於start並無return出來

二.CommonJs

CommonJS是服務器端模塊的規範，由Node推廣使用。因爲服務端編程的複雜性，若是沒有模塊很難與操做系統及其餘應用程序互動。

 

根據CommonJS規範:

• 一個單獨的文件就是一個模塊。每個模塊都是一個單獨的做用域，也就是說，在該模塊內部定義的變量，沒法被其餘模塊讀取，除非定義爲global對象的屬性。

• 輸出模塊變量的最好方法是使用module.exports對象。

• 加載模塊使用require方法，該方法讀取一個文件並執行，返回文件內部的module.exports對象

用一套標準模板來封裝模塊定義：

define(function(require, exports, module) {

  // The module code goes here

});

這套模板代碼爲模塊加載器提供了機會，使其能在模塊代碼執行以前，對模塊代碼進行靜態分析，並動態生成依賴列表。

math.js
define(function(require, exports, module) {
  exports.add = function() {
    var sum = 0, i = 0, args = arguments, l = args.length;    //arguments表明入參.與Array類型相似.arguments[0],arguments[1]
    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);
  };
});

index.js
define(function(require, exports, module) {
  var inc = require('increment').increment;
  inc(1); // 2
});

 

三.AMD

它採用異步方式加載模塊，模塊的加載不影響它後面語句的運行。全部依賴這個模塊的語句，都定義在一個回調函數中，等到加載完成以後，這個回調函數纔會運行。

1.RequireJS主要解決兩個問題

• 多個js文件可能有依賴關係，被依賴的文件須要早於依賴它的文件加載到瀏覽器
• js加載的時候瀏覽器會中止頁面渲染，加載文件越多，頁面失去響應時間越長

2.RequireJS API 存在於RequireJS載入時建立的命名空間requirejs下。

其主要API主要是下面三個函數:

• define– 該函數用戶建立模塊。每一個模塊擁有一個惟一的模塊ID，它被用於RequireJS的運行時函數，define函數是一個全局函數，不須要使用requirejs命名空間.
• require– 該函數用於讀取依賴。一樣它是一個全局函數，不須要使用requirejs命名空間.
• config– 該函數用於配置RequireJS.

3.配置函數

若是你想改變RequireJS的默認配置來使用本身的配置，你可使用require.configh函數。config函數須要傳入一個可選參數對象，這個可選參數對象包括了許多的配置參數選項。下面是一些你可使用的配置：

• baseUrl——用於加載模塊的根路徑。
• paths——用於映射不存在根路徑下面的模塊路徑。
• shims——配置在腳本/模塊外面並無使用RequireJS的函數依賴而且初始化函數。假設underscore並無使用  RequireJS定義，可是你仍是想經過RequireJS來使用它，那麼你就須要在配置中把它定義爲一個shim。
• deps——加載依賴關係數組

      具體參見下一篇博客,有關Requre.js.

 

四.CMD

CMD 即Common Module Definition通用模塊定義，CMD規範是國內發展出來的，就像AMD有個requireJS，CMD有個瀏覽器的實現SeaJS，SeaJS要解決的問題和requireJS同樣，只不過在模塊定義方式和模塊加載（能夠說運行、解析）時機上有所不一樣。

在 CMD 規範中，一個模塊就是一個文件。代碼的書寫格式以下:

define(function(require, exports, module) {

  // 模塊代碼

});

 

require是能夠把其餘模塊導入進來的一個參數;而exports是能夠把模塊內的一些屬性和方法導出的;module 是一個對象，上面存儲了與當前模塊相關聯的一些屬性和方法。

差別:

AMD是依賴關係前置,在定義模塊的時候就要聲明其依賴的模塊;
CMD是按需加載依賴就近,只有在用到某個模塊的時候再去require：

// CMD
define(function(require, exports, module) {
  var a = require('./a')
  a.doSomething()
  // 此處略去 100 行
  var b = require('./b') // 依賴能夠就近書寫
  b.doSomething()
  // ... 
})

// AMD 默認推薦的是
define(['./a', './b'], function(a, b) { // 依賴必須一開始就寫好
  a.doSomething()
  // 此處略去 100 行
  b.doSomething()
  ...
})

主要是Sea.js的使用.