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

Question

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

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

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

Мне интересно, будет ли это возможно просто создать экземпляры «block'-объекта. Таким образом, у меня будет: объект, называемый «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 (потому что мы не проходили в споре или 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 
    } 
}