JavaScript MVC - review and suggestions Before I start working on a quite JavaScript heavy application I would like you to review my JS MVC approach.


How can it be improved?
Are there any mistakes/issues I should be aware of?


Since the entire app will have multiple modules I would like to split the code into standalone modules that can be loaded as required (any suggestions how to do this?)

html

&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div class="container"&gt;
            &lt;input type="button" id="button" value="world"/&gt;
            &lt;div id="message"&gt;&lt;/div&gt;
        &lt;/div&gt;

        &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.js" type="text/javascript"&gt;&lt;/script&gt;        
        &lt;script type="text/javascript" src="project.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="utils.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;


project.js

var GLOBAL = {} || GLOBAL;

GLOBAL.SETTINGS = function($) {

    var global = {
        fontColor:"red"
    }

    return {
        MODEL : {
            text : "Text Inside The Containter"
        },

        VIEW : {
            container: $(".container")
        },

        CONTROLLER : {
            style : function() {
                GLOBAL.SETTINGS.VIEW.container.css("color",global.fontColor).append("&lt;h2&gt;" + GLOBAL.SETTINGS.MODEL.text + "&lt;h2&gt;");
            }
        },

        init : function() {
            GLOBAL.SETTINGS.CONTROLLER.style();
        }
    }
}(jQuery);

GLOBAL.SETTINGS.init();


utils.js

GLOBAL.UTILS = function($) {

var text = "SOMETHING"; //local

    return {
        MODEL : {
            text : "World"
        },

        VIEW : {
            button :   $("#button"),
            container: $("#message")
        },

        CONTROLLER : {
            hello : function(msg) {
                GLOBAL.UTILS.VIEW.container.append( "Hello " + GLOBAL.UTILS.MODEL.text + "&lt;br/&gt;" );
            }
        },

        EVENTS : function() {
            GLOBAL.UTILS.VIEW.button.click( function() {
                GLOBAL.UTILS.CONTROLLER.hello();
            });
        },

        init : function() {
            GLOBAL.UTILS.EVENTS();
        }
    }
}(jQuery);

GLOBAL.UTILS.init();
Since the entire app will have multiple modules I would like to split
  the code into standalone modules that can be loaded as required (any
  suggestions how to do this?)


Use a dynamic module loader such as requireJS. You can use it to load modules dynamically using AJAX, and it features an optimization tool to combine your scripts into a single file to reduce the number of HTTP requests on production server.


  How can it be improved?


Stick to shared conventions for the naming of variables. Do not use all-uppercase for regular variables, only when you wish to indicate a constant value.

Use a name specific to your appliation/website, organization or company instead of GLOBAL for the global variable referencing the root of your library, if any: it is no longer needed using Asynchronous Module Definition with requireJS.


  Are there any mistakes/issues I should be aware of?


You should think about the way you wish to handle the communication between modules. The latest trend is to abstract and decouple the communication using publish/subscribe pattern.

You can find more details in The Scalable JavaScript Application Architecture presentation by Nicholas C. Zakas, and you may be interested in the open-source framework that I developed based on this approach, which I presented recently in Paris JavaScript user group.