Utilisez le chargement paresseux des fonctions pour améliorer l'efficacité de l'exécution du code JavaScript_javascript tips

Dans le code JavaScript, en raison des différences de comportement entre les navigateurs, nous incluons souvent un grand nombre d'instructions if dans les fonctions pour vérifier les caractéristiques du navigateur et résoudre les problèmes de compatibilité avec différents navigateurs. Par exemple, notre fonction la plus courante pour ajouter des événements aux nœuds dom :

Copier le code Le code est le suivant :

function addEvent (type, element, fun) {
if (element.addEventListener) {
element.addEventListener(type, fun, false
}
else if(element); .attachEvent) {
element.attachEvent('on' type, fun);
else{
element['on' type] =
}
}

Chaque fois que la fonction addEvent est appelée, elle vérifiera les fonctionnalités prises en charge par le navigateur. Vérifiez d'abord si la méthode addEventListener est prise en charge. Sinon, vérifiez si la méthode attachEvent est prise en charge. n'est pas encore pris en charge, puis ajoutez des événements à l'aide des méthodes dom niveau 0. Ce processus doit être effectué à chaque appel de la fonction addEvent. En fait, si le navigateur prend en charge l'une des méthodes, il la prendra toujours en charge et il n'est pas nécessaire de détecter les autres branches. C'est-à-dire que l'instruction if le fait. il n'est pas nécessaire de l'exécuter à chaque fois et le code peut s'exécuter plus rapidement.

La solution est une technique appelée chargement paresseux.

Le chargement dit paresseux signifie que la branche if de la fonction ne sera exécutée qu'une seule fois, et lorsque la fonction sera appelée plus tard, elle entrera directement le code de branche pris en charge. Il existe deux façons d'implémenter le chargement paresseux. La première est que lorsque la fonction est appelée pour la première fois, la fonction elle-même est traitée deux fois. La fonction est écrasée en tant que fonction qui remplit les conditions de branchement, de sorte que l'appel au chargement différé soit effectué. la fonction originale n'a pas besoin de l'être. Après avoir passé la branche d'exécution, nous pouvons réécrire addEvent() en utilisant le chargement paresseux de la manière suivante.

Copier le code Le code est le suivant :

fonction addEvent (type, élément, fun) {
if (element.addEventListener) {
addEvent = function (type, element, fun) {
element.addEventListener(type, fun, false); else if( element.attachEvent){
addEvent = function (type, element, fun) {
element.attachEvent('on' type, fun)
}
else{
addEvent = function (type, element, fun) {
element['on' type] = fun
}
}
return addEvent(type, element, fun }


Dans cet addEvent() chargé paresseux, chaque branche de l'instruction if attribue une valeur à la variable addEvent, écrasant ainsi la fonction d'origine. La dernière étape consiste à appeler la nouvelle fonction d'affectation. La prochaine fois que addEvent() sera appelée, la fonction nouvellement affectée sera appelée directement, il n'est donc pas nécessaire d'exécuter l'instruction if.

La deuxième façon d'implémenter le chargement paresseux est de spécifier la fonction appropriée lors de la déclaration de la fonction. De cette façon, il n’y aura aucune perte de performances lorsque la fonction est appelée pour la première fois, mais seulement une légère perte de performances lors du chargement du code. Ce qui suit est addEvent() réécrit selon cette idée.

Copier le code

Le code est le suivant : var addEvent = (function () { if (document.addEventListener) { return function (type, element, fun) { element.addEventListener(type, fun, false); document.attachEvent ) {

return function (type, element, fun) {

element.attachEvent('on' type, fun)
}
}
else {
return); function (type , element, fun) {
element['on' type] = fun;
}
})();


Trucs utilisés dans cet exemple Il crée une fonction anonyme auto-exécutable et utilise différentes branches pour déterminer quelle fonction doit être utilisée. La logique réelle est la même. La différence réside dans l'utilisation d'expressions de fonction (en utilisant var pour définir des fonctions) et l'ajout d'un anonyme. fonction, et chaque branche renvoie une fonction correcte et l'attribue immédiatement à la variable addEvent.

L'avantage de la fonction de chargement paresseux est qu'elle n'exécute la branche if qu'une seule fois, ce qui évite d'exécuter la branche if et du code inutile à chaque fois que la fonction est exécutée, améliorant ainsi les performances du code. approprié, cela dépend simplement de vos besoins.