Как я могу получить объекты на основе классов в JavaScript с помощью jQuery? - PullRequest
6 голосов
/ 01 августа 2009

Я пытаюсь перейти от Prototype к jQuery, и еще одна вещь, которую я не могу понять, как это сделать в новой библиотеке.

Вот что я делал с Prototype:

MyClass = Class.create();

MyClass.prototype = {
  initialize: function(options) {
  }
}

Тогда я мог бы создать новый MyClass с:

var mc = new MyClass({});

Есть ли в jQuery что-то похожее на Class.create() в Prototype? А если нет, то как я могу получить то же самое без библиотеки?

Ответы [ 11 ]

15 голосов
/ 17 сентября 2008

Я использую функцию jquery extend для расширения прототипа класса.

Например:

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

Примечание: я задал связанный вопрос на эту же тему.

5 голосов
/ 17 сентября 2008

jQuery использует стандартную функциональность javascript для создания новых классов.

В Интернете есть несколько прекрасных примеров, но я бы порекомендовал посмотреть книги Дэвида Фланагана «Javascript: Полное руководство».

Объектно-ориентированный JavaScript

JavaScript и объектно-ориентированное программирование (ООП)


Прошу прощения, я полностью неправильно понял ваш оригинальный пост. Я предполагаю, что вы на самом деле хотите знать, как расширить объект jQuery $. Это легко выполнимо, для этого существует большое количество плагинов. Для этого на сайте jQuery есть учебное пособие: Начало работы с jQuery

По сути, вы используете


 jQuery.fn.foobar = function() {
   // do something
 };
3 голосов
/ 01 августа 2009

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({});
2 голосов
/ 01 августа 2009

В 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 поможет вам использовать всю мощь языка.

1 голос
/ 02 августа 2009

Хорошее решение от Джона Резига: Простое наследование JavaScript

1 голос
/ 01 августа 2009

Вы можете скопировать соответствующую часть из исходного кода прототипа и оставить части о расширении. http://github.com/sstephenson/prototype/blob/add69978e09653808aedec43ed551df22818ee30/src/lang/class.js

В jQuery нет такой системы для создания и расширения объектов, поскольку кажется, что вся система зависит от цепочки jQuery (jeresig: извините, если я ошибаюсь). Так что вы все равно должны создать свою собственную систему.

Чтобы понять, у Дугласа Крокфорда есть хорошо известный шаблон для создания объектов и наследования в JavaScript. http://javascript.crockford.com/prototypal.html

0 голосов
/ 01 апреля 2014

Я думаю, есть более простой способ ...

    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'
0 голосов
/ 14 декабря 2012

вы можете попробовать JS.Class (переносимая модульная библиотека классов JavaScript) - http://jsclass.jcoglan.com/

0 голосов
/ 01 августа 2009

Вы можете использовать стандартный JavaScript:

MyClass = function(options) {
  console.log(options);
};

var mc = new MyClass([1,2,3]);

Вы можете использовать jQuery для обеспечения наследования: http://docs.jquery.com/Utilities/jQuery.extend#deeptargetobject1objectN

0 голосов
/ 14 марта 2009

Фантастический плагин John Resig Classy Query обеспечивает именно то, что вы ищете:

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...