Question

I want to keep my scripts organized in one .js file for all my site (I have a mess right now), something like namespaces and classes in C#…

(function ($) {

    //private variables
    $.divref = $("#divReference");

    //Namespaces
    window.MySite = {};
    window.MySite.Home = {};
    window.MySite.Contact = {};

    //Public function / method
    window.MySite.Home.Init = function(params){
        alert("Init");

        MySite.Home.PrivateFunction();

        $.divref.click(function(){
            alert("click");
        });
    };

    //private function / method
    MySite.Home.PrivateFunction = function(){
        alert("Private");
    };

})(jQuery); 

Is this an idiomatic layout in jQuery and JScript?

Answer 1

This is more how I would implement the pattern you are trying to do:

// MySite.Home Extension
window.MySite = 
    (function ($, root) {

        //private variables
        var $divref = $("#divReference");

        //private function / method
        var privateFunction = function(){
            alert("Private");
        };        

        root.Home = {};

        // Public variable
        root.Home.prop = "Click"

        //Public function / method
        root.Home.Init = function(params){
            alert("Init");

            private();

            $divref.click(function(){
                alert(root.Home.prop);
            });
        };

        return root;

    })(jQuery, window.MySite || {} );   

// MySite.Contact Extension
window.MySite = 
    (function ($, root) {

        root.Contact = {};

        // More stuff for contact

        return root;

    })(jQuery, window.MySite || {} ); 

The first change is splitting each “namespace” into its own Module pattern, so private variables wont bleed from namespace to namespace (if you do intend them to be private to the namespace, which would be more C# esque). Second is rather than accessing window.MySite, pass in the object that you want to extend (in this case I’m calling it root). This will give you some flexibility.

Your private methods weren’t really private. To make a private method, you just want to make a function var that it bound in the closure, but not assigned to a property on the externally visible object. Lastly, you probably don’t want to use $.somegarbage. Like mentioned in a comment, you are adding a property to the $ object, which will still be there when the closure is done. If you wanted something close, I would just use $somegarbage which some people seem to like to do, but any variable name will work for private variables, just as long as the variable is bound in the closures scope (not somewhere else)

You are on the right track…