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.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. };
  5. // Function to add taxes
  6. var AddTaxes = function(x) {
  7. return x * 1.2;
  8. };
  9. // Function that pipelines the other two
  10. var CalcTotalPlusTaxes = function (fnCalcTotal, fnAddTaxes, x, y) {
  11. return fnAddTaxes(fnCalcTotal(x, y));
  12. };
  13. // Execution
  14. var result = CalcTotalPlusTaxes(CalcTotal, AddTaxes, 40, 60);
  15. 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;
  6. this.getAge = function() {
  7. var today = new Date();
  8. var thisDay = today.getDate();
  9. var thisMonth = today.getMonth();
  10. var thisYear = today.getFullYear();
  11. var age = thisYear-this.BirthDate.getFullYear()-1;
  12. if (thisMonth > this.BirthDate.getMonth())
  13. age = age +1;
  14. else
  15. if (thisMonth == this.BirthDate.getMonth() &&
  16. thisDay >= this.BirthDate.getDate())
  17. age = age +1;
  18. return age;
  19. }
  20. }
Object-orientation through Prototypes
  1. // Pseudo constructor
  2. var Person = function(name, lastname, birthdate)
  3. {
  4. this.initialize(name, lastname, birthdate);
  5. }
  6. // Members
  7. Person.prototype.initialize(name, lastname, birthdate)
  8. {
  9. this.Name = name;
  10. this.LastName = lastname;
  11. this.BirthDate = birthdate;
  12. }
  13. Person.prototype.getAge = function()
  14. {
  15. var today = new Date();
  16. var thisDay = today.getDate();
  17. var thisMonth = today.getMonth();
  18. var thisYear = today.getFullYear();
  19. var age = thisYear-this.BirthDate.getFullYear()-1;
  20. if (thisMonth > this.BirthDate.getMonth())
  21. age = age +1;
  22. else
  23. if (thisMonth == this.BirthDate.getMonth() &&
  24. thisDay >= this.BirthDate.getDate())
  25. age = age +1;
  26. return age;
  27. }
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.
  1. Developer = function Developer(name, lastname, birthdate)
  2. {
  3. this.initialize(name, lastname, birthdate);
  4. }
  5. Developer.prototype = new Person();

Post a Comment