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.aspx

Here you will understand following few important things.

1.  Functional way of programming Jquery
2.  Jquery Plugins
3.  Objects in Jquery
4.  Object-orientation through Closures
5.  Object-orientation through Prototypes
6.  Inheritance In Jquery

Functional Jquery:

1. // Function to calculate a total
2. var CalcTotal = function(x, y) {
3. return x + y;
4. };
6. // Function to add taxes
7. var AddTaxes = function(x) {
8. return x * 1.2;
9. };
11. // Function that pipelines the other two
12. var CalcTotalPlusTaxes = function (fnCalcTotal, fnAddTaxes, x, y) {
13. return fnAddTaxes(fnCalcTotal(x, y));
14. };
16. // Execution
17. var result = CalcTotalPlusTaxes(CalcTotal, AddTaxes, 40, 60);
18. alert(result);

How to write Jquery plugins

1. jQuery.fn = jQuery.prototype = {
2. init: function( selector, context ) { ... },
3. size: function() { return this.length; },
4. each: function( callback, args ) {
5. return jQuery.each( this, callback, args ); },
6. ready: function( fn ) { ... }
7. :
8. }

Objects in Jquery

1. var person = new Object();
2. person.Name = "Dino";
3. person.LastName = "Esposito";
4. person.BirthDate = new Date(1979,10,17)
5. person.getAge = function() {
6. var today = new Date();
7. var thisDay = today.getDate();
8. var thisMonth = today.getMonth();
9. var thisYear = today.getFullYear();
10. var age = thisYear-this.BirthDate.getFullYear()-1;
11. if (thisMonth > this.BirthDate.getMonth())
12. age = age +1;
13. else
14. if (thisMonth == this.BirthDate.getMonth() &&
15. thisDay >= this.BirthDate.getDate())
16. age = age +1;
17. return age;
18. }

Object-orientation through Closures

1. var Person = function(name, lastname, birthdate)
2. {
3. this.Name = name;
4. this.LastName = lastname;
5. this.BirthDate = birthdate;
7. this.getAge = function() {
8. var today = new Date();
9. var thisDay = today.getDate();
10. var thisMonth = today.getMonth();
11. var thisYear = today.getFullYear();
12. var age = thisYear-this.BirthDate.getFullYear()-1;
13. if (thisMonth > this.BirthDate.getMonth())
14. age = age +1;
15. else
16. if (thisMonth == this.BirthDate.getMonth() &&
17. thisDay >= this.BirthDate.getDate())
18. age = age +1;
19. return age;
20. }
21. }

Object-orientation through Prototypes

1. // Pseudo constructor
2. var Person = function(name, lastname, birthdate)
3. {
4. this.initialize(name, lastname, birthdate);
5. }
7. // Members
8. Person.prototype.initialize(name, lastname, birthdate)
9. {
10. this.Name = name;
11. this.LastName = lastname;
12. this.BirthDate = birthdate;
13. }
14. Person.prototype.getAge = function()
15. {
16. var today = new Date();
17. var thisDay = today.getDate();
18. var thisMonth = today.getMonth();
19. var thisYear = today.getFullYear();
20. var age = thisYear-this.BirthDate.getFullYear()-1;
21. if (thisMonth > this.BirthDate.getMonth())
22. age = age +1;
23. else
24. if (thisMonth == this.BirthDate.getMonth() &&
25. thisDay >= this.BirthDate.getDate())
26. age = age +1;
27. return age;
28. }

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

Developer = function Developer(name, lastname, birthdate) 
{ 
   this.initialize(name, lastname, birthdate);
}
Developer.prototype = new Person();