Ник Морган - JavaScript для детей. Самоучитель по программированию

! В этом примере метод css используется подобно методу

offset , который мы применяли для перемещения элемен-

тов по странице в десятой главе. К сожалению, offset

не так хорошо работает с несколькими элементами,

а нам нужно отображать сразу несколько машин, по -

этому в этом примере мы будем пользоваться css .

И наконец, в строке  мы с помощью jQuery добавляем

carElement к элементу body нашего HTML-документа. После

этого carElement появится на странице. (Чтобы вспомнить,

как работает метод append, вернитесь к разделу «Создание

новых элементов через jQuery» на с. 150. )

Проверка функции drawCar

Давайте убедимся, что функция drawCar работает как положено.

Добавьте этот код в файл cars.html (после остального JavaScript-кода),

чтобы создать две машины.

$("body").append(carElement);

};

var tesla = new Car(20, 20);

var nissan = new Car(100, 200);

drawCar(tesla);

drawCar(nissan);

Здесь мы использовали конструктор Car для создания двух объектов —

первого с координатами (20, 20) и второго с координатами (100,

200) — и затем отобразили их в окне браузера с помощью drawCar.

12. Объектно-ориентированное программирование 183

Открыв теперь cars.html , вы должны увидеть изображения двух машин,

как на рис. 12.2.

Рис. 12.2. Отображение машин с помощью drawCar

Настройка объектов через прототипы

Есть другой, более объектно-ориентированный подход к рисованию

машин — задать для каждого объекта-машины метод отрисовки (назо-

вем его draw). Тогда вместо drawCar(tesla) можно будет написать

tesla.draw(). В объектно-ориентированном программировании при-

нято, чтобы объекты обладали собственной функциональностью, орга-

низованной в виде методов. В нашем случае функция drawCar изна-

чально предназначена для изображения объектов-машин, поэтому

стоит сделать ее частью каждого объекта, а не использовать как отдель-

ную функцию.

Прототипы JavaScript — это механизм, который упрощает исполь-

зование общей функциональности (то есть методов) разными объек-

тами. У всех конструкторов есть свойство prototype, к которому можно

добавлять методы; любой метод, добавленный к свойству prototype,

будет доступен всем объектам, которые созданы с помощью этого

конструктора.

На рис. 12.3 показан синтаксис добавления метода к свойству

prototype.

184 Часть II. Продвинутый JavaScript

Имя

Имя

конструктора

метода

Car.prototype.draw = function () {

// Тело метода

}

Рис. 12.3. Синтаксис добавления метода к свойству prototype

Добавляем метод draw к прототипу Car

Давайте добавим метод draw к свойству Car.prototype, чтобы он по

-

явился у всех объектов, созданных вызовом new Car. Выберите File

Save As

и сохраните файл cars.html под именем cars2.html . Далее замените весь

JavaScript-код, находящийся во втором элементе script, следующим кодом:

 var Car = function (x, y) {

this.x = x;

this.y = y;

};

 Car.prototype.draw = function () {

var carHtml = '';

 this.carElement = $(carHtml);

this.carElement.css({

position: "absolute",

 left: this.x,

top: this.y

});

$("body").append(this.carElement);

};

var tesla = new Car(20, 20);

var nissan = new Car(100, 200);

tesla.draw();

nissan.draw();

После создания конструктора в строке , в строке  мы добавили

к Car.prototype новый метод draw. Таким образом, draw станет частью

всех объектов, созданных конструктором Car.

Код метода draw представляет собой слегка измененную функ-

цию drawCar. Сначала мы создаем строку с HTML-кодом, сохраняя ее

в переменной carHTML. В строке  мы создаем jQuery-элемент для этого

12. Объектно-ориентированное программирование 185

HTML, на этот раз сохраняя его в свойстве объекта this.carElement.

Далее в строке  мы, обращаясь к this.x и this.y, задаем координаты

верхнего левого угла изображения. (В конструкторе this соответствует

объекту, который в данный момент создается.)

Когда вы запустите этот код, страничка будет выглядеть так же, как

на рис. 12.2: функциональность кода осталась прежней, мы лишь изме-

нили его структуру. Преимущество этого подхода в том, что теперь код

рисования является частью объекта (машины), а не отдельной функцией.

Добавляем метод moveRight

Теперь добавим несколько методов для перемещения машин по экрану,

Move right —

начиная с метода moveRight, передвигающего машину на 5 пикселей

подвинуть

вправо относительно текущей позиции. Добавьте следующий код после

вправо

определения Car.prototype.draw: