Основы JQuery OOP

Ответ 1

Программирование ООП в JavaScript может быть сделано разными способами. Существует множество шаблонов.

Я покажу вам два: реализацию наследования объектов и реализацию композиции объекта.

Это не имеет абсолютно никакого отношения к jQuery. jQuery следует использовать для манипуляций с DOM и манипулирования событиями. Вы не должны создавать свои основные объекты и конструкторы на основе объектов jQuery. В игре роль jQuery - чтение ввода с клавиатуры и, необязательно, преобразование вашей графики в DOM (если вы почему-то не используете <canvas>).

Живой пример

Наследование

var Constructor = function(name) {
    this.name = name
};

Constructor.prototype.mymethod = function() {
    alert("my name is : " + this.name);
};

var obj = new Constructor("foo");
obj.mymethod(); // my name is : foo

Здесь была определена функция Constructor, которую вы можете вызвать для создания нового объекта. Вы ссылаетесь на объект внутри конструктора с помощью this.

Вы можете добавить (статические) методы и переменные к прототипу конструктора, который будет наследоваться объектом.

function inherits(child, parent) {
    var f = new Function;
    f.prototype = parent.prototype;
    f.prototype.constructor = parent;
    child.prototype = new f;
    child.prototype.constructor = child;
}

Вы можете использовать функцию inherits, которая устанавливает прототип функции-конструктора экземпляру другого конструктора. Это означает, что все методы и свойства этого родительского объекта доступны для дочернего

var SecondConstructor = function(name) {
    this.name = name + "bar";
};
inherits(SecondConstructor, Constructor);
var obj = new SecondConstructor("foo");
obj.mymethod(); // my name is : foobar

Это прототипное наследование JavaScripts. В основном вы устанавливаете прототип функции для определенного объекта. Затем, когда вы используете функцию для создания объектов, объекты реализуют прототип.

Состав

Использование прототипа на самом деле не обязательно, вы также можете использовать композицию объекта. Этот метод требует хорошего понимания состояния this, которое вы можете прочитать о в другом месте.

Я собираюсь обмануть и делегировать некоторые утомительные вспомогательные функции underscore.js

var Constructor = function(name) {
    this.name = name;

    this.mymethod = function() {
        alert("my name is : " + this.name);
    };
};

var SecondConstructor = function(name) {
    var constructor = new Constructor(name + "bar");
    _.bindAll(constructor);
    _.extend(this, {
        "mymethod": constructor.mymethod
    });
};

var obj = new SecondConstructor("foo");
obj.mymethod();

Здесь SecondConstructor создает экземпляр Constructor для себя, а не наследует его. Затем он связывает ссылку this со всеми методами этого объекта-конструктора, чтобы мы могли делегировать вызов mymethod нашему собственному объекту-конструктору. Это работает только для методов, но это не должно быть проблемой, потому что у вас действительно нет публичных полей.

Ответ 2

В качестве примечания я недавно начал использовать Processing.js, который позволяет объявлять классы С++ - например, просто используя 'class'.

Позднее редактирование (июнь 2014 года):

Processing.js хорош для того, чтобы проекты проходили без необходимости бороться с JavaScript OOP. Но по мере того, как я начал разрабатывать более крупные проекты, я заметил, что Processing.js - это слишком высокий уровень абстракции, и что на самом деле стоит писать биты OOP и всю структуру кода.

Теперь я использую PIXI.js в качестве моей рендеринговой/интерактивной библиотеки canvas и структурирую свой код гораздо более чистым способом, используя некоторые из ООП, упомянутые выше.

Ответ 3

ООП очень не тождественна во всех языках программирования. Объекты на С++ являются экземплярами классов, а классы - полностью компилируемыми. Javascript не имеет классов, все объекты имеют объекты.

Можно использовать Javascript способами, которые действуют аналогично классам, используя правила определения области действия, цепи прототипов и специальную ссылку "this", но это идиомы, которые налагаются на язык, а не часть языка. И существует довольно много разных идиом классического стиля в общем использовании, а также неисчислимые числа саморазвитых.

В моем сознании, критические различия между javascript и С++/С#/Java/и т.д., лучше всего понять, исследуя правила определения области охвата. Какие переменные находятся в области видимости в любой точке кода и на каком объекте указывает специальная ссылка "this", когда это то, что важно понимать при попытке работать с javascript.