Verwenden Sie das verzögerte Laden von Funktionen, um die Effizienz der Ausführung von JavaScript-Code zu verbessern. Tipps für Javascript

Aufgrund unterschiedlicher Verhaltensweisen zwischen Browsern fügen wir in JavaScript-Code häufig eine große Anzahl von if-Anweisungen in Funktionen ein, um Browsereigenschaften zu überprüfen und Kompatibilitätsprobleme mit verschiedenen Browsern zu lösen. Zum Beispiel unsere häufigste Funktion zum Hinzufügen von Ereignissen zu Dom-Knoten:

Code kopieren Der Code lautet wie folgt:

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

Bei jedem Aufruf der Funktion „addEvent“ werden die vom Browser unterstützten Funktionen überprüft. Wenn nicht, prüfen Sie, ob die Methode „attachEvent“ unterstützt wird wird noch nicht unterstützt, dann fügen Sie Ereignisse mit Dom-Level-0-Methoden hinzu. Dieser Vorgang muss jedes Mal durchgeführt werden, wenn die Funktion addEvent aufgerufen wird. Wenn der Browser eine der Methoden unterstützt, wird er diese tatsächlich immer unterstützen, und es besteht keine Notwendigkeit, andere Zweige zu erkennen. Das heißt, die if-Anweisung tut dies müssen nicht jedes Mal ausgeführt werden und der Code kann schneller ausgeführt werden.

Die Lösung ist eine Technik namens Lazy Loading.

Das sogenannte Lazy Loading bedeutet, dass der if-Zweig der Funktion nur einmal ausgeführt wird und beim späteren Aufruf der Funktion direkt in den unterstützten Zweigcode eingegeben wird. Es gibt zwei Möglichkeiten, verzögertes Laden zu implementieren. Die erste besteht darin, dass die Funktion selbst beim ersten Aufruf zweimal als Funktion überschrieben wird, die die Verzweigungsbedingungen erfüllt Die ursprüngliche Funktion muss nicht sein. Nachdem wir den Ausführungszweig übergeben haben, können wir addEvent() mithilfe von Lazy Loading wie folgt neu schreiben.




Code kopieren

Der Code lautet wie folgt: Funktion addEvent (Typ, Element, Spaß) { 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 verzögert geladenen addEvent() weist jeder Zweig der if-Anweisung der addEvent-Variablen einen Wert zu und überschreibt so effektiv die ursprüngliche Funktion. 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.

Die zweite Möglichkeit, Lazy Loading zu implementieren, besteht darin, bei der Deklaration der Funktion die entsprechende Funktion anzugeben. Auf diese Weise kommt es beim ersten Aufruf der Funktion zu keinem Leistungsverlust, beim Laden des Codes jedoch nur zu einem geringen Leistungsverlust. Im Folgenden wird addEvent() entsprechend dieser Idee neu geschrieben.




Code kopieren

Der Code lautet wie folgt:

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


Tricks, die in verwendet werden Dieses Beispiel erstellt eine anonyme selbstausführende Funktion und verwendet verschiedene Zweige, um zu bestimmen, welche Funktion verwendet werden soll. Der Unterschied besteht in der Verwendung von Funktionsausdrücken (Verwendung von var zum Definieren von Funktionen) und dem Hinzufügen einer anonymen Funktion function.function, und jeder Zweig gibt eine korrekte Funktion zurück und weist sie sofort der Variablen addEvent zu.

Der Vorteil der Lazy-Loading-Funktion besteht darin, dass sie die if-Verzweigung nur einmal ausführt, wodurch die Ausführung der if-Verzweigung und unnötiger Code bei jeder Ausführung der Funktion vermieden wird, wodurch die Codeleistung verbessert wird geeignet, es hängt einfach von Ihren Bedürfnissen ab.