Question

在我的迷宫游戏应用程序中，我具有通过添加/删除边框来更改迷宫中的墙壁的功能。到目前为止，这是我这样做的方法：

在我的gameView.js文件中：

export const changeWalls = (addOrRemove, side, ...boxes) => {
    const boxEls = getBoxArrEl(...boxes);
    boxEls.forEach((e) => {
        if(addOrRemove === "add") {
            e.classList.add(side);
        } else {
            e.classList.remove(side);
        }
    });
};

在我的Index.js（控制器）文件中：

    gameView.changeWalls(strings.add, strings.borderLeft, 15, 6);
    gameView.changeWalls(strings.add, strings.borderTop, 28);
    gameView.changeWalls(strings.add, strings.borderRight, 5, 14);
    gameView.changeWalls(strings.add, strings.borderBottom, 22);
    gameView.changeWalls(strings.remove, strings.borderBottom, 8);
    gameView.changeWalls(strings.remove, strings.borderRight, 4, 21, 28);
    gameView.changeWalls(strings.remove, strings.borderTop, 14);
    gameView.changeWalls(strings.remove, strings.borderLeft, 5, 22, 29);

上面的代码只是许多墙壁更改的一小段，因为每1.5秒重复一次。如您所见，这不是一种非常优雅的方式，并且并没有真正遵循“干”的原则。

作为对此的一种解决方案，我正在尝试一种方法，可以通过使用解构结合rest参数来重新创建以上内容。我正在尝试实现类似以下内容（gameView.js文件）：

export const changeWallsAdd = ([side, ...boxes]) => {
    const boxEls = getBoxArrEl(...boxes);
    boxEls.forEach((e) => {
            e.classList.add(side);
    });
};

export const changeWallsRemove = ([side, ...boxes]) => {
    const boxEls = getBoxArrEl(...boxes);
    boxEls.forEach((e) => {
            e.classList.remove(side);
    });
};

index.js文件：

 gameView.changeWallsAdd(
[strings.borderLeft, 15, 6], 
[strings.borderTop, 28], 
[strings.borderRight, 5, 14], 
[strings.borderBottom, 22]);
    
     gameView.changeWallsRemove(
[strings.borderBottom, 8], 
[strings.borderRight, 4, 21, 28], 
[strings.borderTop, 14], 
[strings.borderLeft, 5, 22, 29]);

上面的代码适用于传入的第一个参数（[strings.borderLeft，15、6]和[strings.borderBottom，8]），但不适用于以下参数。我并不希望这能做到诚实，但我只是想展示自己想要达到的目标。

关于如何实现这样的目标的任何想法？预先感谢！

Answer 1

您可以使用一个对象将所有边界作为一个边界传递。

export const changeWalls = (addOrRemove, bordersBoxes) => {
    Object.keys(bordersBoxes).forEach((side) => {
      const boxEls = getBoxArrEl(bordersBoxes[side]);
      boxEls.forEach((e) => {
        if(addOrRemove === "add") {
            e.classList.add(side);
        } else {
            e.classList.remove(side);
        }
      });
    });
};
    
    
  gameView.changeWalls(strings.add, {
    strings.borderLeft: [15, 6],
    strings.borderTop: [28],
    strings.borderRight: [5, 14],
    strings.borderBottom: [22]
  });

此外，它将允许您使用同一功能仅更改一个或多个边框。

更多详细信息：

您可以传递一个对象（在这种情况下是一种地图），该对象将边框名称用作键，并将需要更改的框的数组用作值。由于它不包含硬编码的检查，因此该对象还会丢失某些属性：

  gameView.changeWalls(strings.add, {
    strings.borderLeft: [15, 6],
    strings.borderBottom: [22]
  });

将多个数组作为参数传递给函数

1 个答案: