En el código JavaScript, debido a las diferencias en el comportamiento entre los navegadores, a menudo incluimos una gran cantidad de declaraciones IF en la función para verificar las características del navegador y resolver problemas de compatibilidad de diferentes navegadores. Por ejemplo, nuestra función más común para agregar eventos al nodo DOM:
La copia del código es la siguiente:
función addEvent (type, elemento, diversión) {
if (element.addeventListener) {
element.adDeventListener (tipo, diversión, falso);
}
else if (element.attachevent) {
element.attachevent ('on' + type, diversión);
}
demás{
elemento ['on' + type] = diversión;
}
}
Cada vez que se llama a la función AddEvent, debe verificar las capacidades admitidas por el navegador. Primero, verifique si el método AddEventListener es compatible. Si no es compatible, verifique si se admite el método adjunto de eventos. Si no es compatible, use el método DOM Nivel 0 para agregar eventos. Este proceso debe realizarse cada vez que se llama a la función AddEvent. De hecho, si el navegador admite uno de los métodos, siempre lo apoyará, y no hay necesidad de detectar otras ramas. En otras palabras, si las declaraciones no tienen que ser ejecutadas cada vez, y el código puede ejecutarse más rápido.
La solución es una técnica llamada carga perezosa.
La llamada carga perezosa significa que la rama IF de la función solo se ejecutará una vez, y luego, cuando se llama a la función, ingresará directamente el código de rama compatible. Hay dos formas de implementar la carga perezosa. Lo primero es que cuando la función se solicita por primera vez, la función en sí se procesará cuadráticamente. La función se sobrescribirá como una función que cumpla con las condiciones de la rama, de modo que la llamada a la función original ya no tenga que pasar por la rama ejecutada. Podemos usar la carga perezosa para sobrescribir AddEvent () de la siguiente manera.
La copia del código es la siguiente:
función addEvent (type, elemento, diversión) {
if (element.addeventListener) {
addEvent = function (type, elemento, diversión) {
element.adDeventListener (tipo, diversión, falso);
}
}
else if (element.attachevent) {
addEvent = function (type, elemento, diversión) {
element.attachevent ('on' + type, diversión);
}
}
demás{
addEvent = function (type, elemento, diversión) {
elemento ['on' + type] = diversión;
}
}
return addEvent (tipo, elemento, diversión);
}
En este addEvent () cargado (), cada rama de la instrucción if asignará un valor a la variable addEvent, sobrescribiendo efectivamente la función original. El último paso es llamar a la nueva función de asignación. La próxima vez que llame a AddEvent (), la función recién asignada se llamará directamente, para que ya no necesite ejecutar declaraciones IF.
La segunda forma de implementar la carga perezosa es especificar la función apropiada al declarar la función. De esta manera, el rendimiento no se perderá cuando la función se denomina primera vez, y solo se perderá un poco de rendimiento cuando se cargue el código. Aquí está el addEvent () reescrito de acuerdo con esta idea.
La copia del código es la siguiente:
var addEvent = (function () {
if (document.addeventListener) {
Función de retorno (tipo, elemento, diversión) {
element.adDeventListener (tipo, diversión, falso);
}
}
else if (document.attachevent) {
Función de retorno (tipo, elemento, diversión) {
element.attachevent ('on' + type, diversión);
}
}
demás {
Función de retorno (tipo, elemento, diversión) {
elemento ['on' + type] = diversión;
}
}
}) ();
El truco utilizado en este ejemplo es crear una función anónima de auto-ejecutación y usar diferentes ramas para determinar qué función debe implementarse. La lógica real es la misma. La diferencia es que se usa la expresión de la función (la función se define por VAR) y se agrega una función anónima. Además, cada rama devuelve una función correcta e inmediatamente la asigna a la variable addEvent.
La ventaja de las funciones de carga perezosa es que si las ramas se ejecutan solo una vez, evitando la función ejecutando si las ramas y el código innecesario cada vez que se ejecuta, mejorando así el rendimiento del código. En cuanto a qué método es más apropiado, depende de sus necesidades.