OO JQuery and classes

Question

I\'m working on a site and using JQuery for essentially the first time. I\'ve mostly used MooTools for previous projects, and I have a few widget classes I\'ve written usin

Answer 1

Hm... interesting. We have jQuery which imho is a great tool to interact with the DOM. It's a selection tool where you can write your own code (plugins) to modify selected items. You can interact here with your own (object oriented) code in a plugin to do something really cool.

So why would you need extra OO capabilities in jQuery unless you want to be able to inherit from other jQuery plugins?

Because you might have a plugin that allows you to do the following:

$(".spiffyness").yourSpiffyficationPlugin1();

And, while doing some really cool awesomeness already, you need more spiffyness on top of this.

Therefore you want to inherit from your first plugin which results in:

$(".spiffyness").yourSpiffyficationPlugin2(); //plugin inherited from 1

But... wouldn't you get there too by doing this:

$(".spiffyness").yourSpiffyficationPlugin1().yourSpiffyficationPlugin2();

Where the second plugin just does this tiny (but awesome ;)) thing extra on top of the first one?

In other words: is what you want, worth the effort for the sake of OO purism? Or is the jQuery pipe mechanism good enough and maybe everything you need?

I would say that separation of responsibilities and/or your mootools mindset might be the real issue here. Let jQuery do what it is good at, use it's powerfull pipe mechanism, pipe your own plugins (which may contain tons of fancy OO stuff)... and you can have great results while your code is still clean.

If you do think I am thinking too simple here, a good example of the essence of your point would be welcome! :-)

And to be ahead of that, if you are doing something really advanced and you do not get away with simply doing something on top of something else, you're plugin could also delegate to one of your OO classes. E.g. like:

$.fn.totalAwesomeness = function(options) {
  var defaults = {
    mode: 1,
    title: 'Awesome'
  };
  var opts = $.extend(defaults, options);
  return this.each(function() {
    var $this = $(this);
    var handler = null;
    if(defaults.mode == 1)
       handler = new com.myStuff.class1($this);
    else if(defaults.mode == 2)
   handler = new com.myStuff.class2($this); //class2 inherits from class1 
    handler.doMagic();
  });
};