在多个文件中的JS OOP结构

JS OOP - structure in multiple files

本文关键字:JS OOP 结构 文件      更新时间:2023-09-26

我是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 || {}));

和现在我的问题:我怎么能添加一个新的"节"到我现有的hovertip帮助至少得到这个调用:PG_Library.guiHelper.hovertip.init();

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

使用

window.PG_Library.guiHelper = window.PG_GuiHelper;

在您的示例中,您将PG_LibraryPG_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;

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

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