Explication détaillée de l'exemple de code de la fonction de chargement paresseux dans la fonction javascript

Fonction de chargement paresseux

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 fonctionnalités du navigateur pour résoudre la compatibilité problèmes avec différents navigateurs. Par exemple, notre fonction la plus courante pour ajouter des événements aux nœuds dom

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] = fun;
  }
}

Chaque fois que la fonction addEvent est appelée, elle doit exécuter les fonctionnalités prises en charge par le navigateur. vérifiez, 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. Si elle n'est pas encore prise en charge, utilisez la méthode de niveau dom0 pour ajouter l'événement. Ce processus doit être répété à chaque appel de la fonction addEvent. En effet, 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 d'autres branches. En d’autres termes, l’instruction if ne doit pas être exécutée à chaque fois et le code peut s’exécuter plus rapidement.

La solution est le chargement paresseux. Le soi-disant chargement paresseux signifie que la branche d'exécution de la fonction ne se produira qu'une seule fois

Il existe deux façons d'implémenter le chargement paresseux

[1] La première est lorsque la fonction est appelé , puis traitez la fonction. Lorsqu'une fonction est appelée pour la première fois, elle sera écrasée par une autre fonction qui sera exécutée de manière appropriée, afin que tout appel à la fonction d'origine n'ait pas besoin de passer par la branche d'exécution

Nous pouvons utiliser La méthode suivante utilise le chargement paresseux pour réécrire addEvent()

function addEvent(type, element, 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 ce chargement paresseux addEvent(), chaque branche de l'instruction if sera addEvent L'affectation de variable couvre efficacement 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 attribuée sera appelée directement, il n'est donc pas nécessaire d'exécuter l'instruction if

Cependant, cette méthode présente un inconvénient si le nom de la fonction change. , Il est plus difficile de modifier

[2] La seconde consiste à 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 pour la première fois, mais un peu de performances seront perdues lorsque le code sera chargé

Ce qui suit est addEvent() réécrit selon cette idée. Le code suivant crée une fonction anonyme auto-exécutable qui passe par différentes branches pour déterminer quelle implémentation de fonction doit être utilisée

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!