Tuesday, January 22, 2013

Object Oriented, functional and closure view of Jquery

Jquery =$Well, I have been too much into Jquery. Being C# developer by nature its always been hard to adopt the style of programming in Jquery. What differentiate more is the style and modularization we have in C#. Apparently I like Jquery and try to code it as modular as I can.Here is quick reference of MSDN magazine issue, Script Junkies....http://msdn.microsoft.com/en-us/magazine/gg476048.aspxHere you will understand following few important things.

Functional way of programming Jquery

Jquery Plugins

Objects in Jquery

Object-orientation through Closures

Object-orientation through Prototypes

Inheritance In Jquery

Functional Jquery:

// Function to calculate a total

var CalcTotal = function(x, y) {

return x + y;

};

// Function to add taxes

var AddTaxes = function(x) {

return x * 1.2;

};

// Function that pipelines the other two

var CalcTotalPlusTaxes = function (fnCalcTotal, fnAddTaxes, x, y) {

return fnAddTaxes(fnCalcTotal(x, y));

};

// Execution

var result = CalcTotalPlusTaxes(CalcTotal, AddTaxes, 40, 60);

alert(result);

How to write Jquery plugins

jQuery.fn = jQuery.prototype = {

init: function( selector, context ) { ... },

size: function() {returnthis.length; },

each: function( callback, args ) {

return jQuery.each( this, callback, args ); },

ready: function( fn ) { ... }

:

}

Objects in Jquery

var person = newObject();

person.Name = "Dino";

person.LastName = "Esposito";

person.BirthDate = newDate(1979,10,17)

person.getAge = function() {

var today = newDate();

var thisDay = today.getDate();

var thisMonth = today.getMonth();

var thisYear = today.getFullYear();

var age = thisYear-this.BirthDate.getFullYear()-1;

if (thisMonth > this.BirthDate.getMonth())

age = age +1;

else

if (thisMonth == this.BirthDate.getMonth() &&

thisDay >= this.BirthDate.getDate())

age = age +1;

return age;

}

Object-orientation through Closures

var Person = function(name, lastname, birthdate)

{

this.Name = name;

this.LastName = lastname;

this.BirthDate = birthdate;

this.getAge = function() {

var today = newDate();

var thisDay = today.getDate();

var thisMonth = today.getMonth();

var thisYear = today.getFullYear();

var age = thisYear-this.BirthDate.getFullYear()-1;

if (thisMonth > this.BirthDate.getMonth())

age = age +1;

else

if (thisMonth == this.BirthDate.getMonth() &&

thisDay >= this.BirthDate.getDate())

age = age +1;

return age;

}

}

Object-orientation through Prototypes

// Pseudo constructor

var Person = function(name, lastname, birthdate)

{

this.initialize(name, lastname, birthdate);

}

// Members

Person.prototype.initialize(name, lastname, birthdate)

{

this.Name = name;

this.LastName = lastname;

this.BirthDate = birthdate;

}

Person.prototype.getAge = function()

{

var today = newDate();

var thisDay = today.getDate();

var thisMonth = today.getMonth();

var thisYear = today.getFullYear();

var age = thisYear-this.BirthDate.getFullYear()-1;

if (thisMonth > this.BirthDate.getMonth())

age = age +1;

else

if (thisMonth == this.BirthDate.getMonth() &&

thisDay >= this.BirthDate.getDate())

age = age +1;

return age;

}

Inheritance In JqueryBy using the prototype feature you can achieve inheritance by simply setting the prototype of a derived object to an instance of the “parent” object.