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();
