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

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

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!