javascript - 如何从另一个模块 JS 对象内部的 JavaScript 对象访问函数和变量？

Question

我正在后端使用 JavaScript 和 PHP 构建一个应用程序。它将允许用户构建插件/模块来扩展应用程序。

基于 JavaScript 结构，如下面的对象 var WebDevApp = {}

我怎样才能使其他模块在页面中包含自己的 JavaScript 文件，能够访问下面我的核心代码中的对象，并允许它们访问代码中的该对象。

例如，如果加载了一个名为 Bookmarks 的模块，它将有一个像这样的 JS 对象...

var WebDevApp.Bookmarks = {

}  

在下面的核心代码中，我可以像这样从上面调用函数...

WebDevApp.Bookmarks.getJsonData();

在模块 JS 代码内部，我应该能够从核心代码中调用某些内容，如下所示...

WebDevApp.cache.varFromCoreJsObjectCalledFromModule

<小时/>

我的核心 JS 对象代码，我希望模块从中扩展...

var WebDevApp = {

    modulesJson: '',

    cache: {
        templates: {},
    },

    init: function() {

    },

    events: function() {

        // all the dom devents from other JS files ................
        WebDevApp.Bookmarks.domEvents();

        WebDevApp.OtherModuleName.domEvents();
    },


    loadJSONData: function() {
        // load JSON Data from the other Module JS files
        WebDevApp.Bookmarks.loadJSONData();

        WebDevApp.OtherModuleName.loadJSONData();
    },
}


// run app
jQuery(document).ready(function($) {
    WebDevApp.init();
});

Answer 1

我认为您可能希望确保您的核心模块没有与其他模块紧密耦合。您可以通过确保向核心注册其他模块来做到这一点(假设存在模块数组属性):

WebDevApp.modules.push(WebDevApp.Bookmarks);

然后在事件和 loadJSONData 函数中，您将拥有如下逻辑:

WebDevApp.modules.forEach(function(mod){
    mod.domEvents();
});