如何使函数在其位置编写代码

时间:2018-04-10 04:08:07

标签: javascript function refactoring

我想要它,以便每当我写这段代码

drawCode(var1,var2,var3);

函数中的代码将放在其位置

Function drawCode(var1,var2,var3) {
    posx + var1 * scale, posy + var2 * scale, var3
}


例如

此代码:

drawTriangle (drawCode(50,20,180));

将成为:

drawTriangle (posx + 50 * scale, posy + 20 * scale, 180);


For Context

我在p5js中创建需要3点x和y的三角形。所有这些我需要与设定的比例相乘并相对于每个三角形位置放置点。我有一个优势,因为我正在用这些三角形制作正方形,这允许我将30 *比例放入变量中。这是我能做的最好的事情:

let triSize = 30 * scale;
triangle(posx - triSize, posy + triSize, posx, posy, posx + triSize, posy + triSize);
triangle(posx + triSize, posy + triSize, posx, posy, posx + triSize, posy - triSize);
triangle(posx - triSize, posy - triSize, posx, posy, posx - triSize, posy + triSize);
triangle(posx - triSize, posy - triSize, posx, posy, posx + triSize, posy - triSize);

理想情况下,我会稍微清理代码并将其转换为:

triangle(placePoint(-30,30),placePoint(0,0),placePoint(30,30))
triangle(placePoint(30,30),placePoint(0,0),placePoint(30,-30))
triangle(placePoint(-30,-30),placePoint(0,0),placePoint(-30,30))
triangle(placePoint(-30,-30),placePoint(0,0),placePoint(30,-30))

这将是一个更优雅的解决方案,特别是如果我希望我的三角形具有更复杂的形状

2 个答案:

答案 0 :(得分:2)

我猜你想要做的是返回多个值并将它们用作另一个函数中的参数。虽然javascript不支持多次返回,但您仍然可以使用以下方法实现此目的:

  1. 在内部函数中返回一个数组,如drawCode = (a,b,c) => [d,e,f],然后将其传播到drawTriangle(...arrayOfdef)

  2. 等参数中
  3. 或者你可以使用函数组合或函数currying之类的东西来组合这两个函数。

答案 1 :(得分:1)

你可以做到的第一种方法是将其降低到基础并让它调用一个实际上用你传入的值调用三角形的函数。

function triangle() {
  console.log(arguments);
}

var scale = 2

function makeTriangle(x, y, x1, y1, x2, y2, x3, y3) {
   var actScale = 30 * scale;
   triangle(x + x1 * actScale, 
            y + y1 * actScale,
            x + x2 * actScale, 
            y + y2 * actScale,
            x + x3 * actScale, 
            y + y3 * actScale);
}

var posx = 1
var posy = 1

makeTriangle(posx, posy, -1, 1, 0, 0, 1, 1)
makeTriangle(posx, posy, 1, 1, 0, 0, 1, -1)
makeTriangle(posx, posy, -1, -1, 0, 0, -1, -1)
makeTriangle(posx, posy, 1, -1, 0, 0, 1, -1)

现在你可以通过返回一个函数并使用posx和posy调用这些函数来更清理它

function triangle() {
  console.log(arguments);
}

function makeTriangle(x1, y1, x2, y2, x3, y3) {
  return function (x, y, scale) {
    var actScale = 30 * scale;
    triangle(x + x1 * actScale, 
            y + y1 * actScale,
            x + x2 * actScale, 
            y + y2 * actScale,
            x + x3 * actScale, 
            y + y3 * actScale);
  }
}

var t1 = makeTriangle(-1, 1, 0, 0, 1, 1)
var t2 = makeTriangle(1, 1, 0, 0, 1, -1)
var t3 = makeTriangle(-1, -1, 0, 0, -1, -1)
var t4 = makeTriangle(1, -1, 0, 0, 1, -1)

var posx = 2
var posy = 2
var scale = 4

t1(posx, posy, scale)
t2(posx, posy, scale)
t3(posx, posy, scale)
t4(posx, posy, scale)

你甚至可以将所有makeTriangle调用组合成一个方法。使用数组并循环遍历它。

function triangle() {
  console.log(arguments);
}


var coords = [
  [-1, 1, 0, 0, 1, 1],
  [1, 1, 0, 0, 1, -1],
  [-1, -1, 0, 0, -1, -1],
  [1, -1, 0, 0, 1, -1]
]

function makeTriangle(x, y, scale) {
  coords.forEach( function(a) {
    var actScale = 30 * scale;
    triangle(x + a[0] * actScale, 
            y + a[1] * actScale,
            x + a[2] * actScale, 
            y + a[3] * actScale,
            x + a[4] * actScale, 
            y + a[5] * actScale);
  })
}




var posx = 2
var posy = 2
var scale = 4

makeTriangle(posx, posy, scale)

最后,无论你如何做,你只需更改复制和粘贴代码的数量和重复,并增加问题的复杂性。并且每个解决方案可能最终使其运行更慢/更快。最后,它实际上取决于目标是什么以及如何使用它。