具有依賴關係的庫的Javascript模式

Question

有時我遇到了某些JavaScript庫中存在的特定模式。也許這是一個巧合，但我已經在依賴關係庫中看到它。語法如下（樣品從骨幹這對下劃線hard依賴拍攝）

(function(root, factory) { 
    if (typeof define === 'function' && define.amd) { 
     define(['underscore', 'jquery', 'exports'], function(_, $, exports) { 
      root.Backbone = factory(root, exports, _, $); 
     }); 
    } else if (typeof exports !== 'undefined') { 
     var _ = require('underscore'); 
     factory(root, exports, _); 
    } else { 
     root.Backbone = factory(root, {}, root._, (root.jQuery || root.Zepto || root.ender || root.$)); 
    } 

}(this, function(root, Backbone, _, $) 

有人能解釋爲什麼使用這種模式。我不太瞭解的部分是使用變量factory，爲什麼要測試屬性define.amd以及爲什麼導出在define(['underscore', 'jquery', 'exports']中作爲依賴加載。

我對AMD模塊很熟悉，但是看到這讓我想知道如果我正在寫一個帶有依賴關係的庫，是否應該使用相同的模式，或者即使我根本沒有依賴關係，也應該每次使用這種模式。

Answer 1

主旨

這就是所謂的universal module definition圖案。它有無數的變化。它的核心是JavaScript沒有內置模塊系統（直到ES6 modules被廣泛採用），並且有很多這樣的內容來彌補差距（例如，requirejs，yepnope,labjs）。所以UMD是爲了讓您的模塊在多種環境中支持模塊系統而設計的一種模式，因爲JavaScript幾乎在任何地方都被使用。

你的榜樣

在你的榜樣，你會支持腳本加載器，瞭解Asynchronous Module Definition，CommonJS模塊裝載機像NodeJS介紹以及純瀏覽器或其他環境中的一個不公開的模塊系統，定義是知道的：

(function(root, factory) { 
    if (typeof define === 'function' && define.amd) { 
     // This branch is to support AMD loaders 
     define(['underscore', 'jquery', 'exports'], function(_, $, exports) { 
      root.Backbone = factory(root, exports, _, $); 
     }); 
    } else if (typeof exports !== 'undefined') { 
     // This supports the CommonJS module system that NodeJS uses 
     var _ = require('underscore'); 
     factory(root, exports, _); 
    } else { 
     // Attaching your library root in an environment that has no 
     // module system or a system you don't support like a plain 
     // browser before ES6 modules become the standard 
     root.Backbone = /* ... */ 
    } 

}(this, function(root, Backbone, _, $) 

有了這個鍋爐板代碼，你可以一次寫你的模塊，並在同一時間它可以與不同的裝載機使用/在瀏覽器構建工具，在服務器上，其他地方你可能會找到一個JavaScript環境ronment。

我建議你閱讀JavaScript模塊/模塊系統以獲得更深入的瞭解。 Addy osmani's blog也是一個很好的開始。這個話題有幾十個資源。

希望這會有所幫助！快樂的編碼。