Ich verstehe es einfach nicht. Ich habe gesucht und gesucht, aber dafür kann ich einfach nicht herausfinden, was "richtig" ist.
Es gibt drei Beispiele.
1) Fiddle 1.0
Hier haben wir auch html mit onlick="function" und die javascript Funktion genau dort, was gut funktioniert
2) Fiddle 2.0 Dann, wenn ich die Funktion in den Skriptbereich verschiebe (Art, es in die .js-Datei zu verschieben) bekomme ich einen Fehler "ReferenceError: einigeFunktion ist nicht definiert"
DIES IST, WO DIE FRAGE BEGINNT
3) Geige 3 So, jetzt habe ich eine Funktion im Dokument bereit mit .on aufrufen (klicken Sie, die immer gut funktioniert. Diese Funktion ruft eine andere Funktion, die außerhalb der docuemnt.ready () und funktioniert auch gut.
Also die Frage. Wann muss ich die Funktionen definieren, wo und warum es immer funktioniert?
Danke!
Der gesamte Code aus Beispiel 3 sieht folgendermaßen aus:
%Vor% Vieles von dem, was Sie sehen, liegt an der sehr überraschenden Standardeinstellung von jsFiddle, die darin besteht, den Code im Skriptbereich in einem onload -Handler einzubinden . Ihr Code ist also in eine Funktion und nicht mehr in den globalen Geltungsbereich eingepackt (wo Funktionen erforderlich sind, wenn Sie onclick -Stil-Attribute verwenden). Sie können dies über die Dropdown-Liste auf der linken Seite (die zweite unter der Liste der Bibliotheken und Skripte) ändern. Ändern Sie den Wert in "Kein Umbruch", um den Code auszupacken.
Sie sind nicht (bei weitem!) der Erste, der an diesem überraschenden Standard teilnimmt.
Beantworten Sie Ihre Hauptfrage:
wann muss eine Funktion in $ (document) .ready ()
sein
Wenn Sie kontrollieren, wohin die script -Tags Ihr Skript laden, müssen Sie im Grunde nie ready ; Stellen Sie stattdessen sicher, dass sich Ihre script -Tags am Ende des HTML befinden, unmittelbar vor dem schließenden </body> .
Sie können natürlich ready verwenden. Der Grund dafür ist, dass alle DOM-Elemente erstellt wurden, bevor der Code ausgeführt wird . Aber wenn du dein script -Tag am Ende setzt, ist das schon wahr. Sie können Ihre Funktionen immer noch außerhalb des ready -Handlers definieren (wenn Sie Globals haben möchten), aber wenn Sie ready verwenden, würden Sie sie vom ready -Handler aufrufen also die Elemente existieren.
FWIW, ich würde vermeiden, onclick -style Attribute für den Anschluss von Event-Handlern zu verwenden, hauptsächlich weil sie globale Funktionen erstellen müssen. Ich vermeide es, irgendwelche globalen Symbole zu erstellen, wenn ich es vermeiden kann.
Die allgemeine Form, die ich empfehlen würde:
%Vor%wo Ihr Skript so aussieht:
%Vor%Hier ist ein vollständiges Beispiel: Live-Kopie
%Vor%In JavaScript wird der Gültigkeitsbereich pro Funktion behandelt. Alles im Rahmen einer Funktion kann auf andere Dinge im Rahmen dieser Funktion und Dinge in einem größeren Umfang zugreifen.
Wenn Sie eine Variable mit var in einer Funktion definieren, wird der Gültigkeitsbereich dieser Variablen auf die Funktion beschränkt.
Das Definieren einer Funktion mit einer Funktionsdeklaration in einer anderen Funktion begrenzt den Gültigkeitsbereich der definierten Funktion auf die Containerfunktion.
Wenn Sie ready verwenden, übergeben Sie eine Funktion an sie. Alles, was in dieser Funktion definiert ist, ist natürlich auf diese Funktion beschränkt. Da es auf diese Funktion beschränkt ist, ist es kein Global. Ihr onclick-Attribut ist nicht im Gültigkeitsbereich dieser Funktion definiert, es kann nur auf Globals zugreifen. Deshalb erhalten Sie einen Referenzfehler.
Vermeide Globals. Sie machen es schwer zu pflegen. Vermeiden Sie onclick -Attribute, sie hängen normalerweise von Globalen ab.
Sie müssen ready verwenden, wenn Code ausgeführt werden soll, nachdem das DOM vollständig erstellt wurde. Dies ist nützlich, wenn Sie Event-Handler an Elemente in JS binden möchten (z. B. mit jQuery.on ). Tun Sie dies, und verwenden Sie dann onclick -Attribute.
Tags und Links javascript jquery