CommonJS、AMD、CMD 和 ES6 Model 的區別

一、CommonJS

CommonJS 是一種同步的模塊化規範,所以主要用於服務器端,Node.js 採用的就是這個規範。

特點:

  • 對於基本數據類型,屬於複製。
  • 對於複雜數據類型,屬於淺拷貝。所以由於兩個模塊引用的對象指向同一個內存空間,因此對該模塊的值做修改時會影響另一個模塊。
  • 當使用 require 命令加載某個模塊時,就會運行整個模塊的代碼。
  • 當使用 require 命令加載同一個模塊時,不會再執行該模塊,而是會取緩存中的值。也就是說,CommonJS 模塊無論加載多少次,都只會在第一次加載時運行一次,以後再加載,就返回第一次運行的結果。

二、AMD

瀏覽器端的模塊化,不能採用“同步加載”,只能採用“異步加載”,否則瀏覽器有可能會處於“假死”狀態。這就是 AMD 規範誕生的背景。

AMD 也採用 require 語句加載模塊,但是不同於 CommonJS,它要求兩個參數:

第一個參數是一個數組,裏面的成員就是要加載的模塊;

第二個參數 callback,則是加載成功之後的回調函數,就是下邊這樣:

require(['math'], function (math) {
  math.add(2, 3)
})

特點:

  • AMD 採用異步的方式加載各模塊
  • 先引入模塊,後使用引用的模塊的方法,這種方式我們稱之爲依賴前置

三、CMD

CMD 也是一種瀏覽器端的模塊化規範

CMD 中所有模塊通過 define 定義,依賴通過 require 引入

define(function (requie, exports, module) {
  var a = require('./a')
  a.test()
  if (status) {
    var b = requie('./b')
    b.test()
  }
})

特點:

  • CMD 推崇依賴就近(即只有在用到某個模塊的時候再去 require —— 按需引入)

四、ES6 模塊

上面的 AMD,CMD,CommonJs 都是 ES5 時期的。

ES6 中無需引入別的 js 文件,ES6 在語言標準的層面上,實現了模塊功能,而且實現得相當簡單,完全可以取代 CommonJS 和 AMD 規範,成爲瀏覽器和服務器通用的模塊解決方案。

ES6 模塊的設計思想是儘量的靜態化,使得編譯時就能確定模塊的依賴關係,以及輸入和輸出的變量。CommonJS 和 AMD 模塊,都只能在運行時確定這些東西。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章