JavaSript模塊規範 - AMD規範與CMD規範介紹 (轉載lovenyf.blog.chinaunix.net)

時間 2019-11-09

標籤 javasript 模塊規範 amd cmd 介紹轉載 lovenyf.blog.chinaunix.net lovenyf blog chinaunix 欄目 Java 简体版

原文原文鏈接

JavaSript模塊化

在瞭解AMD，CMD規範前，仍是須要先來簡單地瞭解下什麼是模塊化，模塊化開發？

模塊化是指在解決某一個複雜問題或者一系列的雜糅問題時，依照一種分類的思惟把問題進行系統性的分解以之處理。模塊化是一種處理複雜系統分解爲代碼結構更合理，可維護性更高的可管理的模塊的方式。能夠想象一個巨大的系統代碼，被整合優化分割成邏輯性很強的模塊時，對於軟件是一種何等意義的存在。對於軟件行業來講：解耦軟件系統的複雜性，使得無論多麼大的系統，也能夠將管理，開發，維護變得「有理可循」。

還有一些對於模塊化一些專業的定義爲：模塊化是軟件系統的屬性，這個系統被分解爲一組高內聚，低耦合的模塊。那麼在理想狀態下咱們只須要完成本身部分的核心業務邏輯代碼，其餘方面的依賴能夠經過直接加載被人已經寫好模塊進行使用便可。

首先，既然是模塊化設計，那麼做爲一個模塊化系統所必須的能力：

1. 定義封裝的模塊。

2. 定義新模塊對其餘模塊的依賴。

3. 可對其餘模塊的引入支持。

好了，思想有了，那麼總要有點什麼來創建一個模塊化的規範制度吧，否則各式各樣的模塊加載方式只會將局攪得更爲混亂。那麼在JavaScript中出現了一些非傳統模塊開發方式的規範 CommonJS的模塊規範，AMD（Asynchronous Module Definition），CMD（Common Module Definition）等。

AMD 與 RequireJS

AMD

Asynchronous Module Definition，用白話文講就是異步模塊定義，對於 JSer 來講，異步是再也熟悉不過的詞了，全部的模塊將被異步加載，模塊加載不影響後面語句運行。全部依賴某些模塊的語句均放置在回調函數中。

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

define( id?, dependencies?, factory ); javascript

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();
}
});

一個返回對象字面量的異步模塊

define(["alpha"], function( alpha ){
return {
verb : function(){
return alpha.verb() + 1 ;
}
}
});

無依賴模塊能夠直接使用對象字面量來定義

define( {
add : function( x, y ){
return x + y ;
}
} );

相似與 CommonJS 方式定義

define( function( require, exports, module){
var a = require('a'),
b = require('b');
exports.action = function(){};
} );

require(); css

require API 介紹 https://github.com/amdjs/amdjs-api/wiki/require

在 AMD 規範中的 require 函數與通常的 CommonJS中的 require 不一樣。因爲動態檢測依賴關係使加載異步，對於基於回調的 require 需求強烈。

局部與全局的requirehtml

局部的 require 須要在AMD模式中的 define 工廠函數中傳入 require。

define( ['require'], function( require ){
// ...
} );
or：
define( function( require, exports, module ){
// ...
} );

局部的 require 須要其餘特定的 API 來實現。

全局的 require 函數是惟一全局做用域下的變量，像 define同樣。全局的 require 並非規範要求的，可是若是實現全局的 require函數，那麼其須要具備與局部 require 函數同樣的如下的限定：

1. 模塊標識視爲絕對的，而不是相對的對應另外一個模塊標識。

2. 只有在異步狀況下，require的回調方式才被用來做爲交互操做使用。由於他不可能在同步的狀況下經過 require(String) 從頂層加載模塊。

依賴相關的API會開始模塊加載。若是須要有互操做的多個加載器，那麼全局的 reqiure 應該被加載頂層模塊來代替。

require(String)
define( function( require ){
var a = require('a'); // 加載模塊a
} );
require(Array, Function)
define( function( require ){
require( ['a', 'b'], function( a,b ){ // 加載模塊a b 使用
// 依賴 a b 模塊的運行代碼
} );
} );
require.toUrl( Url )
define( function( require ){
var temp = require.toUrl('./temp/a.html'); // 加載頁面
} );

amdjs 的API https://github.com/amdjs/amdjs-api/wiki

RequireJS

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

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

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

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

<script data-main='scripts/main' src='scripts/require.js'></script>

那麼scripts下的main.js則是指定的主代碼腳本文件，全部的依賴模塊代碼文件都將從該文件開始異步加載進入執行。

defined用於定義模塊，RequireJS要求每一個模塊均放在獨立的文件之中。按照是否有依賴其餘模塊的狀況分爲獨立模塊和非獨立模塊。

1. 獨立模塊，不依賴其餘模塊。直接定義：

define({
method1: function(){},
method2: function(){}
});

也等價於

define(function(){
return{
method1: function(){},
method2: function(){}
}
});

2. 非獨立模塊，對其餘模塊有依賴。

define([ 'module1', 'module2' ], function(m1, m2){
...
});

或者：

define( function( require ){
var m1 = require( 'module1' ),
m2 = require( 'module2' );
...
});

簡單看了一下RequireJS的實現方式，其 require 實現只不過是將 function 字符串而後提取 require 以後的模塊名，將其放入依賴關係之中。

require方法調用模塊

在require進行調用模塊時，其參數與define相似。

require( ['foo', 'bar'], function( foo, bar ){
foo.func();
bar.func();
} );

在加載 foo 與 bar 兩個模塊以後執行回調函數實現具體過程。

固然還能夠如以前的例子中的，在define定義模塊內部進行require調用模塊

define( function( require ){
var m1 = require( 'module1' ),
m2 = require( 'module2' );
...
});

define 和 require 這兩個定義模塊，調用模塊的方法合稱爲AMD模式，定義模塊清晰，不會污染全局變量，清楚的顯示依賴關係。AMD模式能夠用於瀏覽器環境而且容許非同步加載模塊，也能夠按需動態加載模塊。

CMD 與 seaJS

CMD

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

define( factory );

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

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

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

定義JSON數據模塊：

define({ "foo": "bar" });

經過字符串定義模板模塊：

define('this is {{data}}.');

factory 爲函數的時候，表示模塊的構造方法，執行構造方法即可以獲得模塊向外提供的接口。

define( function(require, exports, module) {
// 模塊代碼
});

define( id?, deps?, factory );

define也能夠接受兩個以上的參數，字符串id爲模塊標識，數組deps爲模塊依賴：

define( 'module', ['module1', 'module2'], function( require, exports, module ){
// 模塊代碼
} );

其與 AMD 規範用法不一樣。

require 是 factory 的第一個參數。

require( id );

接受模塊標識做爲惟一的參數，用來獲取其餘模塊提供的接口：

define(function( require, exports ){
var a = require('./a');
a.doSomething();
});

require.async( id, callback? );

require是同步往下執行的，須要的異步加載模塊可使用 require.async 來進行加載：

define( function(require, exports, module) {
require.async('.a', function(a){
a.doSomething();
});
});

require.resolve( id )

可使用模塊內部的路徑機制來返回模塊路徑，不會加載模塊。

exports 是 factory 的第二個參數，用來向外提供模塊接口。

define(function( require, exports ){
exports.foo = 'bar'; // 向外提供的屬性
exports.do = function(){}; // 向外提供的方法
});

固然也可使用 return 直接向外提供接口。

define(function( require, exports ){
return{
foo : 'bar', // 向外提供的屬性
do : function(){} // 向外提供的方法
}
});

也能夠簡化爲直接對象字面量的形式:

define({
foo : 'bar', // 向外提供的屬性
do : function(){} // 向外提供的方法
});

與nodeJS中同樣須要注意的是，一下方式是錯誤的：

define(function( require, exports ){
exports = {
foo : 'bar', // 向外提供的屬性
do : function(){} // 向外提供的方法
}
});

須要這麼作

define(function( require, exports, module ){
module.exports = {
foo : 'bar', // 向外提供的屬性
do : function(){} // 向外提供的方法
}
});

傳入的對象引用能夠添加屬性，一旦賦值一個新的對象，那麼值錢傳遞進來的對象引用就會失效了。開始之初，exports 是做爲 module.exports 的一個引用存在，一切行爲只有在這個引用上 factory 才得以正常運行，賦值新的對象後就會斷開引用，exports就只是一個新的對象引用，對於factory來講毫無心義，就會出錯。

module 是factory的第三個參數，爲一個對象，上面存儲了一些與當前模塊相關聯的屬性與方法。

module.id 爲模塊的惟一標識。

module.uri 根據模塊系統的路徑解析規則獲得模塊的絕對路徑。

module.dependencies 表示模塊的依賴。

module.exports 當前模塊對外提供的接口。

seaJS

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

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

sea.js 核心特徵：

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

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

兼容 Chrome 3+，Firefox 2+，Safari 3.2+，Opera 10+，IE 5.5+。

seajs.use

用來在頁面中加載一個或者多個模塊

// 加載一個模塊
seajs.use('./a');
// 加載模塊，加載完成時執行回調
seajs.use('./a'，function(a){
a.doSomething();
});
// 加載多個模塊執行回調
seajs.use(['./a','./b']，function(a , b){
a.doSomething();
b.doSomething();
});

其define 與 require 使用方式基本就是CMD規範中的示例。

AMD 與 CMD 區別到底在哪裏？

看了以上 AMD，requireJS 與 CMD， seaJS的簡單介紹會有點感受模糊，總感受較爲類似。由於像 requireJS 其並非只是純粹的AMD固有思想，其也是有CMD規範的思想，只不過是推薦 AMD規範方式而已， seaJS也是同樣。

下面是玉伯對於 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()
// ...
})

雖然 AMD 也支持 CMD 的寫法，同時還支持將 require 做爲依賴項傳遞，但 RequireJS 的做者默認是最喜歡上面的寫法，也是官方文檔裏默認的模塊定義寫法。

3. AMD 的 API 默認是一個當多個用，CMD 的 API 嚴格區分，推崇職責單一。好比 AMD 裏，require 分全局 require 和局部 require，都叫 require。CMD 裏，沒有全局 require，而是根據模塊系統的完備性，提供 seajs.use 來實現模塊系統的加載啓動。CMD 裏，每一個 API 都簡單純粹。

4. 還有一些細節差別，具體看這個規範的定義就好，就很少說了。

另外，SeaJS 和 RequireJS 的差別，能夠參考： https://github.com/seajs/seajs/issues/277