How can I get class-based objects in JavaScript with jQuery?

Question

I'm trying to move from Prototype to jQuery and there's one last thing I can't figure out how to do in the new library.

Here's what I used to do with Prototype:

MyClass = Class.create();

MyClass.prototype = {
  initialize: function(options) {
  }
}

Then I could create a new MyClass with:

var mc = new MyClass({});

Does jQuery have anything like Prototype's Class.create()? And if not, how do I get the same kind of thing without a library?

Answer 1

Never done it, but I imagine looking at some of the plug-ins such as Thickbox might be helpful.

Answer 2

jQuery uses the standard javascript functionality for creating new classes.

There are some fine examples on the web, but I would recommend looking at David Flanagan's books Javascript: The Definitive Guide.

Object-Oriented JavaScript

JavaScript and Object Oriented Programming (OOP)

---

I apologize, I completely misunderstood your original post. I'm guessing that you actually want to know how to extend the jQuery $ object. This is easily doable, there are a large number of plugins out there for doing so. There is a tutorial on the jQuery site for doing this: Getting Started With jQuery

Essentially, though, you use

 jQuery.fn.foobar = function() {
   // do something
 };

Answer 3

I use the jquery extend function to extend a class prototype.

For example:

MyWidget = function(name_var) {
  this.init(name_var);
}

$.extend(MyWidget.prototype, {
   // object variables
   widget_name: '',

   init: function(widget_name) {
     // do initialization here
     this.widget_name = widget_name;
   },

   doSomething: function() {
     // an example object method
     alert('my name is '+this.widget_name);
   }
});

// example of using the class built above
var widget1 = new MyWidget('widget one');
widget1.doSomething();

Note: I asked a related question about this same topic.

Answer 4

John Resig's fantastic Classy Query plugin provides exactly what you're looking for:

http://ejohn.org/blog/classy-query/

Answer 5

In JavaScript, a regular function acts as a constructor if used with 'new' keyword.

So you can do,

function MyClass(options)
{
   this.options = options;
};

MyClass.prototype.initialize = function() { } ;

MyClass.prototype.sayHello = function() { alert('Hello!'); };

var item = new MyClass( { id : 10 } );
item.sayHello(); //alerts Hello!
alert(item.options.id); //alerts 10.

I would suggest that you try to understand how JavaScript actually works. Try to understand prototype inheritance as opposed to class based inheritance. Good understanding of JavaScript will help you exploit the power of the language.

Answer 6

You could use standard JavaScript:

MyClass = function(options) {
  console.log(options);
};

var mc = new MyClass([1,2,3]);

You can use jQuery to provide inheritance: http://docs.jquery.com/Utilities/jQuery.extend#deeptargetobject1objectN

Answer 7

You can basically copy the relevant part from prototype's source code and leave the parts about extending. http://github.com/sstephenson/prototype/blob/add69978e09653808aedec43ed551df22818ee30/src/lang/class.js

jQuery doesn't have such a system for object creation and extension, since the whole system seems to depend on jQuery chaining (to jeresig: sorry if I'm mistaken). So you have to create your own system anyway.

To get an idea, Douglas Crockford has a well known pattern for creating objects and inheritance in JavaScript. http://javascript.crockford.com/prototypal.html

Answer 8

jQuery doesn't define OOP primitives, so you are on your own. But it is easy to do what you want with plain JavaScript:

MyClass = function(options){
  // whatever were in your initialize() method
};

And you can create instances like you used to:

var mc = new MyClass({});

If you used to have more things in the prototype you can add them like you used to:

MyClass.prototype = {
  // no need for initialize here anymore
  /*
  initialize: function(options) {
  },
  */

  // the rest of your methods
  method1: function() { /*...*/ },
  method2: function() { /*...*/ }
}

Alternatively you can add your methods dynamically:

$.extend(MyClass.prototype, {
  method1: function() { /*...*/ },
  method2: function() { /*...*/ }
});

And finally you can provide your very own class creator:

var CreateClass = function(){
  return function(){ this.initialize.apply(this, arguments); };
};

// the rest is a copy from your example

MyClass = CreateClass();

MyClass.prototype = {
  initialize: function(options) {
  }
}

var mc = new MyClass({});

Answer 9

A good solution by John Resig: Simple JavaScript Inheritance