Detaillierte Erläuterung des Beispielcodes für die Lazy-Loading-Funktion in der Javascript-Funktion

Lazy-Loading-Funktion

Aufgrund des unterschiedlichen Verhaltens zwischen Browsern fügen wir häufig eine große Anzahl von if-Anweisungen in die Funktion ein, um die Browserfunktionen zu überprüfen und die Kompatibilität zu lösen Probleme verschiedener Browser. Zum Beispiel unsere häufigste Funktion zum Hinzufügen von Ereignissen zu Dom-Knoten

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;
  }
}

Jedes Mal, wenn die Funktion addEvent aufgerufen wird, muss sie die vom Browser unterstützten Funktionen ausführen Überprüfen Sie zunächst, ob die addEventListener-Methode unterstützt wird. Wenn nicht, prüfen Sie, ob die attachmentEvent-Methode unterstützt wird. Wenn sie noch nicht unterstützt wird, verwenden Sie die dom0-Level-Methode, um das Ereignis hinzuzufügen. Dieser Vorgang muss jedes Mal wiederholt werden, wenn die Funktion addEvent aufgerufen wird. Wenn der Browser eine der Methoden unterstützt, unterstützt er sie tatsächlich immer und es besteht keine Notwendigkeit, andere Zweige zu erkennen. Mit anderen Worten: Die if-Anweisung muss nicht jedes Mal ausgeführt werden und der Code kann schneller ausgeführt werden.

Die Lösung ist Lazy Loading. Das sogenannte Lazy Loading bedeutet, dass der Zweig der Funktionsausführung nur einmal erfolgt

Es gibt zwei Möglichkeiten, Lazy Loading zu implementieren

[1] Die erste ist, wenn die Funktion ausgeführt wird aufgerufen und dann die Funktion verarbeiten. Wenn eine Funktion zum ersten Mal aufgerufen wird, wird sie von einer anderen Funktion überschrieben, die in geeigneter Weise ausgeführt wird, sodass ein Aufruf der ursprünglichen Funktion nicht den Ausführungszweig

Wir können verwenden: Die folgende Methode verwendet Lazy Loading, um addEvent() neu zu schreiben

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);
}

In diesem Lazy Loading addEvent() wird jeder Zweig der if-Anweisung sein Die Zuweisung von addEvent-Variablen deckt effektiv die ursprüngliche Funktion ab. Der letzte Schritt besteht darin, die neue Zuweisungsfunktion aufzurufen. Beim nächsten Aufruf von addEvent() wird die neu zugewiesene Funktion direkt aufgerufen, sodass die if-Anweisung nicht ausgeführt werden muss

Diese Methode hat jedoch einen Nachteil, wenn sich der Funktionsname ändert , Es ist mühsamer,

[2] zu ändern. Zweitens muss beim Deklarieren der Funktion die entsprechende Funktion angegeben werden. Auf diese Weise geht die Leistung nicht verloren, wenn die Funktion zum ersten Mal aufgerufen wird, aber ein wenig Leistung geht verloren, wenn der Code geladen wird

Im Folgenden wird addEvent() entsprechend umgeschrieben diese Idee. Der folgende Code erstellt eine anonyme selbstausführende Funktion, die durch verschiedene Zweige verzweigt, um zu bestimmen, welche Funktionsimplementierung verwendet werden soll

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Beispielcodes für die Lazy-Loading-Funktion in der Javascript-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!