使用OOP减少代码并使其可重用

Question

我正在创建一个应用程序，我对如何制作应用程序有疑问。

• 您可以选择一个数字来确定两个相同圆圈的时间间隔（以分钟为单位）。 （创建单独的按钮以增加和减少每个圆圈的时间）
• 随着时间的推移，第一个圆圈会填满，直到第一个圆圈的倒计时达到0分钟。
• 现在第二个相同的圆圈将开始倒计时，并根据您给它的初始时间填满。

我已将所有相应的DOM元素（圆圈，用于递增/递减时间的按钮）链接到为第一个圆圈编写的函数和事件处理程序，并且它完美运行。第二个圆圈基本上是完全相同的东西，除了它有一个不同的button元素用于它的事件，当然它是一个不同的圆圈。

如果我复制并粘贴我的所有代码，只需将与圆圈1相关的变量和函数名称更改为圆圈2的新变量，它就可以完美地运行。这似乎非常重复，我确信有更好的方法可以解决这个问题。

我想到的是OOP。因此，当我按下此按钮时，不应该说circle1或circle2应该填满，我可以说当我按下与每个圆圈相关的THIS按钮时，此圆圈填满。我的想法是对的吗？ OOP是我问题的答案吗？

Answer 1

如果你可以使用代码重复，这是一个很好的开始。您需要做的是重构：

查找完全重复的代码部分，如果可能，将它们提取到一个函数中。

然后查找您正在执行var1和var2等操作的代码部分，并考虑在数组循环，生成器函数或者循环中抽象重复的方法OOP类＆amp;实例模式。

随着你的进展，你会注意到你的代码在功能上是相同的，但更容易推理和阅读。

也不要害怕从空白文件重新开始！