How can I access functions and variables from my JavaScript object inside of another module JS object?

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();
});

I'm sorry, what is your question? What are you trying to do that you are not able to do? — Evan Davis
– Evan Davis, Commented Jan 27, 2016 at 3:00

Travis Schettler · Accepted Answer · 2016-01-27 01:01:09Z

2

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();
});

answered Jan 27, 2016 at 1:01

Travis Schettler

8541 gold badge7 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I access functions and variables from my JavaScript object inside of another module JS object?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related