Блог

Главная - Вопросы по программированию - Несколько функций Javascript против больших функций

Несколько функций Javascript против больших функций

#javascript

#javascript

Вопрос:

если у меня есть 10 кнопок, мне лучше иметь прослушиватель событий, который указывает на каждую кнопку и вызывает другую функцию:

 hdlButton1.addEventListener("click", fButton1Clicked);
hdlButton2.addEventListener("click", fButton2Clicked);
etc.

function fButton1Clicked(event) {
    //code to execute upon button 1 click
}
function fButton2Clicked(event) {
    //code to execute upon button 1 click
}

Или все щелчки указывают на одну функцию:

  document.addEventListener("click", fButtonClick);

 function fButtonClick(event) {
     switch (event.target.id) {
         case "btn1":
              //code to handle button 1 click
              break;
          case "btn2":
              //code to handle button 2 click
              break;
        }
}

Каковы последствия для производительности при наличии нескольких функций для обработки различных событий по сравнению с наличием одной функции, которая различает события и обрабатывает их соответствующим образом?

(Спасибо)

Комментарии:

1. Нажатие занимает время, несопоставимое со временем, необходимым для перехода к определенному коду, какой бы из двух методов вы ни использовали. Это не проблема.

2. Оба фрагмента выполняют совершенно разные функции. Сравнивать их не имеет особого смысла. Кроме того, влияние на производительность, вероятно, составит несколько наносекунд, ничего существенного.

3. Что проще — добавить новую кнопку и изменить логику одной функции, потенциально приводящей к ошибке для еще десяти кнопок, или добавить новую функцию, у которой не будет этой проблемы?

4. Зачем использовать прослушиватель событий, когда для этого можно использовать on click?

5. @SudoKid onclick атрибут HTML добавляет прослушиватель событий. Если вы имели в виду onlcick свойство JS на DOM-узлах, то это все равно добавляет прослушиватель событий. Единственное, что вы не можете добавить более одного прослушивателя событий по этому маршруту.

Ответ №1:

С точки зрения производительности всегда рекомендуется иметь как можно меньше слушателей, особенно если вы динамически добавляете / удаляете кнопки или элементы, к которым подключены слушатели.

То, что вы сделали во втором случае, называется делегированием событий, и это действительно полезно, когда у вас есть динамически созданные элементы и вы хотите, чтобы прослушиватель запускался на узлах, созданных после добавления прослушивателя.

Разница в производительности не будет заметна, если только она не нужна для высокопроизводительного приложения (например. игра), поэтому обычно вам следует выбирать то, что более читаемо, или делегировать, если у вас есть динамически изменяющиеся элементы.

На самом деле я создал небольшую библиотеку, чтобы упростить реализацию делегирования событий для созданных элементов: https://github.com/Cristy94/dynamic-listener

Ответ №2:

Влияние на производительность довольно незначительно на современных компьютерах, если только у вас нет неоправданно большого количества кнопок и функций. В первую очередь лучше беспокоиться о удобочитаемости кода и ремонтопригодности — думайте о проблемах с производительностью только после того, как у вас появятся доказательства того, что это серьезная проблема.

Ответ №3:

Разница во времени незначительна в обоих случаях, однако я думаю, что использование разных функций повысило бы производительность, поскольку на один оператор перехода меньше.

Что касается удобочитаемости кода, я использую одну функцию, когда кнопки выполняют одинаковую работу с разными параметрами, и разные функции, когда задания разные.