CommonJS& RequireJS&SeaJS三者概念的詳細介紹

當前端愈來愈發展的時候，傳統的開發已經不能知足於前端性能和工程化的要求，因此做爲一名高級的前端開發人員，必需要學習前端模塊化方面的知識；

下面主要談一下，common.js require.js&sea.js這三者的相關介紹；

common.js

commonjs是伴隨着Node.js一塊兒出現的，Node 應用由模塊組成，採用就是 CommonJS 模塊規範；

CommonJS API定義不少普通應用程序（主要指非瀏覽器的應用）使用的API，從而填補了這個空白。它的終極目標是提供一個相似Python，Ruby和Java標準庫。這樣的話，開發者可使用CommonJS API編寫應用程序，而後這些應用能夠運行在不一樣的JavaScript解釋器和不一樣的主機環境中。在兼容CommonJS的系統中，你能夠實用JavaScript程序開發：

服務器端JavaScript應用程序
命令行工具
圖形界面應用程序
混合應用程序（如，Titanium或Adobe AIR）

CommonJS定義的模塊分爲:{模塊引用(require)} {模塊定義(exports)} {模塊標識(module)}

 require()用來引入外部模塊；exports對象用於導出當前模塊的方法或變量，惟一的導出口；module對象就表明模塊自己。

AMD 與 RequireJS

AMD

    Asynchronous Module Definition，就是 異步模塊定義，全部的模塊將被異步加載，模塊加載不影響後面語句運行。全部依賴某些模塊的語句均放置在回調函數中。

 

    AMD規範定義了一個自由變量或者說是全局變量 define 的函數。

 

    define( id?, dependencies?, factory );    

    AMD規範   https://github.com/amdjs/amdjs-api/wiki/AMD

    第一個參數 id 爲字符串類型，表示了模塊標識，爲可選參數。若不存在則模塊標識應該默認定義爲在加載器中被請求腳本的標識。若是存在，那麼模塊標識必須爲頂層的或者一個絕對的標識。

    第二個參數，dependencies ，是一個當前模塊依賴的，已被模塊定義的模塊標識的數組字面量。

    第三個參數，factory，是一個須要進行實例化的函數或者一個對象。

 

    建立模塊標識爲 alpha 的模塊，依賴於 require， export，和標識爲 beta 的模塊  

define("alpha", [ "require", "exports", "beta" ], function( require, exports, beta ){
    export.verb = function(){
        return beta.verb();
        // or:
        return require("beta").verb();
    }
});

RequireJS

    官網  http://www.requirejs.org/

    API  http://www.requirejs.org/docs/api.html

 

    RequireJS 是一個前端的模塊化管理的工具庫，遵循AMD規範，它的做者就是AMD規範的創始人 James Burke。因此說RequireJS是對AMD規範的闡述一點也不爲過。

 

    RequireJS 的基本思想爲：經過一個函數來將全部所須要的或者說所依賴的模塊實現裝載進來，而後返回一個新的函數（模塊），咱們全部的關於新模塊的業務代碼都在這個函數內部操做，其內部也可無限制的使用已經加載進來的以來的模塊。

 

CMD 與 seaJS

CMD

    在CMD中，一個模塊就是一個文件，格式爲：

     define( factory );

 

    全局函數define，用來定義模塊。

    參數 factory  能夠是一個函數，也能夠爲對象或者字符串。

    當 factory 爲對象、字符串時，表示模塊的接口就是該對象、字符串。

seaJS

    官網  http://seajs.org/docs/

    API快速參考  https://github.com/seajs/seajs/issues/266

    sea.js 核心特徵：

        1. 遵循CMD規範，與NodeJS般的書寫模塊代碼。

        2. 依賴自動加載，配置清晰簡潔。

AMD 與 CMD 的區別？

 下面是玉伯對於 AMD 與 CMD 區別的解釋：

 

    AMD 是 RequireJS 在推廣過程當中對模塊定義的規範化產出。

    CMD 是 SeaJS 在推廣過程當中對模塊定義的規範化產出。

 

    相似的還有 CommonJS Modules/2.0 規範，是 BravoJS 在推廣過程當中對模塊定義的規範化產出還有很多??

 

 

    這些規範的目的都是爲了 JavaScript 的模塊化開發，特別是在瀏覽器端的。

    目前這些規範的實現都能達成瀏覽器端模塊化開發的目的。

 

 

    區別：

 

 

    1. 對於依賴的模塊，AMD 是提早執行，CMD 是延遲執行。不過 RequireJS 從 2.0 開始，也改爲能夠延遲執行（根據寫法不一樣，處理方式不一樣）。CMD 推崇 as lazy as possible.

 

    2. CMD 推崇依賴就近，AMD 推崇依賴前置。

    代碼以下：

// 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()
    // ...
})