views:

1218

answers:

4

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 using the MooTools Class structure. I'd like to port them over to JQuery, but it looks to me like there is nothing similar to the MooTools functionality when it comes to object classes.

I've searched around a bit, and haven't found much on it. Digg appears to have rolled their own, but I'm not sure if this is something I should be using. Is there a better way? How object-oriented do people normally get with JQuery? What's the usual method of encapsulating a UI widget (or any functional class structure)?

I'll post a fake example of a possible MooTools widget class:

var ZombatWidget = new Class({
    Extends: BaseWidget,
    widgetPropertyX = 'prop1',
    widgetPropertyY = 'prop2',
    attach = function(el) {
        var f = function() { 
            //do something widgety
        };
        el.addEvent('dblclick',f);
        el.addClass('widgetized');
    }
});

var z = new ZombatWidget();
z.attach($('widgetDiv'));

What I've got is a lot bigger than that, but you get the idea. Do I need to convert this to the prototype method of class/inheritance structuring? How would you write this kind of object class using JQuery?

A: 

The question is... Why are you moving away from MooTools is it fits your needs? Seems to me like MooTools was working fine, and there is nothing jQuery does that MooTools can't do. (The opposite isn't true).

Unfortunately, jQuery is not built to support classical OOP as MooTools is so you will need to write your Classes as jQuery plugins.

Andrew Moore
Erm...no, that's not the question. Since you asked though, JQuery was part of the project specifications, which weren't written by me. I'd like to bring my MooTools classes over if they can be converted, to save me from having to rewrite them for JQuery.
zombat
**@zombat:** jQuery doesn't have facilities for classes, you will need to rewrite them in jQuery.
Andrew Moore
A: 

Plugins sometimes do the trick.

Of course, you could use just enough of mootools to get it's class/inheritance model. With the implementation of document.id "compatibility mode" in 1.2.3 you can have your cake and eat it too (I think--haven't done it myself.)

rpflo
+2  A: 

You might find this approach useful to the task at stake: building an object-oriented jquery plugin.

And this article on Ajaxian "a real OO class system with jquery".

pixeline
A: 

http://ryanflorence.com/object-oriented-jquery-with-mootools-pigs-take-flight/

i know this is old but if someone searched for this in google or something...

countersweet