JavaScript Self-Executing Anonymous Modules

Question

Expanding on this answer I would like to know how to create new modules that belong to the same namespace (PROJECT).

A.init(); -- will become --> PROJECT.A.init();

Modules

(function( A, $, undefined ) {
    A.init = function() {
        console.log( "A init" );
    };   
}( window.A = window.A || {}, jQuery ));

(function( B, $, undefined ) {
    B.init = function() {
        console.log( "B init" );
    };   
}( window.B = window.B || {}, jQuery ));

A.init();
B.init();

http://jsfiddle.net/sKBNA/

Bergi · Accepted Answer · 2013-05-23T06:46:32.837

2

Just insert the additional namespace into the property chain:

// create top namespace
window.PROJECT = window.PROJECT || {};

// stays the same
(function( A, $, undefined ) {
    A.init = function() {
        console.log( "A init" );
    };
// except for the last line:
}( window.PROJECT.A = window.PROJECT.A || {}, jQuery ));

// same for the B (sub)namespace:
(function( B, $, undefined ) {
    …  
}( window.PROJECT.B = window.PROJECT.B || {}, jQuery ));

// and of course add it at the invocations:
PROJECT.A.init();
PROJECT.B.init();

edited May 23 '13 at 06:46

answered May 22 '13 at 22:15

Bergi

630,263
148
957
1,375

Great! Except the invocation should be PROJECT.A.init(); and PROJECT.B.init(); – howtodothis May 23 '13 at 01:40

score 1 · Answer 2 · edited May 23 '13 at 14:37

Just add an object to the global namespace, assign your object literals or functions to that namespace.

window.PROJECT = {};
(function($,window,undefined) {
    var A = {
        init : function() { ... }
    }
    window.PROJECT.A = A;
})(jQuery, window);
PROJECT.A.init();

Alternatively you could just return the values from the modules to the PROJECT object.

window.PROJECT = {};
PROJECT.A = (function($, window, undefined) {
    var A = {
        init : function() { ... }
    }
    return A;
})(jQuery,window);

Again, you could just return an object to a global variable.

var PROJECT = (function($, window, undefined) {
    var A = {
        init : function() { ... }
    }
    var B = {
        init : function() { ... }
    }
    return { A : A, B : B };
})(jQuery,window);

Additional based on previous answer mentioned by the OP, extending a global namespaced object. This is actually achieved already by the previous answer.

var PROJECT = (function(window, undefined) {
    // Private var
    var container,
    // Class constructor
    Example = function() {
    }
    Example.prototype = {
    },
    // Object literal
    A = { 
        init : function() {
            container = new Example();
        }
        // Expose or reflect other methods using private instance of Example
    }
    return { A : A };
})(window);

To extend PROJECT further do as the previous example demonstrated

(function(window, PROJECT, undefined) {
     // Private vars
     ...
     // Any other non exposed code
     ...
     PROJECT.B = {
         init : function() { ... }
     }
     // Make sure PROJECT is attached to window if it is empty object
     if (typeof window.PROJECT === 'undefined')
         window.PROJECT = PROJECT;
})(window, window.PROJECT || {});

JavaScript Self-Executing Anonymous Modules

2 Answers2