Dans le code JavaScript, en raison des différences de comportement entre les navigateurs, nous incluons souvent un grand nombre d'instructions IF dans la fonction pour vérifier les caractéristiques du navigateur et résoudre des problèmes de compatibilité de différents navigateurs. Par exemple, notre fonction la plus courante pour ajouter des événements au nœud DOM:
La copie de code est la suivante:
fonction addevevent (type, élément, fun) {
if (element.addeventListener) {
element.addeventListener (type, fun, false);
}
else if (element.attachevent) {
element.attachevent ('on' + type, fun);
}
autre{
élément ['on' + type] = fun;
}
}
Chaque fois que la fonction AddEvent est appelée, elle doit vérifier les capacités prises en charge par le navigateur. Tout d'abord, vérifiez si la méthode AddeventListener est prise en charge. S'il n'est pas pris en charge, vérifiez si la méthode attachée est prise en charge. S'il n'est pas pris en charge, utilisez la méthode DOM Level 0 pour ajouter des événements. Ce processus doit être fait chaque fois que la fonction AddEvent est appelée. En fait, si le navigateur prend en charge l'une des méthodes, il le soutiendra toujours et il n'est pas nécessaire de détecter d'autres branches. En d'autres termes, si les instructions n'ont pas besoin d'être exécutées à chaque fois et le code peut s'exécuter plus rapidement.
La solution est une technique appelée chargement paresseux.
Le soi-disant chargement paresseux signifie que la branche IF de la fonction ne sera exécutée qu'une seule fois, puis lorsque la fonction est appelée, il entrera directement le code de branche pris en charge. Il existe deux façons d'implémenter le chargement paresseux. La première chose est que lorsque la fonction est appelée pour la première fois, la fonction elle-même sera traitée quadratique. La fonction sera écrasée comme une fonction qui remplit les conditions de branche, afin que l'appel à la fonction d'origine n'aura plus à passer par la branche exécutée. Nous pouvons utiliser le chargement paresseux pour écraser Addevent () de la manière suivante.
La copie de code est la suivante:
fonction addevevent (type, élément, fun) {
if (element.addeventListener) {
addEvent = fonction (type, élément, fun) {
element.addeventListener (type, fun, false);
}
}
else if (element.attachevent) {
addEvent = fonction (type, élément, fun) {
element.attachevent ('on' + type, fun);
}
}
autre{
addEvent = fonction (type, élément, fun) {
élément ['on' + type] = fun;
}
}
return addEvent (type, élément, fun);
}
Dans cet AddEvent () chargé paresseux, chaque branche de l'instruction IF attribuera une valeur à la variable AddEvent, écrasant efficacement la fonction d'origine. La dernière étape consiste à appeler la nouvelle fonction d'affectation. La prochaine fois que vous appellerez AddEvent (), la fonction nouvellement affectée sera appelée directement, afin que vous n'ayez plus besoin d'exécuter des instructions si.
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, les performances ne seront pas perdues lorsque la fonction est appelée la première fois, et seules une petite performance sera perdue lorsque le code sera chargé. Voici le AddEvent () réécrit en fonction de cette idée.
La copie de code est la suivante:
var addEvent = (function () {
if (document.addeventListener) {
fonction de retour (type, élément, fun) {
element.addeventListener (type, fun, false);
}
}
else if (document.attachevent) {
fonction de retour (type, élément, fun) {
element.attachevent ('on' + type, fun);
}
}
autre {
fonction de retour (type, élément, fun) {
élément ['on' + type] = fun;
}
}
}) ();
L'astuce utilisée dans cet exemple est de créer une fonction auto-exécutée anonyme et d'utiliser différentes branches pour déterminer la fonction qui doit être implémentée. La logique réelle est la même. La différence est que l'expression de la fonction est utilisée (la fonction est définie par VAR) et une fonction anonyme est ajoutée. De plus, chaque branche renvoie une fonction correcte et la affecte immédiatement à la variable AddEvent.
L'avantage des fonctions de chargement paresseux est que si les branches ne sont exécutées qu'une seule fois, en évitant la fonction d'exécution si les branches et le code inutile à chaque fois qu'il est exécuté, améliorant ainsi les performances du code. Quant à quelle méthode est la plus appropriée, cela dépend de vos besoins.