Javascript Namespacing

Question

I wish to make my javascript more more modular by splitting it up into different files and giving each file a \'sub\' namespace like so.

subA.js

Answer 1

In you design, you won't have access to private vars/funcs define in that lambda function, because it only return a object, or you want to use new?

1.Without the (), ex is a function not the object the functions returns.

2.no need, except you want to pass some parameters for initialization. e.g.

ex.my = (function(name) {var my_name = name;})('bar');

3.I think you mean this private method.

ex = (function() {
    var foo = 'bar';
    return {
        show: function() {alert(foo);}
    }
})();

In the case above, only ex can access foo.

4.no need, $(document).ready() is called when everything is ready, if you already loaded ex.js, the initialization is done.

Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded

Answer 2

For Questions 1 and 3:

A closure style defenition in the ex.js will allow those public functions and vars/exposed.

My thought is, it is better to return "ex" from the anomyous function with the functions and vars we need to expose.

for Q3. Those ( private )variables defined and used in returned function is still avaialble to the function and can be used through the exposed function ( property of closure ).

If the external script include is in the section or at the top of the file, the ex should be available before document.ready and should be usable straight away.

You are making me think :) Will update the post as I dig further in to this. Very good Questions. :)

Answer 3

1. The function(){ return{}} is a closure to add "privacy" to the variables and functions you don't want to be accessible anywhere else but within the scope of that function. The parentheses around the function (function(){}) create a function expression. They are used, because the parser will complain when you try to execute a function immediately function(){}() without passing any argument to ().

2. If you want subA or any other extending object to have its own subfunctions, then yes, you have to declare it like that, but not neccesarly a clousure though.

You can do

ex.subA = function(x, y){
    return x+y;
}

which can be called var sum = ex.subA(2, 3);

Or you can do

ex.subA = (function(){

    return {
        add: function(x, y){
            return x+y;
        },
        multiply: function(x, y){
            return x*y;
        }
    }
})();

Then call it var sum = ex.subA.add(2, 3); var multiplication = ex.subA.multiply(2,3);

There are many ways to do this.

3. Yes, it is true. You can make the private functions public. The closure won't allow any other way to do it.

4. If you would like to alias, yes you can assign it to a variable. However, there is no need to. It will work fine the way you are describing it.

Read Essential JavaScript Namespacing Patterns to understand some fundamentals and patterns in javascript namespacing.

---

Is the first if statement in subA.js any different from var ex = ex || {}; Which is better?

First of, the if statement should be if(typeof ex == 'undefined'), the typeof returns a string. There isn't any need to check if ex is false.

Yes, it is different. The if statement will not do any variable assignment if the variable ex is already defined. Therefore, the if statement is better.

What js code style standards do you use?

Depends on the scope of the project, but mostly deep object extending with a helper function.