javascript - vanilla - ¿Debería usar IIFE o Window Onload para inicializar?

window.onload=function() javascript

Question

Los dos siguientes fragmentos de código funcionaron:

Usando IIFE en el archivo js:

(function initialize() {
txtInput = document.getElementById(''txtInput'');
txtResult = document.getElementById(''txtResult'');
txtInput.value = "0";
txtResult.value = "0";
}());

Llamar a initialize () en el evento de carga de la ventana en el archivo html:

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

¿Es uno un mejor enfoque que otro? en términos de rendimiento o de lo contrario? Tal como están las cosas en este momento, me inclino más a agregar el detector de eventos al objeto ventana, porque es más legible.

Answer 1

Probablemente el resultado de cada enfoque importa, no el rendimiento. La primera aproximación se ejecuta inmediatamente, mientras que la segunda espera hasta que dom esté lista. El resultado final es que, en su primera aproximación, puede terminar siendo indefinido para textInput y textResult, a menos que coloque el script en la parte inferior de la página.

Answer 2

Depende de cuándo quiera que se ejecute el código. Si desea que el código se ejecute lo antes posible, puede usar un IIFE, pero realmente no tiene sentido utilizar un IIFE si no lo usa para proteger sus variables y / o no contaminar el alcance global.

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

o

// do somthing

se ejecutará en el mismo punto en el tiempo.

Si desea diferir la ejecución, hay tres puntos en el tiempo generalmente utilizados por los desarrolladores web. <script> s en la parte inferior, DOMContentLoad y window.onload.

• <script> s en la parte inferior se ejecutará una vez que se hayan extraído del servidor.
• DOMContentLoaded ejecuta básicamente tan pronto como </html> ha sido leído por el analizador HTML.
• window.onload muy simplificado se ejecuta después de que se hayan cargado todos los CSS, <img> es y <script> s.

Tenga en cuenta que, en realidad, con atributos como async y defer en <script> s, esto es más complejo,. Esta es la razón por la cual hay una montaña de cargadores de recursos disponibles.

Answer 3

El IIFE en un elemento de script (ya sea en línea o cargado en el exterior) justo antes del elemento del body cierre ciertamente parece más inteligente. Confunde al infierno a los plebeyos.

document.addEventListener(''DOMContentLoaded'', function() ... es fácil de entender. Es casi simple: el evento escucha el contenido de DOM cargado . Por lo tanto, poof, la majestad se ha ido. Tenga en cuenta que esto es distinto de la carga de la window onload .

Uso el detector de eventos, ya que se adhiere al principio de KISS , es una herramienta especialmente diseñada, y hace lo que dice que hace (que probablemente incluye cosas / funcionalidades que ni siquiera he considerado).