Question

information

I am trying to build a site where I can include certain files and append to my global variable with different methods that will just add easily to the object. Meaning I only need to include the file and this page will now have access to everything in the hutber object.

core hutber.js

var hutber = {};

(function ($) {
    "use strict"; //For good development standards :)

    hutber.init = function(){

    };
    hutber.init();
})(jQuery);

extra bits hutber.form.js

(function ($) {
    "use strict"; //For good development standards :)

    hutber.form = {

    }

});

problem

I am aware that the hutber will not have access to hutber.form as it within a closure. So without taking these out of selfexecuting functions how can I get hutber to have access to hutber.form?
Or is this just the complete wrong way to approach this?

Answer 1

No it will have access to hutber.form since hutber is global, but the problem is timing.

If the init() runs before the hutber.form function is executed, it will not be there. The init can not run to all of the “add-ons” are loaded.

A side note: your second one will not run since it has no (jQuery);.

(function ($) {
    "use strict"; //For good development standards :)

    hutber.form = {

    }

});  <-- missing  (jQuery); so it is not going to do anything

Run a little demo to see what happens.

var myObj = {};

(function(){

    myObj.init = function(){
        alert("init");
        try{ //will fail since bar has not loaded yet
        myObj.bar();
        } catch(e){ alert("failed calling bar"); }
    };
    //call init before bar is loaded
    myObj.init();
})();


(function(){

    myObj.bar = function(){
        alert("bar");
    };
})();

//call init after bar has been loaded
myObj.init();

jsFiddle of above code

When you run this, you will see that the init will fail the first time it is called since bar is not loaded. The second time it will work since the method is added. So if the init depends on the loaded “modules” it needs to know when they are loaded in order to call the init method.