javascript - JS OOP - 多个文件中的结构

Question

我是 js oop 的新手，到目前为止有以下代码：

    (function (ns) {

        ns.addSection = function (name, def) {
            ns[name] = new def();
        }

    }(this.PG_GuiHelper = this.PG_GuiHelper || {}));


/**
 * HOVERTIP
 *
 * shows submenu on click / hover
 */
PG_GuiHelper.addSection('hovertip',function(){

    var section = this;

    /**
     * init
     */
    section.init = function() {
        section.registerListener();
    }

现在我有第二个文件，其中包含表单助手。也使用与此代码相同的 ns 闭包。两者都工作正常。

目标：

文件 ns.js

(function (ns) {

    ns.addSection = function (name, def) {
        ns[name] = new def();
    }

}(this.PG_Library = this.PG_Library || {}));

现在我的问题是：我如何向现有的悬停提示助手添加一个新的“部分”以至少获得此调用：PG_Library.guiHelper.hovertip.init();

现有的调用现在是：PG_GuiHelper.hovertip.init()。我希望你明白我的意思。1 ns 函数适用于所有文件。每个文件都可以有自己的小节。并且所有都由 PG_Library.section.subsection.function() 处理。

Answer 1

用这个：

window.PG_Library.guiHelper = window.PG_GuiHelper;

在您的情况下，您将PG_Libraryand添加PG_GuiHelper到window，因此这将起作用。

如果您想拥有一个全局（这是一个好主意:-)），您可以使用：

var PG = {};

PG.GuiHelper = {};

(function (ns) {

    ns.addSection = function (name, def) {
        ns[name] = new def();
    }

}(PG.GuiHelper));

/**
 * HOVERTIP
 *
 * shows submenu on click / hover
 */
PG.GuiHelper.addSection('hovertip', function() {

    var section = this;

    /**
     * init
     */
    section.init = function() {
        section.registerListener();
    }
});

并分别：PG.Library.guiHelper = PG.GuiHelper;

Answer 2

您可以简单地将现有PG_GuiHelper的部分作为新部分添加到您的PG_Library：

PG_Library.addSection("guiHelper", function() {
    return PG_GuiHelper;
});