javascript - 如何使用多个 ID 重构这种颜色变化

Question

如何在普通 JS 中使其更简单？目前它是相似元素的 4 倍:

function display_clear(){
    red = document.getElementById("red");
    red.style.backgroundColor = default_shadow;
    red.style.boxShadow = default_background;
    blue = document.getElementById("blue");
    blue.style.backgroundColor = default_shadow;
    blue.style.boxShadow = default_background;
    green = document.getElementById("green");
    green.style.backgroundColor = default_shadow;
    green.style.boxShadow = default_background;
    orange = document.getElementById("orange");
    orange.style.backgroundColor = default_shadow;
    orange.style.boxShadow = default_background;

Answer 1

当尝试重构一遍又一遍做同样事情的代码时，您必须问自己这个问题:“我重复的指令是什么，变量是什么？”

orange = document.getElementById("orange");
orange.style.backgroundColor = default_shadow;
orange.style.boxShadow = default_background;

在这种特殊情况下，这组指令是重复的，这意味着它可以被隔离。现在你必须考虑变量。它认为唯一的变化因素是颜色的名称，作为一个字符串。然后，您可以编写一个函数来完成这组特定的任务，同时考虑不同的因素:

function setBackground (color) {
  let element = document.getElementById(color);
  element.style.backgroundColor = default_shadow;
  element.style.boxShadow = default_background;
}

然后你可以调用你的函数4次，它会执行完全相同的代码

setBackground("red");
setBackground("blue");
setBackground("green");
setBackground("orange");

但是，我认为这是一种不好的做法，因为代码会再次重复。如果将来某个时候您的颜色会发生变化，您必须在代码中找到调用此函数的特定位置，并修改调用它的颜色。 这通常被视为基本做法。您希望将您的数据与使用此数据的代码隔离开来。

你有一个颜色列表。你想到的是:我可以把这些颜色放在一个数组中!是的，在这种情况下，这将是我认为的最佳解决方案。

// where you define the constants being used by your code
let colors = ["red", "blue", "green", "orange"];

// somewhere else, where you want to call setBackgound()
colors.forEach(color => {
  setBackground(color);
});

这样，如果您需要添加颜色，或者可能更改逻辑:您现在可以从服务器获取颜色，因为这就是您的应用现在的工作方式。 使用数据的部分将保持不变:逻辑将保持不变。您只需更改获取颜色的方式。