Einführung in jQuery (Teil 3): Warten auf das Laden der Seite und anonyme Funktionen

Werbung

jQuery ist wohl eine wesentliche Fähigkeit für die Moderne Web-Entwickler Welche Programmiersprache Sie lernen sollten - WebprogrammierungHeute werfen wir einen Blick auf die verschiedenen Web-Programmiersprachen, die das Internet antreiben. Dies ist der vierte Teil einer Programmierreihe für Anfänger. In Teil 1 haben wir die Grundlagen von ... Weiterlesen und in dieser kurzen Miniserie hoffe ich, Ihnen das Wissen zu vermitteln, wie Sie es in Ihren eigenen Webprojekten einsetzen können. In dem Erster Teil unseres jQuery-Tutorials jQuery Tutorial - Erste Schritte: Grundlagen und SelektorenLetzte Woche habe ich darüber gesprochen, wie wichtig jQuery für jeden modernen Webentwickler ist und warum es großartig ist. Diese Woche, denke ich, ist es Zeit, dass wir uns mit etwas Code die Hände schmutzig machen und lernen, wie ... Weiterlesen Wir haben uns einige Sprachgrundlagen und die Verwendung von Selektoren angesehen. In Teil 2 gingen wir weiter zu Methoden zur Manipulation des DOM Einführung in jQuery (Teil 2): ​​Methoden und Funktionen

Dies ist Teil einer fortlaufenden Einführung für Anfänger in die jQuery-Webprogrammierungsserie. Teil 1 befasste sich mit den jQuery-Grundlagen zum Einfügen in Ihr Projekt und den Selektoren. In Teil 2 fahren wir fort mit ... Weiterlesen .

In Teil 3 werden wir uns mit dem Problem befassen, wie jQuery verzögert werden kann, bis die Seite geladen ist. Anschließend werde ich versuchen zu erklären, was anonyme Funktionen sind und warum Sie darüber Bescheid wissen müssen.

Verzögertes Laden: Wie und warum?

Wenn Sie einen Teil des Codes aus Teil 1 und 2 ausprobiert haben, sind Sie möglicherweise auf Fehler, merkwürdiges Verhalten oder Dinge gestoßen, die einfach nicht funktionieren. Der häufigste Fehler beim Erlernen von jQuery war, dass DOM-Elemente nicht gefunden wurden - auch nicht Obwohl ich sie in der Quelle der Seite deutlich sehen konnte, sagte mir jQuery immer wieder, dass es einfach nicht gefunden werden konnte Sie! Warum ist das so?

Nun, es hängt alles von der Reihenfolge ab, in der die Dinge vom Browser geladen werden. Am einfachsten ist es, wenn im Browser ein jQuery-Skript ausgeführt wird Vor Das gesuchte DOM-Element wurde tatsächlich erstellt. Das Skript wird zuerst geladen, unternimmt jedoch nichts, da es das Element nicht finden kann. Das DOM-Element wird später geladen. Dies ist weniger problematisch, wenn Sie alle Ihre Skripte in der Nähe der Fußzeile platzieren, dies kann jedoch dennoch passieren.

Die Lösung besteht darin, Ihre Skripte in das zu verpacken, was als a bezeichnet wird Dokument bereit Ereignis. Dadurch wartet der beiliegende Code, bis das DOM vollständig geladen wurde (bis er vollständig geladen ist) bereit). Die Verwendung ist einfach:

$ (Dokument) .ready (Funktion () { // Ihr zu verzögernder Code geht hier. });

Es gibt eine noch kürzere Möglichkeit, dies zu tun jQuery-DokumentationIch empfehle jedoch dringend, diese Methode für die Lesbarkeit des Codes zu verwenden.

Dieses dokumentbereite Ereignis ist ein weiteres gutes Beispiel für ein anonyme FunktionVersuchen wir also zu verstehen, was dies bedeutet.

Anonyme Funktionen

Wenn Sie wie ich Programmiererfahrung für Anfänger haben, ist die Idee von anonyme Funktionen - das ist der Kern von jQuery und Javascript - könnte ein wenig beunruhigend sein. Zum einen kommt es häufig zu Fehlern aufgrund nicht übereinstimmender Klammern, weshalb ich es jetzt erläutern werde. Wenn Sie eine ausführliche Erklärung wünschen, warum anonyme Funktionen besser sind als normale Namen Ich würde empfehlen, diesen recht komplexen Blog-Beitrag [Nicht mehr länger] zu lesen Verfügbar].

Bis jetzt sind Sie wahrscheinlich nur auf etwas gestoßen benannte Funktionen. Dies sind Funktionen, die mit einem Namen deklariert wurden und daher beliebig oft an einem anderen Ort aufgerufen werden können. Betrachten Sie dieses einfache Beispiel, bei dem beim Laden der Seite eine Nachricht in der Konsole protokolliert wird.

Funktion doStuffOnPageLoad () { console.log ("Sachen machen!"); } $ (document) .ready (doStuffOnPageLoad);

Dies ist nützlich, wenn Ihre Funktion für die Wiederverwendung ausgelegt ist. In diesem Fall ist sie jedoch etwas kompliziert, da sie beim Laden der Seite nur einmal ausgelöst werden soll. Stattdessen definieren wir keine separate Funktion und deklarieren sie bei Bedarf einfach als Inline-Parameter. Das vorherige Beispiel sollte daher besser umgeschrieben werden als:

$ (Dokument) .ready (Funktion () { console.log ("Sachen machen"); });

Möglicherweise sehen Sie im Moment nicht viele Vorteile davon - in diesem Fall ist es nur geringfügig weniger Code - aber als Die Komplexität Ihrer Skripte nimmt zu. Sie werden es zu schätzen wissen, dass Sie nicht herumspringen müssen, um eine Funktion zu finden Definitionen. Leider macht es die Sache für Anfänger etwas schwieriger - sehen Sie sich nur all diese Klammern an - überprüfen Sie daher unbedingt die folgenden Punkte, wenn Sie Fehler erhalten:

• Richtige Anzahl der entsprechenden geschweiften Klammern - das Einrücken Ihres Codes hilft.
• Curly vs runde Klammern.
• Anweisung wird mit einem Semikolon geschlossen - wird aber nach einer schließenden geschweiften Klammer nicht benötigt.

Mit einem Code-Editor wie Erhabener Text 2 Probieren Sie Sublime Text 2 für Ihre plattformübergreifenden Anforderungen an die Codebearbeitung ausSublime Text 2 ist ein plattformübergreifender Code-Editor, von dem ich erst kürzlich gehört habe, und ich muss sagen, dass ich trotz des Beta-Labels wirklich beeindruckt bin. Sie können die vollständige App herunterladen, ohne einen Cent zu zahlen ... Weiterlesen kann wirklich helfen, da es entsprechende Klammern hervorhebt und Code automatisch für Sie einrückt. Ein dedizierter Code-Editor ist wirklich wichtig.

Das war's für diese Lektion, aber Sie sollten sich angewöhnen, einige grundlegende DOM-Manipulationen einzuschließen Wenn Sie dies nicht tun, beginnen Sie mit dem Bearbeiten von Dateien in einem Code-Editor bereits. Beim nächsten Mal werfen wir einen Blick auf Ereignisse und wie sie verwendet werden, um einer Seite Interaktivität hinzuzufügen - z. B. jQuery dazu zu bringen, etwas zu tun, wenn auf eine Schaltfläche geklickt wird. Fragen oder Kommentare sind unten immer willkommen.