如何在javascript中与AMD一起使用命名空间对象？

2023年1月25日 272次阅读

为了使我的库更具可移植性,我一直在阅读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定义.工厂需要一个Twifty对象,但由于它不是模块,我无法将其添加为依赖项.我该怎么处理？

删除命名空间并不可行,因为这会破坏任何依赖它的代码.

如果这是一个微不足道的问题,请提前抱歉.

最佳答案 在AMD或CommonJS上下文中,模块不应将变量泄漏到全局空间中.

因此,必须使用策略才能拥有各种模块可以添加的公共对象(命名空间).

你可以有一个像这样的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;
}));

在不使用模块的环境中,脚本元素可以按任何顺序加载脚本,实际上不需要twifty.base. (因为工厂(root.Twifty || {}).)在AMD或CommonJS环境中,由于所有模块都依赖于twifty.base,并且由于AMD和CommonJS环境中的模块都是单例,因此所有模块都在扩展相同的JavaScript对象.

点赞