CommonJS和AMD規範

CommonJS規範

項目最初是由Mozilla 的工程師 Kevin Dangoor 在2009年1月建立的，當時名爲ServerJS。2009年8月，這個項目更名爲 CommonJS，以顯示其API更普遍實用性。

項目是以瀏覽器環境以外構建 JavaScript 生態系統爲目標而產生的，它但願JavaScript能夠運行在任何地方而不單單是瀏覽器。好比在服務器和桌面環境中。

因此CommonJS API定義了不少(非瀏覽器)使用的API，力求提供一個相似Python，Ruby和Java標準庫。

CommonJS模塊使用

CommonJS規範是爲了解決 JavaScript 的做用域問題而定義的模塊形式，可使每一個模塊它自身的命名空間中執行。

CommonJS模塊規範主要分爲引用、定義、標識模塊三部分

module.exports = function( value ){
    return value * 2;
}

/**
 * 模塊引用
 *
 * 使用require()方法來引入一個模塊;
 * 這裏引入 模塊:moduleA，並複製給變量multiplyBy2;
 * 
 */

var multiplyBy2 = require('./moduleA');
var result = multiplyBy2(4);

/**
 * 模塊標識
 * 
 * 指傳給require()的參數 能夠是小駝峯命名的模塊名或是路徑
 *
 * require("模塊名"):當前目錄下的node_modules目錄中的模塊
 * require("路徑"):指定目錄的指定模塊
 *
 */ 

 
/**
 * 模塊定義
 * 
 * module對象:module對象指的模塊自身
 * export屬性：module對象的屬性，爲外部提供接口
 *
 */ 
 
module.exports = function( value ){
    return value * 2;
}

Node.js最初的模塊模式就是CommonJS(後面開始使用ECMAScript模塊)。

CommonJS模塊特色

• CommonJS是同步加載模塊，模塊加載的順序，按照其在代碼中出現的順序。

• 全部代碼都運行在模塊做用域，不會污染全局做用域。

• 模塊能夠屢次加載，可是隻會在第一次加載時運行一次，而後運行結果就被緩存了，之後再加載，就直接讀取緩存結果。要想讓模塊再次運行，必須清除緩存。

瀏覽器對commonJS支持

咱們在npm上下載的模塊都是JavaScript編寫的，可是因爲瀏覽器不支持CommonJS格式因此用不了。

咱們能夠將模塊轉換成符合CommonJS規範的格式。

瀏覽器不兼容CommonJS的根本緣由，在於缺乏四個Node.js環境的變量。module、exports、require、global

在Jquery中咱們能夠看到它對CommonJS的支持的實現：

Jquery:

( function( global, factory ) {

    "use strict";
    
    // 判斷環境中是否有`module`和`exports`變量 
    if ( typeof module === "object" && typeof module.exports === "object" ) {
        
        /**
          *  若是window.document存在，`module.exports = jQuery;`
          * 
          */            
        module.exports = global.document ?
            factory( global, true ) :
            function( w ) {
                if ( !w.document ) {
                    throw new Error( "jQuery requires a window with a document" );
                }
                return factory( w );
            };
    } else {
        factory( global );
    }

} )( typeof window !== "undefined" ? window : this, function( window, noGlobal ) {

//省略
}

能夠看出這是一個當即執行函數

• (function( global, factory ){...})(window,function(window, noGlobal){...})

• 若是環境中存在module和exports變量即module.exports = jQuery;加載jQUery;不然正常加載jQuery

AMD規範

AMD（異步模塊定義）是爲瀏覽器環境設計的，由於 CommonJS 模塊系統是同步加載的，當前瀏覽器環境尚未準備好同步加載模塊的條件。

AMD 定義了一套 JavaScript 模塊依賴異步加載標準，來解決同步加載的問題。

AMD使用

AMD模塊定義: 經過define函數定義在 閉包中

語法:

define(id?: String, dependencies?: String[], factory: Function|Object);

• id:模塊名(可選)

• dependencies:指定須要加載的依賴列表(若是沒有默認值爲["require", "exports", "module"])

• factory:模塊的具體實現，它是一個函數或是對象。

AMD模塊使用: 經過require函數來導入模塊

require(['myModule'], function(myModule) {});

JavaScript庫對AMD支持

在Jquery中咱們能夠看到它對AMD的支持的實現：

if ( typeof define === "function" && define.amd ) {
    define( "jquery", [], function() {
        return jQuery;
    } );
}