How can I get javascript class objects using jQuery?

Question

I am trying to switch from Prototype to jQuery, and there the last thing that I can’t figure out is how to do this in the new library.

Here is what I used 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 something like Prototype Class.create() ? And if not, how can I get the same without a library?

Answer 1

I am using the jquery extend function to extend the prototype of a class.

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 question on the same topic.

Answer 2

jQuery uses standard javascript functionality to create new classes.

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

Object oriented javascript

JavaScript and Object Oriented Programming (OOP)

---

Sorry, I completely misunderstood your original post. I assume that you really want to know how to extend the jQuery $ object. This is easy to do, there are a lot of plugins for this There’s a tutorial on the jQuery site: Getting started with jQuery

Essentially you are using

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

Answer 3

jQuery does not define OOP primitives, so you are on your own. But it's easy to do what you want using regular JavaScript:

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

And you can create instances that you used to:

 var mc = new MyClass({}); 

If you used more things in the prototype, you can add them as 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 dynamically add your methods:

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

And finally, you can provide your 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 the '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 advise you to try to understand how JavaScript works. Try to understand prototype inheritance as opposed to class based inheritance . A good understanding of JavaScript will help you take advantage of the language.

Answer 5

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

jQuery does not have such a system for creating and expanding an object, since the whole system seems to depend on the jQuery chain (to jeresig: sorry if I'm wrong). Therefore, you must create your own system.

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

Answer 6

John Resig's Good Solution: Simple JavaScript Inheritance

Answer 7

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

you can try JS.Class (portable, modular JavaScript class library) - http://jsclass.jcoglan.com/

Answer 9

I think theres an easier 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

I have never done this, but I guess some of the plugins, such as Thickbox, might be useful.

Answer 11

The fantastic Query plugin from John Resig provides exactly what you are looking for:

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