gpt4 book ai didi

具有依赖项的库的 Javascript 模式

转载 作者:行者123 更新时间:2023-12-03 09:56:48 27 4
gpt4 key购买 nike

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

最佳答案

要点

这称为 universal module definition图案。它有无数的变化。其核心是 JavaScript 没有内置模块系统(直到 ES6 modules 被广泛采用),并且有许多模块系统可以填补这一空白(例如 requirejsyepnopelabjs )。因此,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 环境的其他任何地方与不同的加载器/构建工具一起使用。

我建议您阅读 JavaScript 模块/模块系统以获得更深入的了解。 Addy osmani's blog也是一个很好的起点。有关该主题的资源有数十种。

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

关于具有依赖项的库的 Javascript 模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30710358/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com