淺析JS中的模塊規范(CommonJS,AMD,CMD)


   如果你聽過js模塊化這個東西,那么你就應該聽過或CommonJS或AMD甚至是CMD這些規范咯,我也聽過,但之前也真的是聽聽而已。

   現在就看看吧,這些規范到底是啥東西,干嘛的。

 

一、CommonJS

 CommonJS就是為JS的表現來制定規范,因為js沒有模塊的功能所以CommonJS應運而生,它希望js可以在任何地方運行,不只是瀏覽器中。

 CommonJS能有一定的影響力,我覺得絕對離不開Node的人氣,不過喔,Node,CommonJS,瀏覽器甚至是W3C之間有什么關系呢,我找到了個貼切的圖:

 

  |---------------瀏覽器----- ------------------|        |--------------------------CommonJS----------------------------------|

  |  BOM  |       | DOM |        | ECMAScript |         | FS |           | TCP |         | Stream |        | Buffer |          |........|

  |-------W3C-----------|       |---------------------------------------Node--------------------------------------------------|

 

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

require()用來引入外部模塊;exports對象用於導出當前模塊的方法或變量,唯一的導出口;module對象就代表模塊本身。

 

比如說我們就可以這樣用了:

1 //sum.js
2 exports.sum = function(){...做加操作..};
3 
4 //calculate.js
5 var math = require('sum'); 6 exports.add = function(n){ 7 return math.sum(val,n); 8 };

 

雖說Node遵循CommonJS的規范,但是相比也是做了一些取舍,填了一些新東西的。

不過,說了CommonJS也說了Node,那么我覺得也得先了解下NPM了。NPM作為Node的包管理器,不是為了幫助Node解決依賴包的安裝問題嘛,那它肯定也要遵循CommonJS規范啦,它遵循包規范(還是理論)的。

CommonJS WIKI講了它的歷史,還介紹了modules和packages等。

 

二、AMD

CommonJS是主要為了JS在后端的表現制定的,他是不適合前端的,為什么這么說呢?

這需要分析一下瀏覽器端的js和服務器端js都主要做了哪些事,有什么不同了:

 

---------------------------------------服務器端JS   |    瀏覽器端JS-------------------------------------------

                                   相同的代碼需要多次執行  |    代碼需要從一個服務器端分發到多個客戶端執行

                                     CPU和內存資源是瓶頸   |    帶寬是瓶頸

                                        加載時從磁盤中加載   |    加載時需要通過網絡加載

---------------------------------------------------------------------------------------------------------------

 

於是乎,AMD(異步模塊定義)出現了,它就主要為前端JS的表現制定規范。

AMD就只有一個接口:define(id?,dependencies?,factory);

它要在聲明模塊的時候制定所有的依賴(dep),並且還要當做形參傳到factory中,像這樣:

 

1 define(['dep1','dep2'],function(dep1,dep2){...});

 

要是沒什么依賴,就定義簡單的模塊,下面這樣就可以啦:

 

1 define(function(){
2     var exports = {}; 3 exports.method = function(){...}; 4 return exports; 5 });

 

咦,這里有define,把東西包裝起來啦,那Node實現中怎么沒看到有define關鍵字呢,它也要把東西包裝起來呀,其實吧,只是Node隱式包裝了而已.....

RequireJS就是實現了AMD規范的呢。

這有AMD的WIKI中文版,講了很多蠻詳細的東西,用到的時候可以查看:AMD的WIKI中文版

 

三、CMD

大名遠揚的玉伯寫了seajs,就是遵循他提出的CMD規范,與AMD蠻相近的,不過用起來感覺更加方便些,最重要的是中文版,應有盡有:seajs官方doc

 

1 define(function(require,exports,module){...});

 

用過seajs吧,這個不陌生吧,對吧。

前面說AMD,說RequireJS實現了AMD,CMD看起來與AMD好像呀,那RequireJS與SeaJS像不像呢?

雖然CMD與AMD蠻像的,但區別還是挺明顯的,官方非官方都有闡述和理解,我覺得吧,說的都挺好:

官方闡述SeaJS與RequireJS異同

SeaJS與RequireJS的最大異同(這個說的也挺好)

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM