在講解CommonJS, AMD, CMD這些概念之前,我們先兩個了解下js的模組化。模組化,顧名思義,就是將專案依照功能或其他邏輯分解處理,每個部分只處理一個功能,進行功能的解耦處理,方便以後的開發與維護。那麼模塊化必須具有以下的能力,才能進行模塊的拆分和組裝:
定義封裝的模塊;
定義新模塊對其他模塊的依賴;
可對其他模塊的引入支持;
那麼就需要一套規範準則來定義這些能力,於是就出現了CommonJS, AMD, CMD等。
CommonJS原先叫做ServerJS
,是js在服務端的規範,node使用的就是這種規範。根據CommonJS規範,一個單獨的檔案就是一個模組,require
用來載入一個模組,exports
用來向外部暴露該模組裡的方法或屬性。
例如:
// hello.jsfunction say(username){ console.log( 'hello, '+username ); } exports.say = say;
=============
// main.jsvar person = require('./hello'); person.say('wenzi'); // hello, wenziperson.say('师少兵'); // hello, 师少兵person.say('NUC'); // hello, NUC
同時,require
語句可以寫在文件中的任何位置,只要使用先前引用之前即可,不一定要寫在文件的最前面。不過,為了程式碼更容易閱讀,能直觀地看到目前引用了哪些模組,最好是放在文件的最前面。
可能有人見過直接使用exports的,有的是使用module.exports的,這裡稍微的講解下這兩者的區別。
先舉個簡單的例子:
var a = {name:'wenzi'};var b = a;console.log(a); // {name: "wenzi"}console.log(b); // {name: "wenzi"}
a和b輸出的結果是一樣的。現在我改變下b中name的值:
b.name = 'shaobing';console.log(a); // {name: "shaobing"}console.log(b); // {name: "shaobing"}
a和b的輸出結果都改變了。我再重新聲明b:
var b = {name:'师少兵'};console.log(a); // {name: "shaobing"}console.log(b); // {name: "师少兵"}
這三個例子輸出了三種結果:
聲明a對象,並把a賦值給b,然後a和b輸出了相同的結果;
:
解釋
:
:對象,b 是對a 的引用,即a 和b 指向同一塊內存,所以1中的輸出是一樣的。當 b 作修改時,即 a 和 b 指向同一塊記憶體位址的內容發生了改變,a 也會體現出來,所以第2個範例輸出也是一樣。當 b 被覆蓋時,b 指向了一塊新的內存,a 還是指向原來的內存,所以最後輸出會不一樣。
和
module.exports require() 回傳的是module.exports 而不是exports
AMD規範中,預設推薦的模組格式是:
// hello.js// 将需要引入的模块全部写入到数组中,然后传递参数进行调用define(['a', 'b'], function(a, ,b){ // do something return{ hello : function(username){ console.log( 'hello, '+username ); } } })
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">// main.jsdefine([&#39;./hello&#39;], function(h){
h.hello(&#39;wenzi&#39;);
})</pre><div class="contentsignin">登入後複製</div></div>
也就是說,在AMD中,模組必須使用
define
// hello.jsdefine(function(require, exports, module){ var a = require('a'); // do a var b = require( 'b' ); // do b module.exports.hello = hello; // 对外输出hello})
從這裡也能看到AMD和CMD的區別:
AMD通常需要一次性引入全部的依賴,然後透過參數傳遞;而CMD則需要時才引入
不過,AMD也支持CMD這樣的引入格式,但內部還是依照AMD的邏輯執行。
這篇文章裡介紹了下CommonJS, AMD, CMD規範的相關區別與聯繫,這裡再簡要的總結下:
CommonJS: 每個文件就是一個模組,沒有define定義,node使用此規範;
AMD: 使用define定義一個模組,講究提前依賴;
CMD: 使用define定義模組,將就要開始正式進行node的學習了。