Javascript OO with Object Notation

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s