Javascript 模块化命名空间模式答案

【问题标题】：Javascript modular namespace patternJavascript 模块化命名空间模式
【发布时间】：2014-02-12 20:24:10
【问题描述】：

我正在尝试使用模块化命名空间模式，它允许我扩展各种命名空间中可用的功能并在多个文件中定义它们。这是我正在使用的模式；

var Namespace = Namespace || {};

Namespace.SubSpace = (function () {
    var subspace = {};

    subspace.Func = function () {
        return "My Function";
    };

    return subspace;
})();

如何让我的命名空间函数在定义之前可用？换句话说，我如何调用Namespace.SubSpace.Func()而不依赖已经解析的函数声明？

【问题讨论】：

你不能。你为什么需要那个？
您是否知道在您的示例中，您正在立即执行该函数并且 Namespace.SubSpace.Func 实际上是未定义的？
@Bergi 我想将随附的脚本捆绑为 WebForms 组件库的一部分，因此无法保证库 javascript 将在用户脚本之前包含在内。这个问题的灵感来自微软的方法Sys.WebForms
从未听说过“模块化命名空间”模式。可以加个参考吗？
@RedTaz：只要用户脚本在包含之前不使用您的库，那没问题。如果他们尝试，您将无能为力 - 您将需要找到一种方法来保证将其包含在他们之前（询问更具体的问题）。

标签： javascript javascript-namespaces

【解决方案1】：

我可以通过使用类似于 JQuery 的ready() 函数的方法来解决我的问题。但是，它确实依赖于先定义根名称空间。根命名空间还包括允许注册回调的功能。

var Namespace = (function () {

    var namespace = {};
    namespace.ReadyCallbacks = [];

    namespace.Ready = function (callback, queueJump) {
        if (queueJump)
            namespace.ReadyCallbacks.unshift(callback);
        else
            namespace.ReadyCallbacks.push(callback);
    };

    namespace.Begin = function () {
        for (x = 0; x < namespace.ReadyCallbacks.length; x++) {
            namespace.ReadyCallbacks[x]();
        }
    };

    return namespace;
})();

重要的是，这区分了应该在其他回调之前运行的回调。这允许框架模块在执行用户脚本之前定义子命名空间和函数。（即使首先加载了用户脚本）。

用户脚本

Namespace.Ready(function () {
    console.log(Namespace.SubSpace.Func()); // prints "Module 1"
});

框架模块

Namespace.Ready(function () {
    Namespace.SubSpace = (function () {
        var subspace = {};

        subspace.Func = function () {
            return "Module 1";
        };

        return subspace;
    })();
}, true);

最后，调用Namespace.Begin() 会以正确的顺序执行所有操作。另外，由于我使用的是 JQuery，所以我可以将其包装在 $(document).ready() 中。

我不是很精通 javascript，所以我不确定这种方法有多“正确”，我欢迎 cmets 和建议。

【讨论】：