CODEWITHSUNDEEP
javascriptjqueryclass
Phil Kulak
Phil Kulak

Reputation: 7230

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

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?

Upvotes: 6

Views: 11795

Answers (11)

user3106724
user3106724

Reputation:

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'

Upvotes: 0

patie
patie

Reputation: 1092

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

Upvotes: 0

justmoon
justmoon

Reputation: 1311

A good solution by John Resig: Simple JavaScript Inheritance

Upvotes: 1

Eugene Lazutkin
Eugene Lazutkin

Reputation: 43956

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({});

Upvotes: 3

Mehmet Duran
Mehmet Duran

Reputation: 176

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

Upvotes: 1

Justin Johnson
Justin Johnson

Reputation: 31300

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

Upvotes: 0

SolutionYogi
SolutionYogi

Reputation: 32243

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.

Upvotes: 2

Eduardo Scoz
Eduardo Scoz

Reputation: 24753

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

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

Upvotes: -1

Devon
Devon

Reputation: 5784

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.

Upvotes: 15

anon
anon

Reputation:

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

Upvotes: 5

oglester
oglester

Reputation: 6655

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

Upvotes: -1

Related Questions