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

5f0d552i  于 2021-09-13  发布在  Java
关注(0)|答案(1)|浏览(297)

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

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

  1. $("#threeToThree").click(function() {
  2.   playSound("Start");
  3.   executeTimer();
  4.   var nextColor = arrangeThreeToThreeColors();
  6.   $("#grid .btn").click(function() {
  7.     animatePress(this);
  8.     if ($(this).attr("id") === nextColor) {
  9.       playSound("Success");
  10.       totalPoint += 10;
  11.       console.log("Total Point: " + totalPoint);
  12.       seenColors = [];
  13.       nextColor = arrangeThreeToThreeColors();
  14.   } else {
  15.       playSound("Failure");
  16. }
  17. });
  18. });
  20. $("#fourToFour").click(function() {
  21.   playSound("Start");
  22.   executeTimer();
  23.   var nextColor = arrangeFourToFourColors();
  25.   $("#grid .btn").click(function() {
  26.    animatePress(this);
  27.    if ($(this).attr("id") === nextColor) {
  28.      playSound("Success");
  29.      totalPoint += 10;
  30.      console.log("Total Point: " + totalPoint);
  31.      seenColors = [];
  32.      nextColor = arrangeFourToFourColors();
  33. } else {
  34.   playSound("Failure");
  35. }
  36. });
  37. });
  39. $("#fiveToFive").click(function() {
  40.   playSound("Start");
  41.   executeTimer();
  42.   var nextColor = arrangeFiveToFiveColors();
  44.   $("#grid .btn").click(function() {
  45.    animatePress(this);
  46.    if ($(this).attr("id") === nextColor) {
  47.      playSound("Success");
  48.      totalPoint += 10;
  49.      console.log("Total Point: " + totalPoint);
  50.      seenColors = [];
  51.      nextColor = arrangeFiveToFiveColors();
  52. }  else {
  53.      playSound("Failure");
  54. }
  55. });
  56. });
  58. function arrangeThreeToThreeColors() {
  59.   for (let i = 0; i <= 12; i++) {
  60.   let mod = i % 5;
  61.    if (mod === 0 || mod === 1 || mod === 2) {
  62.     var randomColor = getValidColor();
  63.     manipulateButtons(i, randomColor);
  64.     seenColors.push(randomColor);
  66. } else {
  67.   continue;
  68.     }
  69.     }
  70.    var nextColor = getRandomColor(seenColors);
  71.    $("#next").attr("class", "btn next " + nextColor);
  72.    return nextColor;
  73.     }
  75. function arrangeFourToFourColors() {
  76.   for (let i = 0; i <= 18; i++) {
  77.    let mod = i % 5;
  78.    if (mod === 0 || mod === 1 || mod === 2 || mod === 3) {
  79.      var randomColor = getValidColor();
  80.      manipulateButtons(i, randomColor);
  81.      seenColors.push(randomColor);
  83. } else {
  84.   continue;
  85.    }
  86.   }
  87.  var nextColor = getRandomColor(seenColors);
  88.  $("#next").attr("class", "btn next " + nextColor);
  89.  return nextColor;
  90.  }
  92. function arrangeFiveToFiveColors() {
  93.   for (let i = 0; i <= 24; i++) {
  94.    var randomColor = getValidColor();
  95.    manipulateButtons(i, randomColor);
  96.    seenColors.push(randomColor);
  97.  }
  98.    var nextColor = getRandomColor(seenColors);
  99.    $("#next").attr("class", "btn next " + nextColor);
  100.    return nextColor;
  101.  }

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

JavaScript

1条答案

按热度按时间
q1qsirdb

q1qsirdb1#

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

1.使用常量代替字符串

  1. const SoundStatus = {
  2.     Start: "Start",
  3.     Success: "Success",
  4.     Failure: "Failure"
  5. };

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

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

  1. /**
  2.  * I couldn't get the context of these 2 variables; assuming them to be global variables
  3.  */
  5. let seenColors = [];
  6. let totalPoint = 0;
  8. /**
  9.  * Using Single setter to update global variables; With this it will be easier to track there changes
  10.  */
  12. function UpdateTotalPoint() {
  13.     totalPoint += 10;
  14. }
  16. function ResetSeenColors() {
  17.     seenColors = [];
  18. }
  20. function UpdateSeenColors(color) {
  21.     seenColors.push(color);
  22. }

3.删除重复代码

  1. /**
  2.  * Abstract attribute update to single function
  3.  */
  5. function updateNextAttribute() {
  6.     let nextColor = getRandomColor(seenColors);
  7.     $("#next").attr("class", "btn next " + nextColor);
  8.     return nextColor;
  9. }
  11. function ManipulateButtonAndUpdateSeenColorsWithRandomValue(value) {
  12.     const randomColor = getValidColor();
  13.     manipulateButtons(value, randomColor);
  14.     UpdateSeenColors(randomColor);
  15. }
  17. /**
  18.  * Remove contiune on else, as there is no statements to be executed of that; Its understood 
  19.  */
  21. function arrangeFiveToFiveColors() {
  22.     for (let i = 0; i <= 24; i++) {
  23.         ManipulateButtonAndUpdateSeenColorsWithRandomValue(i);
  24.     }
  25.     return updateNextAttribute();
  26. }
  28. function arrangeFourToFourColors() {
  29.     for (let i = 0; i <= 18; i++) {
  30.         let mod = i % 5;
  31.         if (mod === 0 || mod === 1 || mod === 2 || mod === 3) {
  32.             ManipulateButtonAndUpdateSeenColorsWithRandomValue(i);
  33.         }
  34.     }
  35.     return updateNextAttribute();
  36. }
  38. function arrangeThreeToThreeColors() {
  39.     for (let i = 0; i <= 12; i++) {
  40.         let mod = i % 5;
  41.         if (mod === 0 || mod === 1 || mod === 2) {
  42.             ManipulateButtonAndUpdateSeenColorsWithRandomValue(i);
  43.         }
  44.     }
  45.     return updateNextAttribute();
  46. }
  48. /**
  49.  * Grid Updation
  50.  * arrangeColor; will be arrangeThreeToThreeColors, arrangeFourToFourColors or arrangeFiveToFiveColors
  51.  * 
  52.  */
  54. function AnimateGridButton(nextColor, arrangeColor, context) {
  55.     $("#grid .btn").click(function () {
  56.         animatePress(context);
  57.         if ($(context).attr("id") === nextColor) {
  58.             playSound(SoundStatus.Success);
  59.             UpdateTotalPoint();
  60.             console.log("Total Point: " + totalPoint);
  61.             ResetSeenColors();
  62.             nextColor = arrangeColor();
  63.         } else {
  64.             playSound(SoundStatus.Failure);
  65.         }
  66.     });
  67. }
  69. /**
  70.  * Updating click listiner of 3-3, 4-4 & 5-5
  71.  */
  73. $("#threeToThree").click(function () {
  74.     initilize();
  75.     const nextColor = arrangeThreeToThreeColors();
  76.     AnimateGridButton(nextColor, arrangeThreeToThreeColors, this);
  77. });
  79. $("#fourToFour").click(function () {
  80.     initilize();
  81.     const nextColor = arrangeFourToFourColors();
  82.     AnimateGridButton(nextColor, arrangeFourToFourColors, this);
  83. });
  85. $("#fiveToFive").click(function () {
  86.     initilize();
  87.     const nextColor = arrangeFiveToFiveColors();
  88.     AnimateGridButton(nextColor, arrangeFiveToFiveColors, this);
  89. });
  91. /**
  92.  * Abstracting inital Start sound and executeTimer
  93.  */
  95. function initilize() {
  96.     playSound(SoundStatus.Start);
  97.     executeTimer();
  98. }

重构后的最终代码

  1. const SoundStatus = {
  2.     Start: "Start",
  3.     Success: "Success",
  4.     Failure: "Failure"
  5. };
  7. let seenColors = [];
  8. let totalPoint = 0;
  10. function updateTotalPoint() {
  11.     totalPoint += 10;
  12. }
  14. function resetSeenColors() {
  15.     seenColors = [];
  16. }
  18. function updateSeenColors(color) {
  19.     seenColors.push(color);
  20. }
  22. function updateNextAttribute() {
  23.     let nextColor = getRandomColor(seenColors);
  24.     $("#next").attr("class", "btn next " + nextColor);
  25.     return nextColor;
  26. }
  28. function ManipulateButtonAndUpdateSeenColorsWithRandomValue(value) {
  29.     const randomColor = getValidColor();
  30.     manipulateButtons(value, randomColor);
  31.     updateSeenColors(randomColor);
  32. }
  34. function arrangeFiveToFiveColors() {
  35.     for (let i = 0; i <= 24; i++) {
  36.         ManipulateButtonAndUpdateSeenColorsWithRandomValue(i);
  37.     }
  38.     return updateNextAttribute();
  39. }
  41. function arrangeFourToFourColors() {
  42.     for (let i = 0; i <= 18; i++) {
  43.         let mod = i % 5;
  44.         if (mod === 0 || mod === 1 || mod === 2 || mod === 3) {
  45.             ManipulateButtonAndUpdateSeenColorsWithRandomValue(i);
  46.         }
  47.     }
  48.     return updateNextAttribute();
  49. }
  51. function arrangeThreeToThreeColors() {
  52.     for (let i = 0; i <= 12; i++) {
  53.         let mod = i % 5;
  54.         if (mod === 0 || mod === 1 || mod === 2) {
  55.             ManipulateButtonAndUpdateSeenColorsWithRandomValue(i);
  56.         }
  57.     }
  58.     return updateNextAttribute();
  59. }
  61. function AnimateGridButton(nextColor, arrangeColor, context) {
  62.     $("#grid .btn").click(function () {
  63.         animatePress(context);
  64.         if ($(context).attr("id") === nextColor) {
  65.             playSound(SoundStatus.Success);
  66.             updateTotalPoint();
  67.             console.log("Total Point: " + totalPoint);
  68.             resetSeenColors();
  69.             nextColor = arrangeColor();
  70.         } else {
  71.             playSound(SoundStatus.Failure);
  72.         }
  73.     });
  74. }
  76. $("#threeToThree").click(function () {
  77.     initilize();
  78.     const nextColor = arrangeThreeToThreeColors();
  79.     AnimateGridButton(nextColor, arrangeThreeToThreeColors, this);
  80. });
  82. $("#fourToFour").click(function () {
  83.     initilize();
  84.     const nextColor = arrangeFourToFourColors();
  85.     AnimateGridButton(nextColor, arrangeFourToFourColors, this);
  86. });
  88. $("#fiveToFive").click(function () {
  89.     initilize();
  90.     const nextColor = arrangeFiveToFiveColors();
  91.     AnimateGridButton(nextColor, arrangeFiveToFiveColors, this);
  92. });
  94. function initilize() {
  95.     playSound(SoundStatus.Start);
  96.     executeTimer();
  97. }

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

展开查看全部
赞(0）分享  回复(0）举报  2021-09-13
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com