Объект, ориентированный на Javascript

Question

Я только что сделал small online CAD demo для удовольствия и обучения. Он отлично работает для моих намерений, но теперь я хочу улучшить код, и я не уверен, как преобразовать текущий функционально-ориентированный код в Object Oriented. Это небольшая часть кода я до сих пор:

// DATA 
var lines = [[]]; 
var circles = [{}]; 
var rectangles = [{}]; 

// Drawing functions 
function drawLine(from, to){} 
function drawCircle(center, radius){} 
function drawRectangle(from, size){} 

// Adding elements to the render chain 
function addLine(e){} 
function addCircle(e){} 
function addRectangle(e){} 

Чтобы получить его объектно-ориентированного, я могу видеть два различных способа. Первый из них состоит в том, чтобы сгруппировать их по домену. Таким образом, существует множество функций, которые могут быть повторно использованы в каждом из классов:

var lines = [[]]; 
... 

var draw = function(){ 
    var all() = function(){} 
    var lines() = function(){} 
    var circles() = function(){} 
    var rectangles() = function(){} 
    } 

var add = function(){ ... } 
... 

Другой является сгруппировать их по типу . Это то, что я читал раньше о OO, так как это представление моделей реального мира, и это гораздо более интуитивно понятно. Лучшая часть заключается в том, что у вас есть все детали для rectangle в одной и той же небольшой фрагмент кода:

var rectangle = function(){ 
    var x, y, width, height; 
    var draw = function(){} 
    var add = function(){} 
    } 
... 

Какой следует ближе лучшие образцы OO?

Answer 1

Внимание, здесь, ваши методы являются частными:

var draw = function(){}; 
var add = function(){}; 

Чтобы сделать их достоянием общественности:

this.draw = function(){}; 
this.add = function(){}; 

Примечание: соблюдать строгий шаблон,; необходимо после набора var.

Иначе вы можете редактировать прототип (лучше):

function Rectangle() { 
    var x, y, width, height; 
} 
Rectangle.prototype.draw = function();