In developing Javascript Applications, the best thing you can do is rely on a framework such as SproutCore (that has recently reached version 1.0) or JavascriptMVC. However in some cases the Dojo toolkit or the jQuery library can satify most of your needs, expecially when you are relatively new to Javascript or just want to avoid the initial learning time associated to the use of a framework. But, as often happens in these situations, the lack of a framework, or at least of standardized and shared solutions, causes problems with maintainability, extensibility and complexity. This is particularly true for Mobile Widgets, which are relatively simple Javascript Applications which don’t need, at least in my experience, a framework on which rely on, but need to implement architectural patterns and design patterns.
My goal for this article is to show how to create the main structure of a MVC-based Javascript Application using pure Javascript in defining classes, and the jQuery library to access and manipulate the DOM.
Model
Let’s start with the implementation of a Model object. ListModel is a very simple class that implements a list of items, in which items can be added and deleted.
function ListModel
() {
this._items =
null;
}
ListModel.
prototype =
{
init :
function (items
) {
this._items = items;
},
getItems : function () {
return this._items;
},
addItem : function (item) {
this._items.push(item);
},
removeItemAt : function (index) {
this._items.splice(index, 1);
}
});
View
The View implements an action form which is included inside the finditems HTML div, consisting of an input text field and a button to apply the form. The init method bind the apply button to the method findItemsController’s apply method, for the click event. The show method cleans the screen and makes the view visible, the hide method makes the view not visible, and the getInputValue method returns the value that has been inserted in the input text field.
function FindItemsView
(){
this.
view =
"#finditems_div";
this.
inputTextfield =
"#finditems_input";
this.
applyButton =
"#finditems_apply";
}
FindItemsView.
prototype =
{
init :
function () {
$
(this.
applyButton).
click(findItemsController.
apply);
},
show : function () {
$(this.view).show();
},
hide : function () {
$(this.view).hide();
},
getInputValue : function () {
return $(this.input).val();
}
};
Controller
The FindItemsView class is tightly bound with the FindItemsControllerclass, which handles the input event from the user interface via direct calls, registered handlers or callbacks. In our example FindItemsController’s apply method is called when the apply button is pressed (this event has been register in the init method of the FindItemsView class), gets the value of the input field from the View, then performs an asyncronous call to a service: the response handler is FindItemsController itself, and three callback methods (success, error and timeout) are passed. If nothing goes wrong, the success callback is called and a new ListModel object is created and initialized with retrieved items. At this point the control is given to the ListItemsController, that has the responsibility to display the ListModel on a different View.
function FindItemsController
(){
}
FindItemsController.
prototype =
{
init :
function () {
},
apply : function () {
var input = findItemsView.getInput();
service.findItem(input, findItemsController, success, error, timeout);
},
success : function ( items ) {
listModel = new ListModel();
listModel.init(items);
listItemsController.display(listModel); /* give the control to ‘listItemsView’ */
},
error : function () {
alert("Error");
},
timeout : function () {
alert("Timeout");
}
};
Alright! This is the starting point to write a MVC-based Javascript Application using pure Javascript and jQuery library. Alex Netkachov in this article shows how to write a simple MVC-based JavaScript component with the support of the Dojo language utilities. Also want to point out this interesting video about JavascriptMVC: using a framework or a toolkit is rarely a bad idea.
Well, since in this period I am extensively developing Mobile Widgets (i.e. Javascript Application), I’m going to come back on the subject soon, showing how to implement widely used design patterns, such as Observer, Facade, Singleton and Factory.
Stay tuned !
