|
Как граматно создать конструктор
НЕ ПУГАЙТЕСЬ ЧТО МНОГО ТЕКСТА, ТУТ ВСЕ ПРОСТО!!!
Решил попытаться переписать свой код, и столкнулся с огромным провалом в понимании ООП в javascript, связи с чем прошу вашей помощи в создании эдакого мануала. Я работаю с элементам canvas, но думаю что логика подхода применительно к обычному диву будет такой же. Но не суть, ближе к делу. Пусть у нас будут даны несколько элементов canvas: ... <canvas id="canvasA"></canvas> <canvas id="canvasB"></canvas> <canvas id="canvasC"></canvas> ... и располагаем мы таким набором говнокода (написанным применительно для одного canvas): function init() { //функция инициализации canvas
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
}
...
function animate() { //функция запускающая отрисовку
requestAnimationFrame(animate);
draw();
}
//координаты мыши относительно элемента канвас
var xMouse=0
var yMouse=0
var HOLD=false
var WIDTH = canvas.offsetWidth
var HEIGHT = canvas.offsetHeight
function draw(){ //отрисовка
ctx.beginPath();
ctx.rect(0, 0, WIDTH , HEIGHT ); // очистка экрана
ctx.fill();
ctx.stroke();
if (HOLD==false)
ctx.strokeText(xMouse + " " + yMouse, 10, 10) // 10 10 -точка вывода координат мыши.
if (HOLD==true)
ctx.strokeText("Click is true", 10, 10)
}
//обработчики:
canvas.onmousedown = myDown;
canvas.onmouseup = myUp;
canvas.onmousemove = myMove;
function myUp(e) { HOLD = false }
function myDown(e) { HOLD = true}
function myMove(e) {
xMouse = e.pageX - canvas.offsetLeft
yMouse = e.pageY - canvas.offsetTop
}
Итак, это пожалуй все что нам понадобиться. Задача: отображать на каждом canvas координаты xMouse, yMouse (координаты мышки относительно этого канваса, а не всей страницы), а в случае клика выводить надпись (как видите в случае клика меняется значение переменной HOLD, а в функции отрисовки есть проверка этой переменной) Сложность: Все что я написал действительно является ничем иным как говнокодом, который можно применить к одному единственному элементу canvas, я же хочу сделать универсальный конструктор, но не знаю как, и в этом прошу вашей помощи. Думаю этот урок может быть полезен и другим новичкам js в будущем! |
Все самое важное я написал вам в вашем прошлом посте.
Пример создания конструктора там тоже есть, могу кинуть второй: var SomeConstructor = function(name) {
this.name = name;
};
SomeConstructor.prototype.getName = function () {
return this.name;
};
var vasia = new SomeConstructor("Вася");
var petia = new SomeConstructor("Петя");
alert([vasia.getName(), petia.getName()]);
Пишите что и где конкретно не получается - вам помогут. За вас нет желания переписывать. |
tsigel,
function SomeConstructor() {}
потому, что может пригодиться function.name (имя класса) |
nerv_,
Ну не знаю. Однажды я брал так имя класса, когда делал одному из базовых классов метод который выдает всю цепочку наследования. Других использований имени класса не было нужно ни разу. К тому же я пишу на TypeScript (в больших проектах сильно помогают интерфейсы), там в генерируемых им классах имен в функции-конструкторе нет. |
Кстати про TypeScript, я заметил что если писать обычный js код, то idea и webshtorm понимают интерфейсы написанные на TypeScript. Так что теоретически можно оттуда тока интерфейсы брать :)
|
На примере Васи и Пети - все предельно понятно, даже про прототипы уже прочитал и тоже вообщем-то понял. В данном случае мы переопределили объект SomeConctructor, добавив в него метод возвращающий имя. К конкретному коду никаких вопросов нет.
Но не понимаю как это применить к моему случаю. у меня сейчас можно сказать что существует уже 1 палитра с кучей переменных и функций их обработки, а хочу я чтобы для каждого canvas своя палитра создавалась, со своими переменными и функциями. т.е. относительно вашего примера, нужно его усложнить так: задан объект вася: var vasia = {
name: "Vasia O_O",
age: 30,
friends: vasiaFriends
}
var vasiaFriends = ["Egor","Igor","SexyBitch"]
function addAge(){
vasia.age++
}
function addFriends(name){
vasiaFriends.push(name)
}
как теперь мне создать 2 васи и добавить одному из них нового друга, а другому увеличить возраст? |
Цитата:
var SomeConstructor = function(name) {
this.name = name;
this.getName=function(){
return this.name;
};
};
? |
Цитата:
function Person(options) {
this.name = options.name;
this.age = options.age;
this.friends = options.friends;
}
Person.prototype.addAge = function() { this.age++ }
Person.prototype.addFriends = function(name) { this.friends.push(name) }
var vasia1 = new Person({
name: "Vasia 1",
age: 30,
friends: ["Egor","Igor","SexyBitch"]
});
var vasia2 = new Person({
name: "Vasia 2",
age: 30,
friends: ["Egor","Igor","SexyBitch"]
});
vasia1.addFriends('New friend');
vasia2.addAge();
alert( JSON.stringify(vasia1,'',2) );
alert( JSON.stringify(vasia2,'',2) );
|
var SomeConstructor = function(name, age, friends) {
this.name = name;
this.age = age;
this.friends = friends;
};
SomeConstructor.prototype.getName = function () {
return this.name;
};
SomeConstructor.prototype.addAge = function () {
return this.age++;
};
SomeConstructor.prototype.addFriends = function (friend) {
return this.friends.push(friend);
};
var some1 = new SomeConstructor("a", 30, []);
var some2 = new SomeConstructor("b", 30, []);
some1.addAge();
some2.addFriends("gosha");
alert(JSON.stringify(some1,'',2));
alert(JSON.stringify(some2,'',2))
Эх, долго писал :( |
Цитата:
|
| Часовой пояс GMT +3, время: 20:56. |
|