具有依賴項的庫的Javascript模式

Question

有時，我遇到了一些JavaScript庫中存在的特定模式。 也許這是一個巧合，但是我已經在帶有依賴項的庫中看到了。 語法如下（該示例取自對下划線有嚴格依賴性的Backbone）

(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

要點

這稱為通用模塊定義模式。 它有無數種變化。 它的核心是JavaScript沒有內置模塊系統（直到ES6模塊被廣泛采用），並且其中有很多模塊可以填補空白（例如requirejs ， yepnope ， labjs ）。 因此，UMD是一種構想模式，旨在使您的模塊在多種環境中支持模塊系統，因為JavaScript現在幾乎已在所有地方使用。

你的例子

在您的示例中，您將支持了解異步模塊定義的腳本加載器， 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環境的其他任何地方的不同加載器/構建工具一起使用。

我建議您閱讀JavaScript模塊/模塊系統以獲得更深入的了解。 Addy osmani的博客也是一個不錯的起點。 關於該主題有數十種資源。

希望這可以幫助！ 快樂的編碼。