Question

我刚开始small online CAD demo的乐趣和学习。它完全符合我的意图，但现在我想改进代码，而且我不确定如何将当前面向函数的代码转换为面向对象的代码。这是我到目前为止的一小部分代码：

// 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 set之后需要。

否则你可以编辑原型（更好）：

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

面向对象的Javascript

1 个答案: