ist die Kurzversion von:
%Vor% Wenn Sie nicht darauf warten, dass document bereit ist, sind die Elemente, an die Sie Ereignisse binden möchten, nicht im Dom vorhanden und die Ereignisse werden nicht tatsächlich gebunden.
Alternativ können Sie warten, bis% code_de den Ladevorgang abgeschlossen hat. Dies beinhaltet jedoch das Warten auf Bilder, die länger laden.
Um ehrlich zu sein, Sie nicht warten auf body . Sie können weitermachen und document.ready verwenden, wenn Sie wissen, dass das Element im DOM existiert:
Es gibt eine letzte Nuance zu $('#saySomething').click(...) , über die Sie Bescheid wissen sollten. Der jQuery(function ($) {...}); -Parameter in der Funktion wird verwendet, um $ auf jQuery zu aliasieren, was es erlaubt, die $ -Kurzschrift innerhalb der Funktion zu verwenden, ohne sich um Konflikte mit anderen Bibliotheken (wie Prototypen) kümmern zu müssen / p>
Wenn Sie nicht auf $ warten, wird häufig ein IIFE verwendet, um jQuery Alias:
ist eine Abkürzung für
%Vor%Dies wartet, bis das Dokument in einem "Bereit" -Zustand ist, in dem das DOM erstellt wird. Ihre jQuery-Skripts können dann mit der vollständigen Seite arbeiten und keine Elemente verpassen.
Aber - Sie können jQuery ohne sie ausführen. Wenn Sie ein Skript im Kopf haben, besteht die Gefahr, dass Sie Elemente auswählen, die noch nicht erstellt wurden. Ich habe jQuery sofort nach dem Element in den Text meines Dokuments eingefügt, um es so schnell wie möglich zu bearbeiten. Das war ein ungewöhnlicher Fall und ich tue es normalerweise nicht.
Ein weiterer Grund, die Bereit-Funktion zu verwenden - Sie können es mehr als einmal ausführen. Wenn Sie mehrere Skripts einschließen oder Code, der bedingt enthalten ist, können Sie mehrere ready () -Funktionen haben. Der Code in jedem bereiten Block wird gehalten, bis der Bereitschaftszustand erreicht ist, und dann wird der Code in der Reihenfolge ausgeführt, in der er hinzugefügt wurde.
Das erste Beispiel wird angezeigt, nachdem die Seite vollständig geladen wurde. Das zweite Beispiel wird direkt ausgeführt (und wird wahrscheinlich fehlschlagen).
Also, die erste ist eine Abkürzung für:
%Vor%Dies ist eine Abkürzung für "document load" und sie haben auch das Longhand "jQuery" mit $ aliased inside verwendet, um Kollisionen mit anderen Bibliotheken zu vermeiden, die das $ -Zeichen verwenden.
Wenn Sie nicht auf das Laden von Dokumenten warten, können Dinge unvorhersehbar werden / nicht funktionieren. Auch wenn Sie Namenskollisionen haben, werden die Dinge einfach explodieren.
Kopieren und Einfügen direkt aus den Dokumenten :
jQuery( callback )Gibt zurück:jQueryBeschreibung: Bindet eine Funktion, die ausgeführt werden soll, wenn das DOM beendet ist Laden.
%Vor%Diese Funktion verhält sich genau wie
$(document).ready(), insofern sollte es funktionieren verwendet werden, um andere$()-Operationen auf Ihrer Seite zu umbrechen, die von DOM ist bereit. Während diese Funktion, technisch, kettenfähig ist, dort es ist wirklich nicht viel nützen, um dagegen zu ketten.
Bitte überprüfen Sie die API
Es hängt vom Kontext des Codes ab, aber es gibt eine übliche Entwurfspraxis in JavaScript, um Variablen und Methoden in einem Namespace oder Modulmuster einzukapseln. Dieser Code kann eine Ableitung dieser Absicht sein.
Die Argumentation hinter dem Modul-Design-Muster läuft auf Komplikationen mit globalen Variablen und die Gefahren von "Clobbering" hinaus.
Clobbering kann auftreten, wenn eine Variable (oder Funktion) mit demselben Namen zweimal definiert ist. Die zweite Definition wird die erste überschreiben und im Wesentlichen klobbeln.
Daher ist es eine Faustregel, den Code in ein Konstrukt zu schreiben, das Ihre Variablen (und Funktionen) vor dem globalen Namespace schützt. Douglas Crockford beschreibt diese Art von Szenarien gut.
Dieses Beispiel zeigt eine etwas häufigere Inkarnation namens ' Schließung ':
%Vor% Es ist zunächst verwirrend, aber sobald Sie es erkennen, wird es zur zweiten Natur. Der Punkt besteht darin, die Variable _count als privates Mitglied in das zurückgegebene Objekt zu kapseln, das über zwei zugängliche Methoden verfügt.Dies ist sehr nützlich, da der globale Namespace jetzt nur eine Variable (jspy) enthält, im Gegensatz zu einer mit zwei Methoden. Der zweite Grund, dass es leistungsfähig ist, ist, dass es garantiert, dass die _count-Variable nur durch die Logik in den beiden Methoden (incrementCount, getCount) zugegriffen werden kann.
Wie gesagt, Ihr Code kann eine Inkarnation dieser Faustregel sein.
In jedem Fall ist es wichtig, dieses Muster in JavaScript zu kennen, weil es die Tür zu viel mächtigeren Interaktionen zwischen Frameworks öffnet, zum Beispiel und beim asynchronen Laden von ihnen, wie bei AMD.
Hier ist ein schönes Namespace Beispiel.
Zusammenfassend gibt es ein fortgeschrittenes JavaScript Design Pattern, das Ihnen helfen wird, zu wissen, und die relevanten Begriffe sind Module Pattern, Namespace Pattern. Zusätzliche zugehörige Begriffe sind Schließung und AMD.
Ich hoffe, das hilft. Alles Gute! Nash
Dieser jQuery(function(){...} ist ein Shorcut für jQuery(document).ready(function(){...}) . Das Ready-Ereignis wird ausgelöst, wenn das DOM bereit ist, sodass Sie sicher sind, dass Sie nicht auf etwas zugreifen, das noch nicht verfügbar ist.
Auf der anderen Seite, wenn Sie die Click-Methode wie bei Ihrem zweiten Snippet binden. Dieser Code wird sofort ausgeführt, Sie müssen also sicherstellen, dass Sie ihn nach #saySomething declaration einfügen.
Tags und Links javascript jquery