looking for review of code organization for jQuery/javascript code

Question

The first block of code is my main app.js that is included on every request. It is essentially a library of functions and objects that include related functions (ie: app.utils) that I can use on other pages like page1.js:

./app.js

var app = window.app || {};

(function($){
    app.req = app.req || {};
    app.utils = app.utils || {};
    app.utils.form = app.utils.form || {};
    app.page = app.page || {};
    app.log = function(msg){
        ( window.console && console.log(msg) );
    };
})(jQuery);

This is a page-level script that is included only on the one page:

./page1.js

(function($){
    $(function(){
        app.log('page1 stuff');
    });
}(jQuery);

I'm wondering what other methods are used for organizing larger codebases, or if there are any inheritly flawed ways using this method.

Answer 1

In JavaScript, there is no sure-fire way to organize framework code. As proof, just take a look at the different frameworks that reside on GitHub. You will see that every developer has his/her own way of organizing code.

Here's what I can recommend in your case:

I see that in your code, you seem to be namespacing your utility functions into deep structures. What I can suggest is to have a built-in function that extends your top app namespace instead of having to manually type in, check it that level exists and create. Have that extend function nest and check it for you.

Also, with extending, it would be great if the extended functions have some access to some inner objects as well

(function(app,$){

    //some stuff you want seen by extensions
    var extensionExtras = {
       cache : {}
    }

    //an extend function that checks, nests and creates namespaces
    function extend(nesting,fname,handler){
        //split nesting order
        //recursively check for the namespace
            //if it does not exist, create an object for it
            //else, go through it
        //attach function with name
        //overwriting is up to you
        deepNamespaceReference[fname] = function(){
            handler.call(this,extensionExtras);
        }
    }


    extend('app.from.inside.module','extendedInside',function(){
        //functionality here
    });

    //expose extend
    app.extend = extend;

})(window.app = window.app || {},jQuery);

//extend from the outside:
app.extend('app.some.deep.namespace','fromOutside',function(){
    //functionality here
});

//and then we can use:
app.from.inside.module.extendedInside();
app.some.deep.namespace.fromOutside();

However...

Namespacing technique in JavaScript actually uses objects and properties that contain objects. Deeply nested object structures in JavaScript incur a very minor performance drawback but a drawback still. I suggest you keep your namespace levels a minimum to avoid the performance penalties.