AMD，CMD,CommonJs,UMD講解

 

 

 

 

1、CommonJS

CommonJS規範加載模塊是同步的，只有加載完成，才能執行後面的操做

CommonJS規範中的module、exports和require

每一個文件就是一個模塊，有本身的做用域。每一個模塊內部，module變量表明當前模塊，是一個對象，它的exports屬性（即module.exports）是對外的接口

module.export屬性表示當前模塊對外輸出的接口，其餘文件加載該模塊，實際上就是讀取module.export變量。

爲了方便，node爲每一個模塊提供一個exports變量，指向module.exports。

let exports = module.exports；

require命令用於加載模塊文件

注意：若是一個模塊的對外接口就是一個單一的值，不能使用exports輸出，只能使用module.exports輸出。

 

CommonJS加載模塊是同步的，因此只有加載完成才能執行後面的操做。像Node.js主要用於服務器的編程，加載的模塊文件通常都已經存在本地硬盤，因此加載起來比較快，不用考慮異步加載的方式，因此CommonJS規範比較適用。但若是是瀏覽器環境，要從服務器加載模塊，這時就須要採用異步模式。因此就有了AMD和CMD解決方案。

 

2、AMD和CDM比較

區別：

a.對於依賴的模塊，AMD是提早執行（2.0後也能夠延遲執行），CMD是延遲執行

b.AMD推崇依賴前置，CMD推崇依賴就近

c.AMD推崇複用接口，CMD推崇單用接口

d.書寫規範的差別

//CMD
define(function(require, exports, module) {   
   let a = require('./a'); 
   a.doSomething();
   ···
   let b = require('./b'); // 依賴能夠就近書寫   
   b.doSomething();
   ... 
})

// AMD 默認推薦的是
define(['./a', './b'], function(a, b) { 
  // 依賴必須一開始就寫好    
  a.doSomething()   
  ...
  b.doSomething()   
  ...
}) 

 

比較模塊加載器SeaJS和RequireJS

SeaJS只會在真正須要使用(依賴)模塊時才執行該模塊，SeaJS是異步加載模塊的沒錯, 但執行模塊的順序也是嚴格按照模塊在代碼中出現(require)的順序, 這樣也許更符合邏輯。

RequireJS會先儘早地執行(依賴)模塊, 至關於全部的require都被提早了, 並且模塊執行的順序也不必定100%就是先mod1再mod2 。所以執行順序和你預想的徹底不同。

 

注意這裏說的是執行(真正運行define中的代碼)模塊, 而非加載(load文件)模塊。模塊的加載都是並行的, 沒有區別，區別在於執行模塊的時機，或者說是解析。

 

 3、UMD通用模塊規範

兼容了AMD和CommonJS，同時還支持老式的「全局」變量規範模塊規範主要進行模塊加載。

實現原理

1.先判斷是否支持Node.js模塊格式（exports是否存在），存在則使用Node.js模塊格式。
2.再判斷是否支持AMD（define是否存在），存在則使用AMD方式加載模塊。
3.前兩個都不存在，則將模塊公開到全局（window或global）。

 

jQuery實現判斷方式

// if the module has no dependencies, the above pattern can be simplified to 
(function (root, factory) {
     if (typeof define === 'function' && define.amd) { 
    // AMD. Register as an anonymous module. 
    define([], factory); 
　　} else if (typeof exports === 'object') { 
    // Node. Does not work with strict CommonJS, but
     // only CommonJS-like environments that support module.exports, 
    // like Node.
     module.exports = factory(); } else { 
      // Browser globals (root is window) 
        root.returnExports = factory(); 
       }
     }(this, function () { 
    // Just return a value to define the module export.
     // This example returns an object, but the module 
    // can return a function as the exported value. 
    return {}; }));