Das Entwerfen Ihrer Webseite mit JavaScript erfordert die Beachtung der Reihenfolge, in der Ihr Code angezeigt wird, und ob Sie Code in Funktionen oder Objekte einkapseln, die sich alle auf die Reihenfolge auswirken, in der der Code ausgeführt wird läuft.
Der Speicherort von JavaScript auf Ihrer Webseite
Da das JavaScript auf Ihrer Seite basierend auf bestimmten Faktoren ausgeführt wird, sollten Sie sich überlegen, wo und wie Sie einer Webseite JavaScript hinzufügen.
Grundsätzlich gibt es drei Speicherorte, an die wir JavaScript anhängen können:
- Direkt in den Kopf der Seite
- Direkt in den Hauptteil der Seite
- Von einem Event-Handler / Listener
Es macht keinen Unterschied, ob das JavaScript ist innerhalb der Webseite selbst oder in externen Dateien, die mit der Seite verknüpft sind. Es spielt auch keine Rolle, ob die Ereignishandler fest in die Seite codiert oder vom JavaScript selbst hinzugefügt werden (außer dass sie nicht ausgelöst werden können, bevor sie hinzugefügt werden).
Code direkt auf der Seite
Was bedeutet es zu sagen, dass JavaScript ist direkt im Kopf oder Körper der Seite? Wenn der Code nicht in einer Funktion oder einem Objekt enthalten ist, befindet er sich direkt auf der Seite. In diesem Fall wird der Code nacheinander ausgeführt, sobald die Datei mit dem Code ausreichend geladen wurde, damit auf diesen Code zugegriffen werden kann.
Code, der sich in einer Funktion oder einem Objekt befindet, wird nur ausgeführt, wenn diese Funktion oder dieses Objekt aufgerufen wird.
Grundsätzlich bedeutet dies, dass jeder Code im Kopf und Körper Ihrer Seite, der sich nicht in einer Funktion oder einem Objekt befindet, beim Laden der Seite ausgeführt wird - sobald die Seite hat ausreichend geladen, um auf diesen Code zuzugreifen.
Das letzte Bit ist wichtig und wirkt sich auf die Reihenfolge aus, in der Sie Ihren Code auf der Seite platzieren: Jeder Code, der direkt auf der Seite platziert wird und mit Elementen auf der Seite interagieren muss, muss angezeigt werden nach die Elemente auf der Seite, von denen es abhängig ist.
Im Allgemeinen bedeutet dies, dass, wenn Sie direkten Code für die Interaktion mit Ihrem Seiteninhalt verwenden, dieser Code am unteren Rand des Körpers platziert werden sollte.
Code innerhalb von Funktionen und Objekten
Ein Code in Funktionen oder Objekten wird ausgeführt, wenn diese Funktion oder dieses Objekt aufgerufen wird. Wenn es von Code aufgerufen wird, der sich direkt im Kopf oder Text der Seite befindet, dann ist es in der Die Ausführungsreihenfolge ist effektiv der Punkt, an dem die Funktion oder das Objekt von direkt aufgerufen wird Code.
Code, der Ereignishandlern und Listenern zugewiesen ist
Das Zuweisen einer Funktion zu einem Ereignishandler oder Listener führt nicht dazu, dass die Funktion an dem Punkt ausgeführt wird, an dem sie zugewiesen wurde - vorausgesetzt, Sie sind es tatsächlich zuweisen die Funktion selbst und nicht laufen die Funktion und Zuweisung des zurückgegebenen Wertes. (Deshalb sehen Sie das in der Regel nicht () am Ende des Funktionsnamens, wenn er einem Ereignis seit dem Hinzufügen von zugewiesen wird Klammern führen die Funktion aus und weisen den zurückgegebenen Wert zu, anstatt die Funktion zuzuweisen selbst.)
Funktionen, die an Ereignishandler und Listener angehängt sind, werden ausgeführt, wenn das Ereignis ausgelöst wird, an das sie angehängt sind. Die meisten Ereignisse werden von Besuchern ausgelöst, die mit Ihrer Seite interagieren. Es gibt jedoch einige Ausnahmen, wie z Belastung Ereignis im Fenster selbst, das ausgelöst wird, wenn die Seite vollständig geladen ist.
Funktionen, die an Ereignisse auf Seitenelementen angehängt sind
Alle Funktionen, die mit Ereignissen an Elementen auf der Seite selbst verknüpft sind, werden gemäß den Aktionen jedes einzelnen Besuchers ausgeführt. Dieser Code wird nur ausgeführt, wenn ein bestimmtes Ereignis auftritt, um es auszulösen. Aus diesem Grund spielt es keine Rolle, ob der Code für einen bestimmten Besucher nie ausgeführt wird, da dieser Besucher die erforderliche Interaktion offensichtlich nicht ausgeführt hat.
All dies setzt natürlich voraus, dass Ihr Besucher mit einem Browser auf Ihre Seite zugegriffen hat JavaScript aktiviert.
Benutzerdefinierte Besucherbenutzerskripte
Einige Benutzer haben spezielle Skripts installiert, die möglicherweise mit Ihrer Webseite interagieren. Diese Skripte werden nach all Ihrem direkten Code ausgeführt, aber Vor Jeder Code, der an den Ladeereignishandler angehängt ist.
Da Ihre Seite nichts über diese Benutzerskripte weiß, können Sie nicht wissen, was diese externen Skripte tun könnten. Sie können einen oder den gesamten Code überschreiben, den Sie an die verschiedenen Ereignisse angehängt haben, denen Sie zugewiesen haben wird bearbeitet. Wenn dieser Code Ereignishandler oder Listener überschreibt, führt die Antwort auf Ereignisauslöser den vom Benutzer definierten Code anstelle oder zusätzlich zu Ihrem Code aus.
Der Take-Home-Punkt hier ist, dass Sie nicht davon ausgehen können, dass Code, der nach dem Laden der Seite ausgeführt werden soll, so ausgeführt werden kann, wie Sie ihn entworfen haben. Beachten Sie außerdem, dass einige Browser über Optionen verfügen, mit denen einige Ereignishandler in der deaktiviert werden können Browser. In diesem Fall startet ein relevanter Ereignisauslöser nicht den entsprechenden Ereignishandler / Listener in Ihrem Code.