Im JavaScript -Code fügen wir aufgrund der Unterschiede im Verhalten zwischen Browsern häufig eine große Anzahl von IF -Anweisungen in der Funktion ein, um die Browsereigenschaften zu überprüfen und Kompatibilitätsprobleme verschiedener Browser zu lösen. Zum Beispiel unsere häufigste Funktion, um dem DOM -Knoten Ereignisse hinzuzufügen:
Die Codekopie lautet wie folgt:
Funktion addEvent (Typ, Element, Spaß) {
if (element.addeventListener) {
Element.AdDeVentListener (Typ, Spaß, Falsch);
}
sonst if (element.attachEvent) {
Element.attacheAvent ('on' + Typ, Spaß);
}
anders{
Element ['on' + Typ] = Fun;
}
}
Jedes Mal, wenn die AddEvent -Funktion aufgerufen wird, muss die vom Browser unterstützten Funktionen überprüfen. Überprüfen Sie zunächst, ob die addEventListener -Methode unterstützt wird. Wenn nicht unterstützt wird, prüfen Sie, ob die Anhang -Methode unterstützt wird. Wenn es nicht unterstützt wird, verwenden Sie die DOM -Stufe 0 -Methode, um Ereignisse hinzuzufügen. Dieser Prozess muss jedes Mal durchgeführt werden, wenn die AddEvent -Funktion aufgerufen wird. Wenn der Browser eine der Methoden unterstützt, wird er sie immer unterstützt und es besteht keine Notwendigkeit, andere Zweige zu erkennen. Mit anderen Worten, wenn Anweisungen nicht jedes Mal ausgeführt werden müssen und der Code schneller ausgeführt werden kann.
Die Lösung ist eine Technik namens Lazy Loading.
Das sogenannte faule Laden bedeutet, dass der Zweig der Funktion nur einmal ausgeführt wird und dann, wenn die Funktion aufgerufen wird, direkt den unterstützten Zweig-Code eingibt. Es gibt zwei Möglichkeiten, fauler Laden zu implementieren. Das erste ist, dass die Funktion selbst quadratisch verarbeitet wird, wenn die Funktion zum ersten Mal aufgerufen wird. Die Funktion wird als eine Funktion überschrieben, die den Zweigbedingungen erfüllt, so dass der Aufruf zur ursprünglichen Funktion nicht mehr durch die ausgeführte Zweigstelle gehen muss. Wir können Lazy Loading verwenden, um addEvent () auf folgende Weise zu überschreiben.
Die Codekopie lautet wie folgt:
Funktion addEvent (Typ, Element, Spaß) {
if (element.addeventListener) {
AddEvent = Funktion (Typ, Element, Spaß) {
Element.AdDeVentListener (Typ, Spaß, Falsch);
}
}
sonst if (element.attachEvent) {
AddEvent = Funktion (Typ, Element, Spaß) {
Element.attacheAvent ('on' + Typ, Spaß);
}
}
anders{
AddEvent = Funktion (Typ, Element, Spaß) {
Element ['on' + Typ] = Fun;
}
}
addEvent zurückgeben (Typ, Element, Spaß);
}
In diesem faul geladenen AddEvent () weist jeder Zweig der If -Anweisung der AddEvent -Variablen einen Wert zu und überschreibt die ursprüngliche Funktion effektiv. Der letzte Schritt besteht darin, die neue Zuordnungsfunktion aufzurufen. Wenn Sie das nächste Mal AddEvent () aufrufen, wird die neu zugewiesene Funktion direkt aufgerufen, sodass Sie bei Anweisungen nicht mehr ausführen müssen.
Die zweite Möglichkeit zur Implementierung des faulen Ladens besteht darin, die entsprechende Funktion bei der Deklaration der Funktion anzugeben. Auf diese Weise geht die Leistung nicht verloren, wenn die Funktion das erste Mal bezeichnet wird, und nur eine kleine Leistung geht beim Laden des Codes verloren. Hier ist der addEvent () nach dieser Idee umgeschrieben.
Die Codekopie lautet wie folgt:
var addEvent = (function () {
if (document.addeventListener) {
Rückgabefunktion (Typ, Element, Spaß) {
Element.AdDeVentListener (Typ, Spaß, Falsch);
}
}
sonst if (document.attachEvent) {
Rückgabefunktion (Typ, Element, Spaß) {
Element.attacheAvent ('on' + Typ, Spaß);
}
}
anders {
Rückgabefunktion (Typ, Element, Spaß) {
Element ['on' + Typ] = Fun;
}
}
}) ();
Der in diesem Beispiel verwendete Trick besteht darin, eine anonyme Selbstversorgungsfunktion zu erstellen und verschiedene Zweige zu verwenden, um zu bestimmen, welche Funktion implementiert werden soll. Die tatsächliche Logik ist die gleiche. Der Unterschied besteht darin, dass der Funktionsausdruck verwendet wird (die Funktion wird durch var definiert) und eine anonyme Funktion hinzugefügt. Zusätzlich gibt jeder Zweig eine korrekte Funktion zurück und weist sie dem variablen AddEvent sofort zu.
Der Vorteil von faulen Ladefunktionen besteht darin, dass, wenn Zweige nur einmal ausgeführt werden, wodurch die Funktionen vermieden werden, wenn Niederlassungen und unnötige Code jedes Mal, wenn sie ausgeführt wird, ausführen, wodurch die Codeleistung verbessert wird. Was für welche Methode angemessener ist, hängt sie von Ihren Bedürfnissen ab.