Должен ли я использовать IIFE или окно загрузки для инициализации?

Работали оба следующих фрагмента кода:

Использование IIFE в файле js:

(function initialize() {
  txtInput = document.getElementById('txtInput');
  txtResult = document.getElementById('txtResult');

  txtInput.value = "0";
  txtResult.value = "0";

}());

Вызов initialize() для события загрузки окна в html-файле:

window.addEventListener('load', initialize, false);

Является ли один лучший подход, чем другие; с точки зрения производительности или иным образом? В настоящее время я больше склоняюсь к добавлению прослушивателя событий к объекту окна, потому что он более читабелен.

Источник

3 ответа

Решение

Это зависит от того, когда вы хотите запустить код. Если вы хотите, чтобы код выполнялся как можно скорее, вы можете использовать IIFE, но на самом деле нет смысла использовать IIFE, если вы не используете его для защиты своих переменных и / или не загрязняете глобальную область.

(function initialize() {
    // do somthing
}());

или же

// do somthing

будет выполняться в тот же момент времени.

Если вы хотите отложить выполнение, веб-разработчики обычно используют три момента времени. <script>внизу, DOMContentLoad и window.onload.

  • <script>s внизу будет выполняться после их получения с сервера.
  • DOMContentLoaded в основном выполнить, как только </html> был прочитан парсером HTML.
  • очень упрощенный window.onload выполняется после всех CSS, <img>эс и <script>s были загружены.

Обратите внимание, что на самом деле, с такими атрибутами, как async а также defer на <script>с, это сложнее,. Вот почему существует множество доступных загрузчиков ресурсов.

Источник

Вероятно, важен результат каждого подхода, а не производительность. Первый подход запускается немедленно, в то время как второй ждет, пока DOM не будет готов. Конечный результат заключается в том, что при первом подходе вы можете получить неопределенное значение как для textInput, так и для textResult, если только вы не разместите скрипт в нижней части страницы.

Источник

IIFE в script элемент (встроенный или внешний загруженный) непосредственно перед закрытием body Элемент, безусловно, кажется самым умным. Это чертовски смущает простых людей.

document.addEventListener('DOMContentLoaded', function() ... это легко понять. Это почти простой английский: событие слушает загруженный контент DOM. Итак, пуф, величество ушло. Обратите внимание, что это отличается от window onload,

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

Источник
Другие вопросы по тегам