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

Question

I am building an app with JavaScript and PHP on the backend. It is going to allow users to build plugins/modules to extend the app.

Based on a JavaScript structure like the object below var WebDevApp = {}

How could I make other Modules which inclkude there own JavaScript file into the page, be able to access there object in my core code below and also allow them to access this object in there code.

For example if a module named Bookmarks was loaded it would have a JS object like this...

var WebDevApp.Bookmarks = {

}  

And in my core code below I could call functions from above like this...

WebDevApp.Bookmarks.getJsonData();

Inside of a module JS code I should be able to call something from the core code like this...

WebDevApp.cache.varFromCoreJsObjectCalledFromModule

---

My core JS object code which I want modules to extend from...

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

I think you'd probably want to make sure that your core module is not tightly coupled to the other modules. You could do that by making sure that you register the other modules with the core (assumes a modules Array property exists):

WebDevApp.modules.push(WebDevApp.Bookmarks);

Then in the events and loadJSONData functions, you'd have logic like this:

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