namespacing javascript

Question

Is the following method wrong way of declaring namespace in Javascript? It is from the book I'm reading and doesn't seem to work in my code.

<script type="text/javascript">
var mynamespace = {};

if(Drupal.jsEnabled){       
    $(document).ready(mynamespace.init);    
}

mynamespace.init = function() {
    $("#mybutton").bind("click",function(){     
        alert('hello');
    });
}

</script>

Answer 1

What strikes me as odd, at least working mostly in C#, is that a namespace should not directly contain code logic. In C# it can't, that is what classes are for. So for me, having an init function on a namespace is a contradiction.

Answer 2

What seems to be going wrong here is that the mynamespace.init function isn't defined at the time you are hooking it up to $(document).ready.

This should work as expected:

<script type="text/javascript">
var mynamespace = {};

mynamespace.init = function() {
    $("#mybutton").bind("click",function(){     
        alert('hello');
    });
}

if(Drupal.jsEnabled){       
    $(document).ready(mynamespace.init);    
}

</script>

You may also consider forming it like this, as it is easier to understand (at least to me anyhow)

<script type="text/javascript">
var mynamespace = {
    init : function() {
        $("#mybutton").bind("click",function(){     
            alert('hello');
        })
};

if(Drupal.jsEnabled){       
    $(document).ready(mynamespace.init);    
}

</script>

Answer 3

It looks like your code is dependent on jQuery. Make sure that is loaded before you run this script. Also, define your function before it gets called. Try this:

var mynamespace = {};

mynamespace.init = function() {
    $("#mybutton").bind("click",function(){     
        alert('hello');
    });
}

if(Drupal.jsEnabled){       
    $(document).ready(mynamespace.init);    
}

Answer 4

Be careful using $(document).ready(mynamespace.init);. When executed in this way, this is no longer a reference to mynamespace, normally it would be equal to window, but jQuery do some call magic in the background to set it equal to document. It won't hurt you in this instance, but be wary of it in the future.

$(document).ready(function () {
    mynamespace.init();
});

Is how I would do it.

In this case, the reason your code isn't working is that the init method of mynamespace isn't defined at the document $(document).ready(mynamespace.init) is called.

Answer 5

Yes, you can use object as a namespace. Another way to form a namespace is to use closures:

(function(inner_variable_1, inner_variable_2) {

    // define whatever here, they won't pollute namespace outside this closure

})(outer_variable_1, outer_variable_2);

Popular example is jQuery's noconflict-mode, which enables you to use $ variable in your jQuery code without making $ a global variable, thus leaving the global $ for another use.