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?
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.
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.
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
};
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({});
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.
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
A good solution by John Resig: Simple JavaScript Inheritance
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
you can try JS.Class (portable, modular JavaScript class library) - http://jsclass.jcoglan.com/
Never done it, but I imagine looking at some of the plug-ins such as Thickbox might be helpful.
John Resig's fantastic Classy Query plugin provides exactly what you're looking for:
