Как я могу получить основанные на классах объекты в JavaScript с jQuery?
9 ответов
Я использую функцию расширения jQuery для расширения прототипа класса.
Например:
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();
Примечание: Я задал связанный вопрос об этой той же теме.
jQuery использует стандартную функциональность JavaScript для создания новых классов.
В сети существуют некоторые прекрасные примеры, но я рекомендовал бы смотреть на книги David Flanagan JavaScript: Полное руководство.
Объектно-ориентированный JavaScript
JavaScript и объектно-ориентированное программирование (ООП)
Я приношу извинения, я полностью неправильно понял Ваше исходное сообщение. Я предполагаю, что Вы на самом деле хотите знать, как расширить объект $ jQuery. Это легко выполнимо, существует большое количество плагинов там для того, чтобы сделать так. Существует учебное руководство на сайте jQuery для того, чтобы сделать это: Начало работы С jQuery
По существу, тем не менее, Вы используете
jQuery.fn.foobar = function() {
// do something
};
Никогда не делавшийся это, но я предполагаю смотреть на некоторые плагины, такие как Thickbox, могло бы быть полезным.
Фантастический Классный плагин Запроса John Resig обеспечивает точно, что Вы ищете:
jQuery не определяет примитивы ООП, так что вы сами по себе. Но легко делать то, что вы хотите, с помощью простого JavaScript:
MyClass = function(options){
// whatever were in your initialize() method
};
И вы можете создавать экземпляры, как раньше:
var mc = new MyClass({});
Если раньше у вас было больше вещей в прототипе, вы можете добавить их, как раньше:
MyClass.prototype = {
// no need for initialize here anymore
/*
initialize: function(options) {
},
*/
// the rest of your methods
method1: function() { /*...*/ },
method2: function() { /*...*/ }
}
В качестве альтернативы вы можете добавлять свои методы динамически:
$.extend(MyClass.prototype, {
method1: function() { /*...*/ },
method2: function() { /*...*/ }
});
И, наконец, вы можете предоставить своего собственного создателя класса:
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({});
Хорошее решение Джона Ресига: Простое наследование JavaScript
В JavaScript обычная функция действует как конструктор, если используется с ключевым словом 'new'.
Так что вы можете это сделать,
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.
Я бы посоветовал вам попытаться понять, как на самом деле JavaScript работает. Попытайтесь понять наследование прототипов в отличие от наследования на основе классов . Хорошее понимание JavaScript поможет вам использовать всю мощь языка.
Вы можете использовать стандартный JavaScript:
MyClass = function(options) {
console.log(options);
};
var mc = new MyClass([1,2,3]);
Вы можете использовать jQuery для обеспечения наследования: http://docs.jquery.com/Utilities/jQuery.extend#deeptargetobject1objectN
Вы можете скопировать соответствующую часть из исходного кода прототипа и оставить части о расширении. http://github.com/sstephenson/prototype/blob/add69978e09653808aedec43ed551df22818ee30/src/lang/class.js
jQuery не имеет такой системы для создания и расширения объектов, поскольку вся система, кажется, зависит от по цепочке jQuery (к jeresig: извините, если я ошибаюсь). Так что вам все равно придется создать свою собственную систему.
Чтобы получить представление, Дуглас Крокфорд имеет хорошо известный шаблон для создания объектов и наследования в JavaScript. http://javascript.crockford.com/prototypal.html