带有依赖的库的Javascript模式

Javascript pattern for library with dependencies

本文关键字：Javascript 模式 依赖      更新时间：2023-09-26

有时我在一些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模块，但看到这让我想知道如果我写一个依赖的库，我是否应该使用相同的模式，或者即使我根本没有依赖，也应该每次都使用这种模式。

要点

这被称为通用模块定义模式。它有无数的变化。它的核心是JavaScript没有内置模块系统(直到ES6模块被广泛采用)，并且有许多这样的模块来填补空白(例如requires, yepnope, labjs)。因此，由于JavaScript现在几乎到处都在使用，因此，UMD是为了让模块在多种环境中支持模块系统而设计的模式。<标题> 你的例子

在您的示例中，您将支持理解异步模块定义的脚本加载器，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的博客也是一个不错的起点。关于这个话题有很多资源。

希望这对你有帮助!快乐的编码。

相关文章：