I’ve been digging into javascript more and more to provide a better client side user experience in my asp.net mvc applications. To help facilitate this, I have some Html.Helper objects that accept javascript functions.
A confusing part of javascript to someone that is a novice is that javascript functions act like, ie. C# functions. However, javascript functions are ‘objects’
Some of my initial code then is just pure functions, ie.
function billRateError(XMLHttpRequest, textStatus, errorThrown) {
var errMsg = "<P>Error Loading: " + XMLHttpRequest.responseText + "<br/>";
$("#addStatus").html(errMsg).show();
}
function billRateSubmitting(formData, jqForm, options) {
var loading = "<img src=’" + BuildUrl("Content/Images/spinner.gif") + "’>";
$("#addStatus").html(loading).show("slow");
}
function billRateResponse(response, statusText) {
$("#addStatus").html("").show();
$("#billRatesDiv").html(response).show();
}
Basically I’d have a page ‘BillRate.ascx’ with a corresponding javascript file ‘BillRate.js’ – sorta like a ‘code-behind’.
Within my page I have my helper helper, ie.
<% Html.jQueryAjaxOptions("addBillRateForm", AjaxDataType.html, new Hash(
target => "’#billRatesDiv’", beforeSubmit => "billRateSubmitting",
success => "billRateResponse", Error => "billRateError")); %>
(This helper wraps up my jQuery ajax calls)
My next line of thinking though is – ‘let’s move this to a ‘page object’ that handles all the javascript used on that page that is unique to the page.
To do this I use the following javascript OO syntax:
var billRateObj = {
"target" : "’#billRatesDiv’",
OnRequest : function(formData, jqForm, options) {
var loading = "<img src=’" + BuildUrl("Content/Images/spinner.gif") + "’>";
$("#addStatus").html(loading).show("slow");
},
OnResponse : function(response, statusText) {
$("#addStatus").html("").show();
$("#billRatesDiv").html(response).show();
},
OnError: function(XMLHttpRequest, textStatus, errorThrown) {
var errMsg = "<P>Error Loading: " + XMLHttpRequest.responseText + "<br/>";
$("#addStatus").html(errMsg).show();
}
};
And then I update my Helper:
<% Html.jQueryAjaxOptions("addBillRateForm", AjaxDataType.html, new Hash(
target => "billRateObj.target", beforeSubmit => "billRateObj.OnRequest",
success => "billRateObj.OnResponse", Error => "billRateObj.OnError")); %>
I really like this better – it’s all encapsulated.
I’d like to know – is this approach a good approach ? So far I’ve seen a bit of both. I also have seen some articles where the programmer doesn’t put the method inside the object. Maybe it’s my C# background, but I like that encapsulation that it provides.
Let me create some very small examples:
Hybrid Constructor/Prototype:
ie. here is a good way to use the javascript:
MyObject = function(){};
MyObject.prototype.SayHello = function(){
alert(‘hello’);
}
what is nice here is that ‘SayHello’ isn’t created every time you create MyObject – but rather it is it’s own object (functions are objects in javascript)- and it’s attached to the MyObject.
This does require this sort of call to it:
new MyObject().SayHello();
Object Notation:
MyObject = {
SayHello : function(){alert(‘hello’);}
};
Then to use it:
MyObject .SayHello
—
Comments – recommendations?
UPDATE: Here is a jQuery ‘HowTo’s’ writeup on ‘Javascript Object Notation’ and ‘Anonymous functions‘ : both are showing the use of object notation with objects and functions.
