Как написать правильный код ООП на JavaScript?

Question

Я играю с элементом HTML5 canvas, использую JS, чтобы нарисовать на нем несколько прямоугольников, а затем переместить их, изменив размер и цвета и т. Д. В настоящее время я использую в основном нативный JS, с jQuery для плагина jCanvas для рисования фигур. на холсте. Это все работает хорошо, но я думаю, что код можно улучшить.

В настоящее время я храню все свойства прямоугольника в обычных переменных, например:

block1Height = 50;
block1Width = 50;
block1Color = '#000000';
block1X = 200;
block1Y = 100;
block2Height = 50;
block2Width = 50;
etc..

Мне интересно, можно ли было бы просто создать экземпляры объекта block. Таким образом, у меня будет: объект с именем «блок», со свойствами «высота», «ширина», «цвет» и т. Д. И затем каждый раз, когда я создаю экземпляр этого объекта, он имеет свойства блока по умолчанию.

То же самое касается функций, я хотел бы сделать что-то вроде:

$block1.moveX(-100);

Возможно ли это в JS? Как правильно это сделать?

Answer 1

Вы можете создать функцию конструктора Block, что-то вроде этого:

var Block = function(width, height) {
    this.width = width || 50; //50 is the default
    this.height = height || 50; //50 is the default
    this.moveX = function(x) {
        console.log("Moving by " + x);
    }
};

Затем вы можете создавать новые экземпляры класса "Блок" с помощью оператора new:

var block1 = new Block();
block1.moveX(100); //Will print "Moving by 100"

Выше будет создан новый экземпляр Block с width и height из 50 (потому что мы не передали аргумент width или height).Чтобы создать больший Block, вы можете сделать:

var block2 = new Block(100, 100);

Обратите внимание, что (как указано в комментариях) использование this.moveX = function не очень эффективно.Это означает, что каждый экземпляр Block должен иметь в памяти копию функции moveX.Вы можете улучшить это, добавив метод moveX к prototype:

Block.prototype.moveX = function(x) {
    console.log("Moving by " + x);
}

Таким образом, ни у одного из экземпляров Block нет копии метода.Когда вы вызываете его, сам экземпляр проверяется, но свойство с именем moveX не найдено, поэтому вместо него просматривается prototype.Существует одна копия метода, совместно используемая всеми экземплярами.

Answer 2

да, в javascript вы можете создать объект json, например: -

var b={
    blockheight:100,
    blockwidth:100,
    moveX:function(posx){
    //code goes here
    }
}