1. I would like to know what's the difference (advantages/disadvantages) between the following patterns.
2. How can I create sub modules based on the module pattern?

My goal is to have my js organized into multiple files that are lazy loaded but have one namespace.

For example:

SO.global (global.js) SO.global.registration (registration.js) <- load

var SO = function(){

    var CONSTANT = 'Z';

    function createX(){
      alert("create X");
    }

    function getY(){
       alert("get Y");
    }
    return{
      create:createX,
      get:getY
    }
}();

//SO.createX(); 
//SO.getY();

VS.

var SO = (function() {

    var CONSTANT = 'Z';

    function createX(){
      alert("create X");
    }

    function getY(){
       alert("get Y");
    }

    return {
      create:createX,
      get:getY
    }

} ());

1. I would like to know what's the difference (advantages/disadvantages) between the following patterns.
2. How can I create sub modules based on the module pattern?

My goal is to have my js organized into multiple files that are lazy loaded but have one namespace.

For example:

SO.global (global.js) SO.global.registration (registration.js) <- load

var SO = function(){

    var CONSTANT = 'Z';

    function createX(){
      alert("create X");
    }

    function getY(){
       alert("get Y");
    }
    return{
      create:createX,
      get:getY
    }
}();

//SO.createX(); 
//SO.getY();

VS.

var SO = (function() {

    var CONSTANT = 'Z';

    function createX(){
      alert("create X");
    }

    function getY(){
       alert("get Y");
    }

    return {
      create:createX,
      get:getY
    }

} ());

• javascript
• namespaces
• module-pattern

• 2 There is no difference between the two examples....one has parens around it but they should do the same thing. – rob Commented Nov 4, 2010 at 20:44
• The additional parens in the second example are being used by some folks to indicate that the function expression is called immediately. – Šime Vidas Commented Nov 4, 2010 at 21:05
• I think the parens are in the wrong place for that convention though. I believe it's usually written as (function(){...})() – Gopherkhan Commented Nov 5, 2010 at 17:53

2 Answers 2

Have you considered Require.JS? It attempts to provide the following solution:

• Some sort of #include/import/require
• ability to load nested dependencies
• ease of use for developer but then backed by an optimization tool that helps deployment

Require.JS implements the Module/Asynchronous Definition spec defined by Common.JS

Here's a good read: http://snook.ca/archives/javascript/no-love-for-module-pattern, and another: http://lamb/blog/category/javascript/

YUI uses it avidly, as do I, I haven't found any situations where I was restricted by it, and it nicely integrates with the YUI dependency loader for custom Modules.

(Sorry, I realise this isn't a plete answer, but there's some untampered info for you)