2
\$\begingroup\$

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

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div class="container">
            <input type="button" id="button" value="world"/>
            <div id="message"></div>
        </div>

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.js" type="text/javascript"></script>        
        <script type="text/javascript" src="project.js"></script>
        <script type="text/javascript" src="utils.js"></script>
    </body>
</html>

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("<h2>" + GLOBAL.SETTINGS.MODEL.text + "<h2>");
            }
        },

        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 + "<br/>" );
            }
        },

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

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

GLOBAL.UTILS.init();
\$\endgroup\$
1
  • 1
    \$\begingroup\$ I dont know where to start. Why is everything global :S \$\endgroup\$
    – Raynos
    Commented Jul 26, 2011 at 19:55

2 Answers 2

2
\$\begingroup\$

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.

\$\endgroup\$
1
2
\$\begingroup\$

I'd highly recommend you to take a look at Spine.js. It is a tiny library developed by Alex McCaw.

To fully understand his approach (which is similar to the one of Backbone.js), you should also look at his book "Developing JavaScript Web Applications" where he highly emphasizes the usage of the MVC pattern.

An example app where Spine has been used can be found here: http://maccman-holla.heroku.com/

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.