为了使我的库更具可移植性,我一直在阅读 AMD 和 CommonJS。我首先注意到的一件事是他们使用目录结构的方式,并且旨在每个文件有一个模块。据我所知,它们的“命名空间”与目录树一致。
但是,我自己的代码使用一个全局对象作为命名空间,然后在我的各种文件中,无论目录如何,我都向这个对象添加类。
(function (Twifty) {
// Add objects to the Twifty namespace
return Twifty;
}(Twifty || {}));
在升级工作中,我试图支持 AMD 和 CommonJs。有很多关于如何做到这一点的文章,但我无法理解 AMD define功能。下面是我如何转换上面的代码:
(function (root, factory) {
// Define the namespace if it doesn't exist
var Twifty = root.Twifty || {};
'use strict';
if (typeof define === 'function' && define.amd) {
// AMD is used - Register as an anonymous module.
define([], factory);
} else if (typeof exports === 'object') {
// CommonJS is used - Twifty is a namespace and doesn't need to be required
factory(Twifty);
} else {
// Neither AMD nor CommonJS used. Use global variables.
if (!document) {
throw 'twifty-map requires a DOM object';
}
root.Twifty = factory(Twifty);
}
}(this, function(Twifty) {
// Add objects to the Twifty namespace
return Twifty;
}));
问题出在 AMD define
上。工厂需要一个 Twifty
对象,但由于它不是模块,我无法将其添加为依赖项。我该如何处理?
删除命名空间并不可行,因为这会破坏依赖它的任何代码。
如果这是一个微不足道的问题,请提前致歉。
最佳答案
在 AMD 或 CommonJS 上下文中,您的模块不应将变量泄漏到全局空间中。
因此必须使用一个策略来拥有一个公共(public)对象(命名空间),各种模块可以添加到该公共(public)对象。
你可以有一个twifty.base
像这样的模块:
(function (root) {
'use strict';
if (typeof define === 'function' && define.amd) {
// AMD
define([], {});
}
else if (typeof module === "object" && module.exports) {
// CommonJS
module.exports = {};
}
else {
root.Twifty = root.Twifty || {};
}
}(this));
所有其他模块将取决于 twifty.base
:
(function (root, factory) {
'use strict';
if (typeof define === 'function' && define.amd) {
// AMD
define(['twifty.base'], factory);
}
else if (typeof module === "object" && module.exports) {
// CommonJS
module.exports = factory(require('twifty.base'));
}
else {
root.Twifty = factory(root.Twifty || {});
}
}(this, function(Twifty) {
Twifty.foo = 1;
Twifty.bar = function () {};
return Twifty;
}));
在不使用模块的环境中,script
元素可以按任何顺序加载脚本和 twifty.base
实际上不需要。 (因为 factory(root.Twifty || {})
。)在 AMD 或 CommonJS 环境中,因为所有模块都依赖于 twifty.base
。 ,并且由于 AMD 和 CommonJS 环境中的模块是单例,因此所有模块都扩展了相同的 JavaScript 对象。
关于javascript - namespace 对象如何在 JavaScript 中与 AMD 一起使用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39235019/