Question

如何在Vanilla 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);
});

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

Answer 2

尝试一下。

    function setStyle(element_id) {
       var element = document.getElementById(element_id);
       element.style.backgroundColor = default_shadow;
       element.style.boxShadow = default_background;
    }
    function display_clear(){
        ["red", "blue", "green","orange"].forEach(element_id=> setStyle(element_id))
    }

Answer 3

我尝试过，但是你们的解决方案看起来更简洁：

it('Render Campaing TrustKey', () => {
    let wrapper = shallow(<CampaignTrustSticky />);
    expect(wrapper.find('sectaion.pull-up')).not.toBe(null)
});

Answer 4

正如注释中所建议的那样，只需使用类似的功能

function colorChange(elId, bg, shadow) {
}

然后，您在函数中描述要使用这些值进行的操作，然后根据需要多次调用它。

Answer 5

就像@Bergi所说：使用带有参数的函数，然后多次调用它。

挑战在于识别可以按原样重复的代码部分与应针对参数重复的代码部分。可以使用所述参数将“原样”部分移入功能。只能根据您的应用程序的需求来做出此决定。

如果您总是要为元素列表设置相同的颜色和阴影，则可以编写：

function setDefaultAttributes(elementId){
    let box = document.getElementById(elementId);
    box.style.backgroundColor = default_background;
    box.style.boxShadow = default_shadow;
}

// Calling same function multiple times for each color
function display_clear(){
    setDefaultAttributes("red");
    setDefaultAttributes("blue");
    setDefaultAttributes("green");
    setDefaultAttributes("orange");
}

// Alternate: Calling same function for each element of the array
// using the forEach loop    
function display_clear(){
    ["red", "blue", "green", "orange"].forEach(function(element)){
        setDefaultAttributes(element);
    });
}

如果您始终要为所有box元素设置相同的颜色，而不是设置阴影，则应仅将代码中的default_background放在函数中，而阴影将成为参数

假设该函数可以访问default_background变量，则可以编写：

function setBoxAttributes(id, shadow){
    let box = document.getElementById(id);
    box.style.backgroundColor = default_background;
    box.style.boxShadow = shadow;
}

function display_clear(){
    setBoxAttributes("red", default_shadow);
    setBoxAttributes("blue", default_shadow);
    setBoxAttributes("green", default_shadow);
    setBoxAttributes("orange", orange_shadow);
}

如果要在不同情况下设置不同的颜色/阴影组合，则可以编写：

function setBoxAttributes(id, bgColor, shadow){
    let box = document.getElementById(id);
    box.style.backgroundColor = bgColor;
    box.style.boxShadow = shadow;
}

function display_clear(){
    setBoxAttributes("red", default_shadow, default_background);
    setBoxAttributes("blue", blue_shadow, default_background);
    setBoxAttributes("green", default_shadow, green_background);
    setBoxAttributes("orange", default_shadow, default_background);
}

Answer 6

尝试一下：

function display_clear() {
  var colors = ['red', 'blue', 'green', 'orange'];
  var default_shadow = 'red';
  var default_background = 'yellow';
  colors.forEach((color) => {
    console.log(color);
    var element = document.getElementById(color);
    element.style.backgroundColor = default_shadow;
    element.style.boxShadow = default_background;
  });
}

Answer 7

您可以在此处通过更改元素使用for循环

var elements = ["red","blue","green","orange"]; // make an array of elements name 
for(var i=0;i<elements.length;i++){
    var elem = document.getElementById(elements[i]);   // getting all elemennts one by one
    elem.style.backgroundColor = default_shadow;
    elem.style.boxShadow = default_background;
}

希望获得帮助，您也可以使用函数

function setElementStyle(id){
     var elem = document.getElementById(id);   // getting all elemennts one by one
    elem.style.backgroundColor = default_shadow;
    elem.style.boxShadow = default_background;
}

//call the function one by one
setElementStyle("red");
setElementStyle("blue");
setElementStyle("green");
setElementStyle("orange");

如何使用多个ID重构此颜色更改

7 个答案: