Использование ООП для уменьшения кода и его повторного использования

Question

Я создаю приложение, и у меня есть вопрос о том, как я его делаю.

• Вы сможете выбрать число, которое определяет время прохождения в минутах для двух одинаковых кругов. (Отдельные кнопки создаются для увеличения и уменьшения времени для каждого круга)
• По прошествии времени первый круг заполняется до тех пор, пока обратный отсчет для первого круга не достигнет 0 минут.
• Теперь второй идентичный круг начнет обратный отсчет и заполнится также на основе начального времени, которое вы ему дали.

Я связал все соответствующие элементы DOM (круг, кнопки для увеличения/уменьшения времени) для функций и обработчиков событий, написанных для первого круга, и он отлично работает. Второй круг по существу является тем же самым, за исключением того, что у него есть другой элемент button для его событий, и, конечно, это другой круг.

Если я копирую и вставляю весь свой код и просто изменяю переменные и имена функций, связанные с кругом 1, новым для круга 2, он будет работать отлично. Это кажется очень повторяющимся, и я уверен, что есть лучший способ сделать это.

Что приходит в голову, это ООП. Поэтому вместо того, чтобы говорить, что circle1 OR circle2 должен заполняться, когда я нажимаю эту кнопку, я могу просто сказать, что этот круг заполняется, когда я нажимаю эту кнопку, связанную с каждым кругом. Я прав, думая? Является ли ООП ответом на мой вопрос здесь?

Answer 1

Если вы можете заставить его работать с дублированием кода, это отличный старт. То, что вам нужно сделать, называется рефакторинг:

Ищите части кода, которые точно повторяются и, если возможно, извлекают их в одну функцию.

Тогда обратите внимание на части кода, где вы делаете вещи, как var1 и var2, и думать о том, чтобы абстрагироваться, что повторение в любом цикле по массиву, функции генератора, или объектно-ориентированного программирования класса & шаблонов экземпляра.

Как вы пойдете, вы заметите, что ваш код будет функционально таким же, но гораздо проще рассуждать и читать.

Также не бойтесь повторного запуска из пустого файла!