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

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 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

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 4

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 5

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 6

John Resig的一个很好的解决方案： 简单的JavaScript继承

Answer 7

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 8

你可以试试JS.Class（可移植的，模块化的JavaScript类库） - http://jsclass.jcoglan.com/

Answer 9

I think, theres an easyer way ...

    function Dashboard() {
    var dashboard = this;
    dashboard.version = 'Version 0.1';
    dashboard.__init = function() {
            console.log('init');
    };
    dashboard.__init();
}
var dash = new Dashboard();

will log 'init'

Answer 10

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

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

Answer 11

从来没有做过，但我想看看一些插件，如Thickbox可能会有所帮助。