如何删除以下方法中的重复代码

关闭。这个问题需要更加关注。它目前不接受答案。
**想改进这个问题吗？**编辑这篇文章，更新这个问题，使它只关注一个问题。

3小时前关门了。
改进这个问题

$("#threeToThree").click(function() {
  playSound("Start");
  executeTimer();
  var nextColor = arrangeThreeToThreeColors();

  $("#grid .btn").click(function() {
    animatePress(this);
    if ($(this).attr("id") === nextColor) {
      playSound("Success");
      totalPoint += 10;
      console.log("Total Point: " + totalPoint);
      seenColors = [];
      nextColor = arrangeThreeToThreeColors();
  } else {
      playSound("Failure");
}
});
});

$("#fourToFour").click(function() {
  playSound("Start");
  executeTimer();
  var nextColor = arrangeFourToFourColors();

  $("#grid .btn").click(function() {
   animatePress(this);
   if ($(this).attr("id") === nextColor) {
     playSound("Success");
     totalPoint += 10;
     console.log("Total Point: " + totalPoint);
     seenColors = [];
     nextColor = arrangeFourToFourColors();
} else {
  playSound("Failure");
}
});
});

$("#fiveToFive").click(function() {
  playSound("Start");
  executeTimer();
  var nextColor = arrangeFiveToFiveColors();

  $("#grid .btn").click(function() {
   animatePress(this);
   if ($(this).attr("id") === nextColor) {
     playSound("Success");
     totalPoint += 10;
     console.log("Total Point: " + totalPoint);
     seenColors = [];
     nextColor = arrangeFiveToFiveColors();
}  else {
     playSound("Failure");
}
});
});

function arrangeThreeToThreeColors() {
  for (let i = 0; i <= 12; i++) {
  let mod = i % 5;
   if (mod === 0 || mod === 1 || mod === 2) {
    var randomColor = getValidColor();
    manipulateButtons(i, randomColor);
    seenColors.push(randomColor);

} else {
  continue;
    }
    }
   var nextColor = getRandomColor(seenColors);
   $("#next").attr("class", "btn next " + nextColor);
   return nextColor;
    }

function arrangeFourToFourColors() {
  for (let i = 0; i <= 18; i++) {
   let mod = i % 5;
   if (mod === 0 || mod === 1 || mod === 2 || mod === 3) {
     var randomColor = getValidColor();
     manipulateButtons(i, randomColor);
     seenColors.push(randomColor);

} else {
  continue;
   }
  }
 var nextColor = getRandomColor(seenColors);
 $("#next").attr("class", "btn next " + nextColor);
 return nextColor;
 }

function arrangeFiveToFiveColors() {
  for (let i = 0; i <= 24; i++) {
   var randomColor = getValidColor();
   manipulateButtons(i, randomColor);
   seenColors.push(randomColor);
 }
   var nextColor = getRandomColor(seenColors);
   $("#next").attr("class", "btn next " + nextColor);
   return nextColor;
 }

我怎样才能使这个代码清晰？使此代码更具可读性的最佳方法是什么？有没有办法只在一个方法中实现#三对三.click（）、#四对四.click（）和#五对五.click（）内容？我可以将arrangethreetothreecolors（）、arrangefourtofourcolors（）、arrangefivetofivecolors（）的内容组合在一个方法中吗？

在代码更新过程中添加注解，选择最适合您的代码重构部分，您可以根据需要忽略重置或修改。

1.使用常量代替字符串

const SoundStatus = {
    Start: "Start",
    Success: "Success",
    Failure: "Failure"
};

2.全局变量和使用单点更新。

单点更新，对于简单的更新来说似乎太多了。但这在调试时会很有帮助，因为您知道变量在哪里更新。

/**
 * I couldn't get the context of these 2 variables; assuming them to be global variables
 */

let seenColors = [];
let totalPoint = 0;

/**
 * Using Single setter to update global variables; With this it will be easier to track there changes
 */

function UpdateTotalPoint() {
    totalPoint += 10;
}

function ResetSeenColors() {
    seenColors = [];
}

function UpdateSeenColors(color) {
    seenColors.push(color);
}

3.删除重复代码

/**
 * Abstract attribute update to single function
 */

function updateNextAttribute() {
    let nextColor = getRandomColor(seenColors);
    $("#next").attr("class", "btn next " + nextColor);
    return nextColor;
}

function ManipulateButtonAndUpdateSeenColorsWithRandomValue(value) {
    const randomColor = getValidColor();
    manipulateButtons(value, randomColor);
    UpdateSeenColors(randomColor);
}

/**
 * Remove contiune on else, as there is no statements to be executed of that; Its understood 
 */

function arrangeFiveToFiveColors() {
    for (let i = 0; i <= 24; i++) {
        ManipulateButtonAndUpdateSeenColorsWithRandomValue(i);
    }
    return updateNextAttribute();
}

function arrangeFourToFourColors() {
    for (let i = 0; i <= 18; i++) {
        let mod = i % 5;
        if (mod === 0 || mod === 1 || mod === 2 || mod === 3) {
            ManipulateButtonAndUpdateSeenColorsWithRandomValue(i);
        }
    }
    return updateNextAttribute();
}

function arrangeThreeToThreeColors() {
    for (let i = 0; i <= 12; i++) {
        let mod = i % 5;
        if (mod === 0 || mod === 1 || mod === 2) {
            ManipulateButtonAndUpdateSeenColorsWithRandomValue(i);
        }
    }
    return updateNextAttribute();
}

/**
 * Grid Updation
 * arrangeColor; will be arrangeThreeToThreeColors, arrangeFourToFourColors or arrangeFiveToFiveColors
 * 
 */

function AnimateGridButton(nextColor, arrangeColor, context) {
    $("#grid .btn").click(function () {
        animatePress(context);
        if ($(context).attr("id") === nextColor) {
            playSound(SoundStatus.Success);
            UpdateTotalPoint();
            console.log("Total Point: " + totalPoint);
            ResetSeenColors();
            nextColor = arrangeColor();
        } else {
            playSound(SoundStatus.Failure);
        }
    });
}

/**
 * Updating click listiner of 3-3, 4-4 & 5-5
 */

$("#threeToThree").click(function () {
    initilize();
    const nextColor = arrangeThreeToThreeColors();
    AnimateGridButton(nextColor, arrangeThreeToThreeColors, this);
});

$("#fourToFour").click(function () {
    initilize();
    const nextColor = arrangeFourToFourColors();
    AnimateGridButton(nextColor, arrangeFourToFourColors, this);
});

$("#fiveToFive").click(function () {
    initilize();
    const nextColor = arrangeFiveToFiveColors();
    AnimateGridButton(nextColor, arrangeFiveToFiveColors, this);
});

/**
 * Abstracting inital Start sound and executeTimer
 */

function initilize() {
    playSound(SoundStatus.Start);
    executeTimer();
}

重构后的最终代码

const SoundStatus = {
    Start: "Start",
    Success: "Success",
    Failure: "Failure"
};

let seenColors = [];
let totalPoint = 0;

function updateTotalPoint() {
    totalPoint += 10;
}

function resetSeenColors() {
    seenColors = [];
}

function updateSeenColors(color) {
    seenColors.push(color);
}

function updateNextAttribute() {
    let nextColor = getRandomColor(seenColors);
    $("#next").attr("class", "btn next " + nextColor);
    return nextColor;
}

function ManipulateButtonAndUpdateSeenColorsWithRandomValue(value) {
    const randomColor = getValidColor();
    manipulateButtons(value, randomColor);
    updateSeenColors(randomColor);
}

function arrangeFiveToFiveColors() {
    for (let i = 0; i <= 24; i++) {
        ManipulateButtonAndUpdateSeenColorsWithRandomValue(i);
    }
    return updateNextAttribute();
}

function arrangeFourToFourColors() {
    for (let i = 0; i <= 18; i++) {
        let mod = i % 5;
        if (mod === 0 || mod === 1 || mod === 2 || mod === 3) {
            ManipulateButtonAndUpdateSeenColorsWithRandomValue(i);
        }
    }
    return updateNextAttribute();
}

function arrangeThreeToThreeColors() {
    for (let i = 0; i <= 12; i++) {
        let mod = i % 5;
        if (mod === 0 || mod === 1 || mod === 2) {
            ManipulateButtonAndUpdateSeenColorsWithRandomValue(i);
        }
    }
    return updateNextAttribute();
}

function AnimateGridButton(nextColor, arrangeColor, context) {
    $("#grid .btn").click(function () {
        animatePress(context);
        if ($(context).attr("id") === nextColor) {
            playSound(SoundStatus.Success);
            updateTotalPoint();
            console.log("Total Point: " + totalPoint);
            resetSeenColors();
            nextColor = arrangeColor();
        } else {
            playSound(SoundStatus.Failure);
        }
    });
}

$("#threeToThree").click(function () {
    initilize();
    const nextColor = arrangeThreeToThreeColors();
    AnimateGridButton(nextColor, arrangeThreeToThreeColors, this);
});

$("#fourToFour").click(function () {
    initilize();
    const nextColor = arrangeFourToFourColors();
    AnimateGridButton(nextColor, arrangeFourToFourColors, this);
});

$("#fiveToFive").click(function () {
    initilize();
    const nextColor = arrangeFiveToFiveColors();
    AnimateGridButton(nextColor, arrangeFiveToFiveColors, this);
});

function initilize() {
    playSound(SoundStatus.Start);
    executeTimer();
}

在所有可能的抽象之后，我们只剩下针对每个函数的特定代码；除了 ManipulateButtonAndUpdateSeenColorsWithRandomValue （请给我一个合适的名字，符合要求）。对于这个问题，仍然可以进行几行抽象 arrageColor 相关职能。既然我对你的要求没有一个完整的了解，那就留给你吧。

如何删除以下方法中的重复代码

1条答案

1.使用常量代替字符串

2.全局变量和使用单点更新。

3.删除重复代码

重构后的最终代码

相关问题

热门标签

最新问答