Javascript Code/Class Structure

I personally go for a different pattern with an emphasis of hiding information from global state, being event driven and loading files only as and when they are needed. In your head you place.

// this is the only DOM ready event
jQuery(function() {
    load("main.js");
});

function load(fileName, callback( obj ) ) is a function that loads a file and takes a callback returning the object the file defined as a parameter.

Here's your main.js

// main.js
(function($, Modernizr) {
    var app = {},
        modules = {};

    // executes all modules.
    var run = function() {
        $.each(modules, function(key, val) {
            // feature load determines whether we want to load the module.
            if (featureLoad(key)) {
                load(val, function(module) {
                    module(app).start();
                });
            }
        });
    };

    app.augment = function(json) {
        // ???
        $.implement(json, app);
    };

    app.listen = function(evt, fn) {
        $(this).bind(evt, fn);
    };

    app.unlisten = function(evt) {
        $(this).unbind(evt);
    };

    app.dispatch = function(evt, args) {
        $(this).trigger(evt, args);
    };

    $.getJSON("modules.x", function(json) {
        modules = json;
        app.run();
    });

})(jQuery, Modernizr);

function featureLoad(string) Is a function that takes a string to identify a "feature" and returns true/false depending on whether that feature is needed on this page. The main page gets a list of features/files from the server as json and then runs those modules.

A module might be :

// a module.js file

(function($, Modernizr) {
    load("modal.js", function(Modal) {
        define(function(app) {
            var start = function() {
                var modal = Modal();

                modal.$elem = $("foo");
                modal.show();
            };

            return {
                "start": start   
            };
        });  
    });
}(jQuery, Modernizr));

function define(obj) defines the object that file will return when loaded through load.

Notice how a module is a function that takes app as an argument. This way app get's passed by reference and does not need to be global. It also returns an object with a start method so it's not automatically started. This particular module loads "modal.js"

// Modal.js
// inherits from Overlay (which inherits from Base)
(function($, Modernizr) {

    load("overlay.js", function(Overlay) {
        function Modal(options) {
            var overlay = Overlay(options),
                overlayShow = overlay.show;

            $.extend(true, this, overlay);

            var init = function() {
                console.log("modal.init()");
                // unneccesary second call
                this.extend("$elem");
            };

            var show = function() {
                overlayShow.apply(this);    

                console.log("modal.show()");
                // unneccesary second call.
                this.$elem.show();
            };

            $.extend(true, this, {
                "init": init,
                "show": show   
            });

            if (this.cfg.autoInit) {
                this.init();
            }
        }

        define(function(options) {
            return new Modal(options);    
        });
    });

})(jQuery, Modernizr);

modal.js defines a function that takes options and returns a new Modal object with those options. The modal object itself loads overlay and extends it into itself.

Notice how there are no defaults here because the defaults are already defined in overlay.js and as the options are passed into overlay we don't need to do this twice.

// overlay.js
// inherits from Base
(function($, Modernizr) {
    var defaults = {
        $elem: null,
        $target: null,
        width: 100,
        height: 50,
        autoShow: true,
        autoCenter: true,
        autoInit: true
    };

    load("base.js", function(Base) {
        function Overlay(options) {
            var base = Base();
            this.cfg = $.extend(true, {}, defaults, options);

            var init = function() {
                console.log("overlay.init");
                this.extend("$elem");
            };

            var show = function() {
                console.log("overlay.show");
                this.$elem.show();
            };

            var hide = function() {
                console.log("overlay.hide");
                this.$elem.hide();
            };

            $.extend(true, this, {
                "init": init,
                "show": show,
                "hide": hide
            });

            $.extend(true, this, base);

            // set autoInit to false to manually initialize the class
            if (cfg.autoInit) {
                this.init();
            }
        }

        define(function(options) {
            return new Overlay(options);
        });
    });

})(jQuery, Modernizr);

overlay.js works in a similar way but loads and extends Base. Since overlay sets it's options and defaults you don't need to repeat that in modal.js

// base.js
// Base class used to derive ALL other classes
(function($, Modernizr) {
    function Base() {
        var extend = function() {
            var self = this;
            $.each(arguments, function(key, val) {
                if (self.cfg[val]) {
                    self[val] = self.cfg[val];
                }
            });
        };

        $.extend(true, this, {
            "extend": extend
        });
    }

    define(function() {
        return new Base();
    });

})(jQuery, Modernizr);

base itself is quite simple. I've removed some clutter functionality that didn't seem useful.

Now you need to define featureLoad yourself. Preferably in a "featureLoad.js" file that's loaded through load. Many libraries have definitions of load and define. I personally use requireJS. which renames load to require and has define itself. If you use requireJS the syntax changes a little :

(function($, Modernizr) {
    define("modal.js", function(Modal) {
        return function(app) {
            var start = function() {
                var modal = Modal();

                modal.$elem = $("foo");
                modal.show();
            };

            return {
                "start": start   
            };
        };
    });  
}(jQuery, Modernizr));

Now this kind of method is just a different route to take and to me personally it embraces javascript as a functional language in its structuring. Notice how apart from external libraries like require & jQuery nothing is written to global scope.

I would recommend you read through this and see if you can find anything that you would like to adjust your own setup with.

All the code

My initial goal was to do things the JS way. I've tinkered with (pseudo)classical inheritance to a certain extent, and I'm more in the camp of, why force JS to do something it wasn't meant to do?

So I wanted to use prototypal inheritance and because portability of the code is fairly important to me, I wanted a dynamic namespace. I also wanted private variables but I can rarely get everything I want.

I completely agree with you. I personally find that the prototype is over-rated or I just don't know how to use it. So I use closures everywhere to handle scope and I extend objects dynamically to have inheritance through object composition.

Here rather then a dynamic namespace you have a self contained set of code that modularly loads various sub modules based on feature dependence. The entire code is encapsulated in private state which is passed around by functions. You also get private variables.

I have yet to find a good place to include prototypical inheritance into this code-base. If you do find the sweet spot in terms of balance let me know. I find that prototypical inheritance and closure encapsulated state just don't mix.

Also notice with my setup your are driven to seperate each class into an individual file and a module of functionality into a file. Each module of functionality will load the classes it needs and bind to the DOM how it wishes.

There is also no inline JS in your page apart from your initial $(function() { load("main.js"); } which can be avoided by using data-main attribute together with requireJS and wrapping your code in "main.js" in a $(document).ready() statement.

Well one thing, overwriting the namespace each time is unnecessary:

window[AXS_NS] = (function (app, $, Modernizr) { // don't set
    /*...*/
    app.add.module('Modal', Modal); // this will add to the object reference
    return app; // dont return
})(window[AXS_NS] || {}, jQuery, Modernizr);

As far as the private variables go with prototype objects, I worked up a small example. I'm sure there are other ways to do this - maybe someone else has a better idea. This would have to be extended out to destroy the private variables manually when the class is destroyed. Another option also besides using a name is to use an array and the length property for the identifying factor or a custom generated private key.

Look at this example:

(function(){
    var privates = {},
        privateType = function(){ return {foo: '_foo'}; };

    window['Class'] = function Class(name){
        this.name = name;
        privates[this.name] = privateType();
    };

    Class.prototype = {
       getFoo: function(){
           console.log(this.name + ' get: ' + privates[this.name].foo);
       },
       setFoo: function(value){
           privates[this.name].foo = value;
           console.log(this.name + ' set: ' + privates[this.name].foo);
       }
    };
})();

var c1 = new Class('c1');
c1.getFoo();        // get private
c1.setFoo('_foo1'); // set private
c1.getFoo();