Jul/091
How to use object oriented programming with jQuery
Unlike many other JavaScript frameworks jQuery provides few object oriented programming utilities, since JavaScript is all ready object oriented there is no need to. That being said, the means of using object oriented programming with jQuery are limited by some aspects of jQuery it’s self. jQuery is really a function that returns a jQuery object or an array of jQuery objects. That can be confusing since there is both a jQuery function and a jQuery object. Due to this fact there is nothing exactly to sub-class before the jQuery function has returned a jQuery object. What you can do is define a JavaScript object that specifies your own member variables and functions. Once you retrieve a jQuery object, you can use the jQuery.extend() function to copy the members of your object to the returned jQuery object.
Here is a simple example to illustrate:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> Object Oriented jQuery </title> <script src="jquery-1.3.2.js"></script> <script language="JavaScript"> var hideMeShowMe = { hideME: function(){ this.data('baseDisplay', this.css('display')); this.css('display', 'none'); }, showMe: function(){ this.css('display', this.data('baseDisplay')); } }; jQuery( function(){ var pageElement = jQuery('#myElement'); jQuery.extend(pageElement, hideMeShowMe); pageElement.hideME(); } ); </script> </head> <body> <div id="myElement"> This is hideable </div> </body> </html> |
This allows you to extend a single jQuery object with your object’s functionality. There is another approach that you could take which is to use the jQuery.fn.endtend function. That function will cause all of your objects members to be copied to all jQuery objects returned by the jQuery function, that is how plugins work. Which approach you use depends on what you are trying to do, if you are going to make one kind of control that has a specific purpose, it makes sense to use the approach I cover here instead of adding it as a plugin. If you are going to add functionality that will be used more broadly then it makes more sense to add that functionality as a plugin.
This is part of my ongoing series of posts exploring the use of jQuery and object oriented JavaScripts, you might be interested in these posts as well:
![[Post to Twitter]](http://www.sweetvision.com/wp-content/plugins/tweet-this/icons/tt-twitter-big3.png){kind=icon}
![[Post to Plurk]](http://www.sweetvision.com/wp-content/plugins/tweet-this/icons/tt-plurk-big3.png){kind=icon}
![[Post to Yahoo Buzz]](http://www.sweetvision.com/wp-content/plugins/tweet-this/icons/tt-buzz-big3.png){kind=icon}
![[Post to Delicious]](http://www.sweetvision.com/wp-content/plugins/tweet-this/icons/tt-delicious-big3.png){kind=icon}
![[Post to Digg]](http://www.sweetvision.com/wp-content/plugins/tweet-this/icons/tt-digg-big3.png){kind=icon}
![[Post to Ping.fm]](http://www.sweetvision.com/wp-content/plugins/tweet-this/icons/tt-ping-big3.png){kind=icon}
![[Post to Reddit]](http://www.sweetvision.com/wp-content/plugins/tweet-this/icons/tt-reddit-big3.png){kind=icon}
![[Post to StumbleUpon]](http://www.sweetvision.com/wp-content/plugins/tweet-this/icons/tt-su-big3.png){kind=icon}
Jun/091
jQuery makes me go hmmm
So I was busy looking into the ways to use jQuery in a prototype based object oriented fashion and was having a devil of a time geting it to work. I eventually turned to Goolge for help and I discovered this thread which is a discussion of sub-classing the jQuery object. It is mostly a back and forth between John Resig and Nate Cavanaugh covering Nate’s attempts at sub-classing jQuery. The long and short of the discussion is that jQuery has so many references to the global jQuery object that it cannot be cleanly sub-classed
So my initial concept was to subclass the jQuery object in my own objects to make new JavaScript objects with all of the functions of jQuery as well as my additions, but that is not going to work. That being said jQuery has a number of methods of adding objects and functions to jQuery; which is basically how plugins are developed. I will explore extending the jQuery and JQuery.fn objects with my own objects next.
This is part of my ongoing series of posts exploring the use of jQuery and object oriented JavaScripts, you might be interested in these posts as well:
Jun/092
jQuery is object oriented
When I first looked at the jQuery frame work, a few years ago I immediately discounted it as a viable framework. My whole reason for that decision was that it did not add a traditional class based object oriented layer. A little more than a year later I started reading about jQuery’s speed and small size. I decided that I would give it a full chance and start using it on a few projects. I found many advantages to jQuery but was still turned off by its apparent lack of object oriented features. I wrote a blog post to that affect and the response was rather vehement as many took my statement that “you should not choose jQuery if you wanted an object oriented framework,” to be a condemnation of jQuery. Some statements though were rather enlightening, specifically ones that pointed out that JavaScript is all ready object oriented and does not need a framework to make it so.
That last point was interesting as I all ready knew that JavaScript was an object oriented language, but since it did not do objects like I learned to do them in C++ and PHP it sort of slid under my obvious filter. Suddenly I realized I need to look into how JavaScript was object oriented, started learning about Prototype-based programming, and learn how JavaScript uses it. This began a cascade of shifting thought about how to program in JavaScript and how to use jQuery. So now I am exploring how to create objects in a JavaScript centric way and how to do object oriented jQuery development.
Some things to take away from this little post is that JavaScript is object orented, JavaScript is a prototype based language and jQuery is a prototype centric JavaScript library.
This is part of my ongoing series of posts exploring the use of jQuery and object oriented JavaScripts, you might be interested in these posts as well:
Feb/092
The one real reason to not use JQuery
JQuery is a very nice for DOM manipulation and access. As I mentioned in my last post, JQuery uses standard CSS selectors by default which is very nice. You can create fairly complex actions with very few lines of code.
What it does not have that MooTools and Prototype.js both have is a rich set of object oriented oriented development functions. JQuery is ver DOM centric and does not have much in the way of utilities that are not directly related to accessing and manipulating the DOM. You can greatly extend the functions of elements in the DOM or add elements to the DOM. Once you are working with pure JavaScript objects JQuery does not have much to offer. This begins to become eveident right away when compairing the core sections of both MooTools and JQuery. In JQuery’s core the first things are DOM element access and creation functions; where MooTools’ core is all JavaScript and OO featrues. The Extend function is a good example, extend is a core componenet of MooTools and a Utility in Jquery.
Beyond that the true reason for using MooTools is the the object oriented programming features. The Function and Class features of MooTools are simply not implimented in JQuery. This makes taking advantage of Encapsulation, Inheritance and Polymorphism very difficult with JQuery, which pretty much leaves all of the work of implementation of those features up to you.
That being said you can use the JQuery’s noConflict() function and use both MooTools and JQuery. I have not explored how the two will play together when writing object oriented code with Mootools functions and accessing the DOM with JQuery, but I do plan to give this a try in the near future.
Jan/092
Three real good reasons to use JQuery, from a Mootools lover
I have been an avid mootools user for many years. A couple of times I have looked at JQuery and turned up my nose. That being said I am a firm believer that one should reassess ones knowledge/opinions/assumptions periodically just to make sure the world has not changed while you were not looking. This is one time that the reassessment did indeed change what I believe, and here are 3 things making that change:
Community Support
JQuery has a large community of active users. This makes finding information supplementary to the JQuery official documentation very easy. JQuery’s community also means that when you post a question some where you will not wait long for an answer.
Selectors
JQuery uses the same selectors as CSS. When working with a team of both developers and designers this is wonderful. When it comes to addressing the DOM with JQuery both the designers and the developers are speaking the same language. Every bridge you can build between your developers and designers makes for a stronger team. Not to mention using CSS selectors is just easier than all the hoops you have to jump through in other frameworks.
Speed
With the release of version 1.3 of the JQuery framework, many of the functions are faster than any other JavaScript framework. With the ever increasing amount of JavaScript executing on a page the speed is a welcome relief.
These are three very important reasons to take another look at JQuery.
I have done a little more playing around with JQuery and have found one major draw back when compared to Mootools