Я пытаюсь выучить JavaScript, используя ОО-подход. Это мой код:
/*global document, MouseEvent */
MouseEvent.prototype.mouseCoordinates = function () {
return {
'x' : this.pageX - this.target.offsetLeft,
'y' : this.pageY - this.target.offsetTop
};
};
(function () {
var Pencil = function () {},
Canvas = function () {
this.element = document.getElementById('canvas');
this.tool = new Pencil();
this.element.addEventListener('click', this.tool.draw, false);
},
c;
Pencil.prototype.draw = function (event) {
var context = event.target.getContext('2d'),
coordinates = event.mouseCoordinates();
context.fillRect(coordinates.x, coordinates.y, 5, 5);
};
c = new Canvas();
}());
Я пытаюсь сделать что-то вроде MS Paint. Итак, я создал объект Canvas и объект Pencil. Я могу сделать это, используя процедурный подход, но я не хочу. Я не хочу сейчас пользоваться какой-либо библиотекой, я просто учусь.
У меня есть следующие вопросы:
Есть ли хорошая практика для регистрации событий? Должен ли я регистрировать события, используя конструктор объекта?
У моего объекта холста есть инструмент (в данном случае карандаш). Концептуально это не хорошо. Мой холст не должен иметь объект инструмента. Это должно обеспечить поверхность для рисования и все! Но это как обратный вызов (событие клика). Как я мог решить это?
У каждого инструмента будет одинаковый интерфейс, но разное поведение. Могу ли я создавать интерфейсы, используя Javascript?
Что еще я могу улучшить?
UPDATE:
(function () {
var pencil = {
draw : function (event) {
var context = event.target.getContext('2d'),
coordinates = event.mouseCoordinates();
context.fillRect(coordinates.x, coordinates.y, 5, 5);
}
},
currentTool = pencil,
canvas = (function () {
var object = {};
object.element = document.getElementById('canvas');
object.element.addEventListener('click', function (event) {
currentTool.draw(event);
}, false);
return object;
}());
}());
Я следовал всем советам (спасибо, я ценю вашу помощь!). Как вы думаете? Теперь у меня есть «глобальная» переменная currentTool. Что вы думаете об этом? Спасибо.
Спасибо.