In diesem Artikel werden 14 Regeln beschrieben, die beim Schreiben von JavaScript -Code befolgt werden sollten. Teilen Sie es für Ihre Referenz wie folgt weiter:
1. Verwenden Sie immer 'var'
In JavaScript sind Variablen entweder global oder funktionsweit. Die Verwendung des Schlüsselworts "var" ist der Schlüssel, um die Variablen präzise und klar zu halten. Bei der Erklärung einer Variablen, die entweder global oder funktionsfähig ist, muss das Schlüsselwort "var" immer vorausgegangen sein. Das folgende Beispiel wird das potenzielle Problem betonen, dies nicht zu tun.
Probleme, die durch keine Verwendung von VAR verursacht wurden
var i = 0; // Dies ist gut - erstellt einen globalen variablen Funktionstest () {für (i = 0; i <10; i ++) {alert ("Hallo Welt!");}} Test (); alert (i); // Die globale Variable I ist jetzt 10!Da die Variable I in der Variablenfunktion Var nicht verwendet, um sie zu einer Funktionsvariable zu machen, verweist es in diesem Beispiel eine globale Variable. Die Verwendung von VAR zur Deklarierung globaler Variablen ist jedoch eine Menge Übung, aber es ist wichtig, Var zu verwenden, um eine funktionsweite Variable zu definieren. Die folgenden zwei Methoden sind funktional gleich:
Die richtige Funktion
Funktion test () {var i = 0; für (i = 0; i <10; i ++) {alert ("Hallo Welt!");}}Die richtige Funktion
Funktionstest () {für (var i = 0; i <10; i ++) {alert ("Hallo Welt!");}}2. Merkmalserkennung anstelle der Browser -Erkennung
Ein Code wird geschrieben, um die Browserversion zu entdecken und unterschiedliche Verhaltensweisen daraus zu erledigen, basierend auf dem Client, den der Benutzer verwendet. Dies ist im Allgemeinen eine sehr schlechte Praxis. Ein besserer Ansatz ist die Verwendung der Funktionserkennung, zuerst Erkennung (den Browser), ob es diese Funktion oder Funktion gibt, bevor eine erweiterte Funktion verwendet wird, die ein alter Browser möglicherweise nicht unterstützt, und diese dann verwenden. Dadurch wird die Browserversion individuell besser erfasst, auch wenn Sie ihre Leistung kennen. Sie finden einen Artikel, in dem dieses Problem unter http://www.jibbering.com/faq/faq_notes/not_browser_detekt.html eingehend erörtert wird.
Beispiel:
if (document.getElementById) {var element = document.getElementById ('myid');} else {alert ('Ihr Browser fehlt die Funktionen, die erforderlich sind, um dieses Skript auszuführen!');}3. Verwenden Sie eine Quadratklammer Notation
Wenn der Zugriff durch Ausführung ermittelt wird oder Objekteigenschaften enthält, auf die nicht mit dem "" zugegriffen werden kann. Schild, quadratische Halterung wird verwendet. Wenn Sie kein erfahrener JavaScript -Programmierer sind, ist die Verwendung von Quadratklammern immer eine gute Möglichkeit, dies zu tun
Die Eigenschaften eines Objekts werden mit zwei festen Methoden zugegriffen: ". Nomen und" [] "Quadratklammer Notation:"
"." Notationsmethode:
MyObject.property
"[]" Quadratklammer Notation:
MyObject ["Eigentum"]
Verwenden Sie das "." Sign, der Attributname ist Hard -Code und kann während der Ausführung nicht geändert werden. Unter Verwendung der quadratischen Klammern "[]" ist der Attributname eine Zeichenfolge, die aus der Berechnung des Attributnamens stammt. Ein String sollte harte Code oder eine Variable oder sogar eine Funktion sein, die einen Zeichenfolgenwert zurückruft. Wenn während der Ausführung ein Attributname generiert wird, sind quadratische Klammern erforderlich. Wenn Sie Eigenschaften wie "value1", "value2" und "value3" haben und die Variable i = 2 verwenden möchten, um darauf zuzugreifen
Dies kann laufen:
MyObject ["value"+i]
Dies kann nicht sein:
MyObject.Value+i
Und in einigen serverseitigen Umgebungen (PHP, Streben usw.) werden Formulare mit [] Nummern angehängt, um anzuzeigen, dass Formularformulare auf der Serverseite als Arrays behandelt werden müssen. Auf diese Weise verwenden Sie das "." Das Zeichen für ein Feld, das das [] Zeichen enthält, wird nicht ausgeführt, da [] die Syntax für die Bezugnahme auf ein JavaScript -Array ist. Daher ist [] Notation notwendig:
Dies kann laufen:
formref.elements ["name []"]
Dies kann nicht sein:
formref.elements.name []
Die empfohlene Verwendung von "[]" Quadratklammernotation bedeutet, dass sie immer verwendet wird, wenn sie sie benötigt (offensichtlich). Es ist eine private Präferenz und Gewohnheit, wenn es nicht ausschließlich notwendig ist, sie zu verwenden. Ein gutes empirisches Prinzip ist die Verwendung des "". Notation, um auf Standard -Objekteigenschaften zuzugreifen und die "[]" -Square -Bracket -Notation zu verwenden, um auf Objekteigenschaften zuzugreifen, die von der Seite definiert sind. Auf diese Weise ist document ["getElementById"] () eine vollkommen machbare Verwendung von "[]" Quadratklammer Notation, aber Dokument.GetElementById () wird syntaktisch bevorzugt, da GetElementById eine Standard -Dokumentobjekteigenschaft ist, die in einer DOM -Spezifikation definiert ist. Mischen Sie diese beiden Notationen, um ein Standard -Objektattribut zu erstellen und welcher Attributname durch den Kontext definiert wird, macht es im Code klar:
document.forms ["myFormName"]. Elemente ["myInput"]. Wert
Hier ist Forms eine Standardeigenschaft des Dokuments, und der Formularname MyFormName wird auf der Seite definiert. Gleichzeitig sind die Elemente und Werteattribute beide Standardattribute, die durch die Spezifikation definiert sind. MyInput wird durch die Seite definiert. Diese Seite ist eine Syntax, die Menschen sehr leicht zu verstehen macht (den Inhalt des Codes) und eine empfohlene Idiom ist, aber kein strenger Prinzip.
4. Vermeiden Sie "Eval"
In JavaScript ist die Funktion eval () eine Methode zur Ausführung beliebiger Code während der Ausführung. In fast allen Fällen sollte Eval nicht verwendet werden. Wenn es auf Ihrer Seite erscheint, bedeutet dies, dass es einen besseren Weg gibt, um das zu tun, was Sie tun. Zum Beispiel wird EVE -Unternehmen normalerweise von Programmierern verwendet, die nicht wissen, dass sie eine quadratische Klammernotation verwenden.
Im Prinzip "ist Eval böse (Eval ist der Teufel). Verwenden Sie ihn nicht, es sei denn, Sie sind ein erfahrener Entwickler und wissen, dass Ihre Situation eine Ausnahme ist.
5. Richtige Hinweise auf Form- und Formelemente
Alle HTML -Formulare sollten ein Namensattribut haben. Für XHTML -Dokumente ist das Namensattribut nicht erforderlich, aber das Formular -Tag sollte das entsprechende ID -Attribut haben und muss mit document.getElementById () verwiesen werden. Die Verwendung von Indizierungsmethoden wie Dokument.Forms [0] zur Referenzformulare ist in fast allen Fällen eine schlechte Praxis. Einige Browser behandeln Elemente, die in Dokumenten mithilfe von Form als verfügbares Formularattribut benannt sind. Dies ist nicht zuverlässig und sollte nicht verwendet werden.
Das folgende Beispiel zeigt, wie die falsche Referenz einer Formulareingabe mithilfe von Quadratklammern und die korrekte Referenzmethode der Objekte verhindern kann:
Richtige Referenzformulareingabe:
document.forms ["Formname"]. Elemente ["InputName"]
Schlechter Ansatz:
document.formname.inputname
Wenn Sie in einer Funktion zwei Formularelemente verweisen möchten, können Sie sich zuerst auf das Formularobjekt beziehen und in einer Variablen speichern. Dadurch werden doppelte Abfragen zur Lösung von Formularreferenzen vermieden:
var formElements = document.Forms ["MainForm"]. Elemente; Formelemente ["input1"]. value = "a"; Formelemente ["input2"]. value = "b";
Wenn Sie Onchange oder andere ähnliche Ereignisverarbeitungsmethoden anwenden, besteht ein guter Ansatz darin, immer auf das Eingabeelement selbst in die Funktion zu verweisen. Alle Eingabelemente tragen einen Verweis auf die Formularform, die sie enthält:
<Eingabe type = "text" name = "adresse" onchange = "validate (this)">
Funktion validate (input_obj) {// Referenzformvar theform, das dieses Element enthält = input_obj.form; // Jetzt können Sie sich auf das Formular selbst beziehen, ohne Hardcode zu verwenden, wenn (theForm.elements ["Stadt"]. Value == "") {alert ("Fehler");}}Durch den Zugriff auf die Eigenschaften des Formulars, indem Sie auf das Formularelement verweisen, können Sie eine Funktion schreiben, die keinen harten Code enthält, um auf dieser Seite auf dieser Seite mit einem bestimmten Namen zu verweisen. Dies ist eine sehr gute Praxis, da die Funktionen wiederverwendbar werden.
Vermeiden Sie 'mit'
Die mit Deklaration in JavaScript fügt ein Objekt am vorderen Ende eines Umfangs ein, so Dies wird häufig als Verknüpfung verwendet, um doppelte Referenzen zu vermeiden:
Beispiel für die Verwendung mit:
mit (document.Forms ["MainForm"]. Elemente) {input1.Value = "Junk"; input2.Value = "Junk";}Das Problem ist jedoch, dass Programmierer keine Möglichkeit haben, zu überprüfen, ob Input1 oder input2 tatsächlich als Eigenschaften von Formelement -Arrays gelöst wurde. Es erkennt zunächst das Attribut mit diesen Namenswerten, und wenn es nicht gefunden werden kann, wird es diesen Umfang weiterhin (Abwärts) erkennen. Schließlich versucht es, Input1 und input2 als globales Objekt zu behandeln, und dies endet mit einem Fehler.
Die Problemumgehung besteht darin, ein Objekt zu erstellen, das Referenzen reduziert und diese Referenzen beheben.
Verwenden Sie eine Referenz:
var Elements = document.Forms ["MainForm"]. Elemente; Elements.input1.Value = "Junk"; Elements.input2.Value = "Junk";
7. Verwenden Sie "Onclick" im Anker anstelle von "JavaScript: Pseudo-Protokoll".
Wenn Sie JavaScript-Code im <a> Tag auslösen möchten, wählen Sie Onclick anstelle von JavaScript: Pseudo-Protocol; JavaScript -Code, das mit Onclick ausgeführt wird, muss Ture oder False zurückgeben (oder einen Ausdruck als Bewertungen in wahr oder falsch [wie man diesen Satz übersetzt? Ich verstehe so: Ein Ausdruck mit der Vorrangs oder falsch]), um das Tag selbst zurückzugeben: Wenn wahr, wird der HREF des Ankers als allgemeine Verbindung behandelt. Wenn falsch, wird der HREF ignoriert. Deshalb "falsch zurückkehren"; wird oft am Ende des von Onclick verarbeiteten Codes enthalten.
Richtige Syntax:
Kopieren Sie den Code wie folgt: <a href = "// www.vevb.com" onclick = "dosomething (); return false;"> go </a>
In diesem Fall wird die Funktion "dosomething ()" (definiert in einer Ecke der Seite) beim Klicken aufgerufen. HREF wird niemals von einem JavaScript-fähigen Browser zugegriffen. Das Dokument javascript_required.html wird in einem Browser geladen, in dem Sie JavaScript daran erinnern können, dass der Benutzer erforderlich und nicht aktiviert ist. Wenn Sie sicherstellen, dass der Benutzer JavaScript -Unterstützung für so viel wie möglich ermöglicht, enthält der Link nur href = "#". Und dieser Ansatz wird nicht gefördert. Normalerweise gibt es einen guten Ansatz: Es kann eine Seite bereitstellen, die in die Region zurückkehrt, ohne JavaScript zu verwenden.
Manchmal möchten viele Menschen einen Link entsprechend Situationen besuchen. Wenn ein Benutzer beispielsweise eine Ihrer Formseiten verlassen und zuerst überprüfen möchte, um sicherzustellen, dass nichts geändert wird. In diesem Fall greift Ihr Onclick auf eine Funktion zu, die eine Abfrage zurückgibt, ob der Link befolgt werden sollte:
Bedingter Linkzugriff:
<a href = "/" onclick = "return validate ();"> home </a>
Funktion validate () {Rückgabeaufforderung ("Sind Sie sicher, dass Sie diese Seite beenden möchten?");}In diesem Fall darf die Funktion validate () nur ture oder false zurückgeben. Wenn der Benutzer in der Ture ist, darf der Benutzer die Startseite ausstellen oder wenn der Link nicht zugegriffen wird. Dieses Beispiel fordert die Bestätigung (sein Verhalten) auf, auf die TURE oder FALSE zuzugreifen, die vollständig vom Benutzer festgelegt wird, der auf "Real" oder "Abbrechen" klickt.
Hier sind einige Beispiele für "sollte nicht sein". Wenn Sie den folgenden Code auf Ihrer Seite sehen, ist dies falsch und muss geändert werden:
Was sollte nicht getan werden:
<a href = "javaScript: dosomething ()"> link </a> <a href = "// www.vevb.com/#" onclick = "dosomething ()"> </a> <a href = "// www.vevb.com/#" Onclick = "Javascript: doSoming ()"> link: " href = "// www.vevb.com/#" onclick = "JavaScript: doSomething (); return false;"> link </a>
8. Verwenden Sie den Operator Unary '+', um den Typ auf die Nummer zu verwandeln
In JavaScript fungiert der "+" -Scheichenbetreiber sowohl als mathematisches Plus -Zeichen als auch als Anschluss. Dies kann zu Problemen führen, wenn die Feldwerte der Formularform addiert werden. Da JavaScript beispielsweise eine Sprache vom Typ schwach ist, wird der Wert des Formularfelds als Array verarbeitet, und wenn Sie sie zusammennehmen, wird das "+" als Anschluss und nicht als mathematisches Plus-Zeichen behandelt.
Beispiele für Probleme:
<Formular name = "myForm" action = "[url]"> <Eingabe type = "text" name = "val1" value = "1"> <Eingabe type = "text" name = "val2" value = "2"> </form>
Funktion Total () {var theForm = document.Forms ["myForm"]; var total = theform.elements ["val1"]. Wert + theform.elemente ["val2"]. Wert; alert (insgesamt); // Dies wird "12" auftauchen, aber was Sie wollen, ist 3!}Um dieses Problem zu lösen, benötigt JavaScript eine Aufforderung, diese Werte als Zahlen zu verarbeiten. Sie können das Zeichen "+" verwenden, um ein Array in eine Nummer umzuwandeln. Durch die Präsentation einer Variablen oder einem Ausdruck mit einem "+" -Scheichen wird es zwingen, als Zahl verarbeitet zu werden, und dies ermöglicht auch die erfolgreiches Anwenden der Mathematik "+".
Geänderter Code:
Funktion Total () {var theForm = document.Forms ["myForm"]; var total = (+theform.elements ["val1"]. Wert)+(+theform.elements ["val2"]. Wert); alert (Total); // Dies wird 3} alarmieren}9. Dokument vermeiden.all
document.all wurde vom IE von Microsoft vorgestellt und ist keine Standard -JavaScript -DOM -Funktion. Obwohl die meisten neuen Browser es unterstützen, um schlechten Code zu unterstützen, der davon abhängt, (und) gibt es viele Browser, die ihn nicht unterstützen.
Es gibt keinen Grund, warum andere Methoden nicht anwendbar sind, und ein alter IE -Browser (<5.0) benötigt Unterstützung, und das Dokument wird in JavaScript als Kompromiss verwendet. Sie müssen kein Dokument verwenden. Alle, um festzustellen, ob es sich um einen IE -Browser handelt, da andere Browser es jetzt im Allgemeinen unterstützen.
Nur Dokument.all ist die letzte Wahl:
if (document.getElementById) {var obj = document.getElementById ("myid");} else if (document.all) {var obj = document.all ("MyID");}Einige Prinzipien für die Verwendung von Dokumenten.All:
Probieren Sie andere Methoden aus
Wenn es die letzte Wahl ist
Wenn es erforderlich ist, um IE -Browser unter Version 5.0 zu unterstützen
Verwenden Sie immer "if (document.all) {}", um festzustellen, ob es unterstützt wird.
10. Verwenden Sie keine HTML -Kommentare in Skriptcodeblöcken
In den alten Tagen von JavaScript (1995) unterstützten einige Browser wie Netscape 1.0 das <script> -Tag nicht oder erkannt nicht. Als JavaScript zum ersten Mal veröffentlicht wurde, gab es eine Technologie, die verhindern würde, dass der tatsächliche Code in älteren Browsern als Text angezeigt wird. Es gibt einen "Hack", der HTML -Kommentare im Code verwendet, um diese Codes zu verbergen.
HTML -Kommentare nicht gut machen:
<script Language = "javaScript"> <!-// code hier //-> </script>
Heute ignoriert kein häufig verwendeter Browser das <Script> -Tag. Daher müssen der JavaScript -Quellcode nicht mehr ausgeblendet werden. Tatsächlich kann es aus folgenden Gründen auch als nicht hilfreich angesehen werden:
In der XHTML -Dokumentation wird der Quellcode vor allen Browsern verborgen und nutzlos (Inhalt) gerendert.
Die HTML -Kommentare sind nicht zulässig, dies wird jede Verschlechterung des Abschlusses ungültig machen.
11. Vermeiden Sie die Verwendung globaler Namespaces wahllos
Im Allgemeinen werden alle Variablen und Funktionen selten benötigt. Die globale Verwendung kann zu JavaScript -Quelldateidokumentkonflikten und Codeabbruch führen. Ein guter Ansatz besteht daher darin, eine funktionale Einkapselung innerhalb eines globalen Namespace zu übernehmen. Es gibt mehrere Möglichkeiten, diese Aufgabe zu erledigen, was relativ kompliziert ist. Der einfachste Weg ist es, diesem Objekt ein globales Objekt zu erstellen und Eigenschaften und Methoden zuzuweisen:
Erstellen Sie einen Namespace:
var mylib = {}; // Global Object ContenterMylib.Value = 1; Mylib.increment = function () {Mylib.value ++;} Mylib.show = function () {alert (mylib.value);} Mylib.value = 6; mylib.increment (); mylib.show (); // Alarms 7Namespaces können auch mit Schließungen erstellt werden, und private Mitgliedsvariablen können auch in JavaScript getarnt werden.
12. Vermeiden Sie synchrone 'Ajax' Anrufe
Bei Verwendung der Anforderung "AJAX" wählen Sie entweder den asynchronen Modus oder verwenden Sie den Synchronmodus. Wenn das Browserverhalten weiterhin ausgeführt werden kann, legt der asynchrone Modus die Anforderung in den Hintergrund und der synchrone Modus warten, bis die Anforderung abgeschlossen ist, bevor die Anfrage fortgesetzt wird.
Anfragen im Synchronisationsmodus sollten vermieden werden. Diese Anfragen deaktivieren den Browser dem Benutzer, bis die Anforderung zurücksetzt. Sobald der Server beschäftigt ist und sich einige Zeit in Anspruch nimmt, um die Anforderung abzuschließen, kann der Browser (oder Betriebssystem) des Benutzers erst dann etwas anderes tun, wenn die Anforderung abgelaufen ist.
Wenn Sie der Meinung sind, dass Ihre Situation den Synchronisierungsmodus erfordert, besteht die größte Möglichkeit darin, dass Sie Zeit benötigen, um Ihr Design zu überdenken. Selten sind AJAX -Anfragen im synchronen Modus erforderlich.
13. Verwenden Sie JSON
Wenn es notwendig ist, die Datenstruktur in Klartext zu speichern oder die Datenstruktur über AJAX zu senden/abzurufen, verwenden Sie JSON anstelle von XML so weit wie möglich. JSON (JavaScript-Objektnotation) ist ein prägnanteres und effizienteres Datenspeicherformat und stützt sich nicht auf eine Sprache (und ein Sprachneutral).
14. Verwenden Sie das richtige <Script> -Tag
Die Verwendung der Spracheigenschaft in <Script> wird nicht bevorzugt. Eine geeignete Möglichkeit besteht darin, den folgenden JavaScript -Codeblock zu erstellen:
<script type = "text/javaScript"> // code hier </script>
PS: Der obige Code wurde nicht formatiert, und der formatierte Code ist normalerweise einfacher zu lesen und zu verstehen. Hier sind einige Online -Formatierungs- und Komprimierungswerkzeuge, die Sie in der zukünftigen Entwicklung verwenden können:
Online -Tools für JavaScript -Code Verschönerung und Formatierung:
http://tools.vevb.com/code/js
JavaScript Code Verschönerung/Komprimierung/Formatierung/Verschlüsselungstools:
http://tools.vevb.com/code/jscompress
JSmin Online JS -Komprimierungstool:
http://tools.vevb.com/code/jsMincompress
JSON -Code Online -Formatierung/Verschönerung/Komprimierung/Bearbeitung/Konvertieren von Tools:
http://tools.vevb.com/code/jsoncodeFormat
Weitere Informationen zu javaScriptbezogenen Inhalten finden Sie in den Themen dieser Website: "Zusammenfassung der JavaScript -Switching -Effekte und -Techniken", "Zusammenfassung der Fähigkeiten der JavaScript -Suchalgorithmus", "Zusammenfassung der JavaScript -Animationseffekte und -Techniken", "Zusammenfassung von JavaScript -Fehler und Debugging -Techniken", Summary of Javacript -Daten und Algorith -Fähigkeiten "," Summary of Javacript Data Structures "," Summary of Javacript Data Structures "" "" "" "" "" "" "" "" "" " JavaScript -Traversalalgorithmen und -techniken "und" Zusammenfassung der Nutzung von JavaScript -Mathematischen Operationen "
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.