Einführung in jQuery (Teil 3) Warten auf zu ladende Seite und anonyme Funktionen

jQuery ist zweifellos eine essentielle Fähigkeit für den modernen Webentwickler. Welche Programmiersprache muss man lernen - Webprogrammierung? Welche Programmiersprache muss man lernen? - Webprogrammierung Heute werden wir uns die verschiedenen Webprogrammiersprachen ansehen, die das Internet unterstützen. Dies ist der vierte Teil einer Programmierserie für Anfänger. In Teil 1 haben wir die Grundlagen von… Lesen Sie mehr. In dieser kurzen Miniserie möchte ich Ihnen das Wissen vermitteln, das Sie in Ihren eigenen Webprojekten einsetzen können. Im ersten Teil unseres jQuery-Tutorials jQuery-Tutorial - Erste Schritte: Grundlagen und Auswahlmöglichkeiten - JQuery-Tutorial - Erste Schritte: Grundlagen und Auswahlmöglichkeiten Letzte Woche habe ich darüber gesprochen, wie wichtig jQuery für jeden modernen Webentwickler ist und warum es großartig ist. Ich denke, es ist an der Zeit, dass wir uns mit Code ein wenig schmutzig machen und erfahren haben, wie… Lesen Sie mehr, wir haben uns einige Sprachgrundlagen angesehen und wie man Selektoren verwendet. In Teil 2 haben wir uns mit den Methoden zur Manipulation des DOM beschäftigt. Einführung in jQuery (Teil 2): ​​Methoden und Funktionen Einführung in jQuery (Teil 2): ​​Methoden und Funktionen Dies ist Teil einer laufenden Einführung in die jQuery-Webprogrammierserie . Teil 1 befasste sich mit den jQuery-Grundlagen, wie man sie in Ihr Projekt einfügt, und Selektoren. In Teil 2 fahren wir mit… Weiterlesen .

In Teil 3 beschäftigen wir uns mit dem Problem, wie man jQuery verzögert, bis die Seite geladen ist. Dann versuche ich zu erklären, was anonyme Funktionen sind und warum man sie kennen muss.

Verzögertes Laden: Wie und warum?

Wenn Sie einen Teil des Codes aus Teil 1 und 2 ausprobiert haben, sind möglicherweise Fehler, seltsames Verhalten oder Probleme aufgetreten, die einfach nicht funktionieren. Der häufigste Fehler beim Lernen von jQuery war, dass DOM-Elemente nicht gefunden wurden. Obwohl ich sie einfach im Quellcode der Seite sehen konnte, sagte jQuery immer wieder, dass es sie einfach nicht finden konnte. Warum das?

Nun, alles hat mit der Reihenfolge zu tun, in der Dinge vom Browser geladen werden. Am einfachsten ist es, wenn im Browser ein jQuery-Skript ausgeführt wird Vor Das gesuchte DOM-Element wurde erstellt. Das Skript wird zuerst geladen, aber es wird nichts getan, da es das Element nicht finden kann. Das DOM-Element wird später geladen. Dies ist weniger problematisch, wenn Sie alle Skripts in der Nähe der Fußzeile platzieren. Dies kann jedoch trotzdem passieren.

Die Lösung ist, Ihre Skripte in das zu packen, was als a bezeichnet wird dokumentbereites Ereignis. Der beiliegende Code muss warten, bis das DOM vollständig geladen ist (bis es geladen ist) bereit). Die Verwendung ist einfach:

$ (document) .ready (function () // Ihr Code zum Verzögern geht hier hin);

In der jQuery-Dokumentation ist dies noch kürzer als in der jQuery-Dokumentation, aber ich empfehle Ihnen dringend, diese Methode für die Lesbarkeit von Code zu verwenden.

Dieses Document Ready Event ist ein weiteres gutes Beispiel für eine anonyme Funktion, Versuchen wir also zu verstehen, was dies bedeutet.

Anonyme Funktionen

Wenn Sie wie ich etwas Programmiererfahrung für Anfänger haben, die Idee von anonyme Funktionen - Was für jQuery und Javascript von zentraler Bedeutung ist, könnte ein wenig verwirrend sein. Zum einen macht es Fehler aufgrund nicht übereinstimmender Zahnspangen recht häufig, weshalb ich es jetzt erkläre. Wenn Sie eine ausführliche Erklärung wünschen, warum anonyme Funktionen auf einer technischeren Ebene besser als reguläre benannte Funktionen sind, würde ich empfehlen, diesen ziemlich komplexen Blogbeitrag zu lesen. [Nicht mehr verfügbar].

Bis jetzt bist du wahrscheinlich nur gestoßen benannte Funktionen. Dies sind Funktionen, die mit einem Namen deklariert wurden und daher an beliebiger Stelle aufgerufen werden können, so oft Sie möchten. Betrachten Sie dieses triviale Beispiel, das eine Nachricht an der Konsole protokolliert, wenn die Seite geladen wird.

function doStuffOnPageLoad () console.log ("doing stuff!");  $ (document) .ready (doStuffOnPageLoad);

Dies ist nützlich, wenn Ihre Funktion für die Wiederverwendung vorgesehen ist. In diesem Fall ist sie jedoch ziemlich umständlich, da sie nur einmal ausgelöst werden soll, wenn die Seite geladen wird. Stattdessen definieren wir keine separate Funktion, sondern deklarieren sie bei Bedarf als Parameter inline. Das vorherige Beispiel wäre daher besser umgeschrieben als:

$ (document) .ready (function () console.log ("doing stuff"););

Im Moment sehen Sie hier möglicherweise nicht viele Vorteile - in diesem Fall ist es nur geringfügig weniger Code -, aber da sich Ihre Skripts in der Komplexität weiterentwickeln, werden Sie es zu schätzen wissen, dass Sie nicht herumspringen müssen, um Funktionsdefinitionen zu finden. Leider macht es Anfängern etwas schwieriger - schauen Sie sich all die geschweiften Klammern an - prüfen Sie daher unbedingt die folgenden Punkte, wenn Sie Fehler erhalten:

• Korrekte Anzahl entsprechender Klammern - das Einrücken Ihres Codes hilft.
• Geschweifte vs runde Klammern.
• Anweisung, die mit einem Semikolon endet - wird jedoch nach einer geschweiften Klammer nicht benötigt.

Verwenden eines Code-Editors wie Sublime Text 2 Testen Sie Sublime Text 2 für die plattformübergreifende Code-Bearbeitung. Testen Sie Sublime Text 2. Für Ihre plattformübergreifende Code-Bearbeitung. Sublime Text 2 ist ein plattformübergreifender Code-Editor, den ich erst kürzlich gehört habe. und ich muss sagen, ich bin trotz des Beta-Labels wirklich beeindruckt. Sie können die vollständige App herunterladen, ohne einen Cent dafür zu zahlen… Read More kann wirklich hilfreich sein, da die entsprechenden Klammern hervorgehoben werden und der Code automatisch für Sie eingerückt wird. Ein dedizierter Code-Editor ist wirklich unerlässlich.

Das war es für diese Lektion, aber Sie sollten sich daran gewöhnen, einige grundlegende DOM-Manipulationen in document ready -Ereignissen einzuschließen, bevor Sie fortfahren, und mit der Bearbeitung von Dateien in einem Code-Editor beginnen, wenn Sie dies nicht bereits tun. Beim nächsten Mal sehen wir uns die Ereignisse an und wie sie verwendet werden, um einer Seite Interaktivität hinzuzufügen - zum Beispiel, dass jQuery etwas tut, wenn auf eine Schaltfläche geklickt wird. Fragen oder Kommentare sind unten immer willkommen.

Erfahren Sie mehr über: JavaScript, jQuery, Programmierung, Webentwicklung.