JavaScript ist eine Weltklasse-Programmiersprache, die für die Entwicklung von Webentwicklung, für die Entwicklung mobiler Anwendungen (Telefonlap, AppCelerator), die Server-Seiten-Entwicklung (Node.js und Wakanda) usw. verwendet werden kann. Es kann verwendet werden, um einfache Eingabeaufforderungsfelder im Browser anzuzeigen oder den Roboter über NodeBot oder Nodeuino zu steuern. Entwickler, die gut strukturierte und effiziente JavaScript-Code schreiben können, sind jetzt die gefragtesten Menschen auf dem Rekrutierungsmarkt.
In diesem Artikel werde ich einige JavaScript -Tipps, Tipps und Best Practices teilen. Abgesehen von einigen sind beide die JavaScript-Engine des Browsers und der serverseitige JavaScript-Interpreter.
Der Beispielcode in diesem Artikel hat den Test an der neuesten Version von Google Chrome 30 (V8 3.20.17.15) bestanden.
1. Verwenden Sie das Schlüsselwort var, wenn Sie zum ersten Mal einer Variablen einen Wert zuweisen.
Wenn eine Variable nicht deklariert und direkt dem Wert zugeordnet ist, wird sie standardmäßig als neue globale Variable verwendet. Versuchen Sie, globale Variablen zu vermeiden.
2. Verwendung === Ersatz ==
Die == und! = Operatoren konvertieren den Datentyp bei Bedarf automatisch. Aber === und!
Die Codekopie lautet wie folgt:
[10] === 10 // ist falsch
[10] == 10 // ist wahr
'10' == 10 // ist wahr
'10' === 10 // ist falsch
[] == 0 // ist wahr
[] === 0 // ist falsch
'' == false // ist wahr, aber wahr == "a" ist falsch
'' === false // ist falsch
3.. Die logischen Ergebnisse von untergestichteten, Null-, 0-, Falsch-, Nan- und leeren Saiten sind alle falsch
4. Verwenden Sie Semikolons am Ende der Linie
In der Praxis ist es am besten, Semikolons zu verwenden. Es ist in Ordnung zu vergessen, sie zu schreiben. In den meisten Fällen wird der JavaScript -Interpreter automatisch hinzugefügt. Wenn Sie ein Semikolon verwenden möchten, können Sie die Wahrheit über Semikolonen im Artikel JavaScript verweisen.
5. Objektkonstruktor verwenden
Die Codekopie lautet wie folgt:
Funktionsperson (FirstName, LastName) {
this.firstname = FirstName;
this.lastName = LastName;
}
var saad = neue Person ("saad", "musliki");
6. Seien Sie vorsichtig mit Typen, Instanz und Konstruktor
Typeof: JavaScript Unary Operator, verwendet, um den ursprünglichen Typ einer Variablen in Form einer Zeichenfolge zurückzugeben. Beachten Sie, dass Typeof NULL auch das Objekt zurückgibt, und die meisten Objekttypen (Array, Uhrzeitdatum usw.) können auch das Objekt zurückgeben.
Konstruktor: interne Prototypeigenschaften, die über Code umgeschrieben werden können
InstanceOF: JavaScript -Operator, sucht im Konstruktor in der Prototyp -Kette, kehren Sie true zurück, wenn gefunden, andernfalls geben Sie false zurück, wenn dies falsch ist.
Die Codekopie lautet wie folgt:
var arr = ["a", "b", "c"];
Typof arr; // "Objekt" zurückgeben "
arr Instance von Array // true
arr.Constructor (); // []
7. Verwenden Sie Selbstanfängerfunktionen
Funktionen werden automatisch direkt nach der Erstellung ausgeführt, was normalerweise als selbstverwiderte anonyme Funktion oder direkte Aufruffunktionsausdrücke bezeichnet wird (unmittelbar aufgerufene Funktionsausdruck). Das Format lautet wie folgt:
Die Codekopie lautet wie folgt:
(Funktion(){
// Der hier platzierte Code wird automatisch ausgeführt
}) ();
(Funktion (a, b) {
var result = a+b;
Rückgabeergebnis;
}) (10,20)
8. Erhalten Sie zufällig Mitglieder aus dem Array
Die Codekopie lautet wie folgt:
var items = [12, 548, 'a', 2, 5478, 'foo', 8852, 'doe', 2145, 119];
var randomItem = items [math.floor (math.random () * items.length)];
9. Holen Sie sich Zufallszahlen innerhalb des angegebenen Bereichs
Diese Funktion ist besonders numerisch, wenn falsche Daten zum Testen generiert werden, z. B. die Anzahl der Löhne in einem bestimmten Bereich.
Die Codekopie lautet wie folgt:
var x = math.floor (math.random () * (max - min + 1)) + min;
10. Generieren Sie eine Reihe von Zahlen von 0 bis angegebenen Werten
Die Codekopie lautet wie folgt:
var numnernArray = [], max = 100;
für (var i = 1; numberArray.push (i ++) <max;); // nummern = [1,2,3 ... 100]
11. Erzeugen Sie zufällige alphanumerische Saiten
Die Codekopie lautet wie folgt:
Funktionsgenaterandomalphanum (Len) {
var rdmstring = "";
für (; rdmstring.length <len; rdmstring += math.random (). tostring (36) .substr (2));
return rdmstring.substr (0, len);
12. Stören Sie die Reihenfolge der Zahlenordnungen
Die Codekopie lautet wie folgt:
VAR -Zahlen = [5, 458, 120, -215, 228, 400, 122205, -85411];
numbers = numbers.sort (function () {return math.random () - 0.5});
/ * Zahlen Array ähnelt [120, 5, 228, -215, 400, 458, -85411, 122205] */////
Hier verwenden wir die integrierte Array-Sortierfunktion von JavaScript. Ein besserer Weg ist es, es mit speziellem Code zu implementieren (z. B. den Fisher-Yates-Algorithmus). Sie können sich auf diese Diskussion über Stackoverflow beziehen.
13. Räume von Saiten entfernen
Sprachen wie Java, C# und PHP implementieren alle spezielle String -Despace -Funktionen, aber es gibt kein JavaScript. Sie können den folgenden Code verwenden, um eine Trimmfunktion für die Funktion der String -Objekte zu erstellen:
Die Codekopie lautet wie folgt:
String.Prototype.trim = function () {return this.replace (/^/s+|/s+$/g, "");};
Die neue JavaScript -Engine verfügt bereits über eine native Implementierung von TRIM ().
14. Hinzufügen zwischen Arrays
Die Codekopie lautet wie folgt:
var array1 = [12, "foo", {name "joe"}, -2458];
var array2 = ["doe", 555, 100];
Array.Prototype.push.Apply (Array1, Array2);
/ * array1 value ist [12, "foo", {name "joe"}, -2458, "doe", 555, 100] */
15. Objekte in Arrays umwandeln
Die Codekopie lautet wie folgt:
var argarray = array.prototype.lice.call (Argumente);
16. Überprüfen Sie, ob es sich um eine Nummer handelt
Die Codekopie lautet wie folgt:
Funktion isNumber (n) {
return! isnan (parsefloat (n)) && isfinite (n);
}
17. Überprüfen Sie, ob es sich um ein Array handelt
Die Codekopie lautet wie folgt:
Funktion isArray (obj) {
return Object.Prototype.toString.call (obj) === '[Objektarray]';
}
Aber wenn die Methode toString () umgeschrieben wird, funktioniert sie nicht. Sie können auch die folgende Methode verwenden:
Die Codekopie lautet wie folgt:
Array.isArray (obj); // Es ist eine Neuarray -Methode
Wenn Sie den Frame in Ihrem Browser nicht verwenden, können Sie auch Instanz verwenden. Wenn der Kontext jedoch zu komplex ist, können Sie auch einen Fehler machen.
Die Codekopie lautet wie folgt:
var myframe = document.createelement ('iframe');
document.body.appendchild (MyFrame);
var myarray = window.frames [window.frames.length-1] .Array;
var arr = new myarray (a, b, 10); // [a, b, 10]
// Myarrays Konstruktor ist verloren gegangen, das Ergebnis von Instanz von abnormal
// Konstruktoren können nicht über Frames geteilt werden
arr Instance von Array; // FALSCH
18. Holen Sie sich die maximalen und minimalen Werte im Array
Die Codekopie lautet wie folgt:
VAR -Zahlen = [5, 458, 120, -215, 228, 400, 122205, -85411];
var maxinnumbers = math.max.Apply (Math, Zahlen);
var mininnumbers = math.min.apply (Math, Zahlen);
19. Löschen Sie das Array
Die Codekopie lautet wie folgt:
var myarray = [12, 222, 1000];
myarray.length = 0; // myarray wird gleich [] sein.
20. Elemente nicht direkt aus dem Array löschen oder entfernen
Wenn Sie direkt in Array -Elementen Löschen verwenden, wird es nicht tatsächlich gelöscht, sondern das Element einfach als undefiniert einstellen. Spleiß sollte für die Löschung des Array -Elements verwendet werden.
Nicht:
Die Codekopie lautet wie folgt:
var items = [12, 548, 'a', 2, 5478, 'foo', 8852, 'doe', 2154, 119];
items.länge; // Rückkehr 11
Elemente löschen [3]; // true zurückgeben
items.länge; // Rückkehr 11
/ * Elemente Ergebnis ist [12, 548, "A", undefined × 1, 5478, "Foo", 8852, undefined × 1, "Doe", 2154, 119] */
Wie für:
Die Codekopie lautet wie folgt:
var items = [12, 548, 'a', 2, 5478, 'foo', 8852, 'doe', 2154, 119];
items.länge; // Rückkehr 11
items.splice (3,1);
items.länge; // Rückkehr 10
/* Elemente Ergebnis ist [12, 548, "A", 5478, "Foo", 8852, undefined × 1, "Doe", 2154, 119]
Sie können beim Löschen der Eigenschaften eines Objekts Löschen verwenden.
21. Verwenden Sie das Längenattribut, um das Array abzuschneiden
Verwenden Sie im vorherigen Beispiel das Längenattribut, um das Array zu löschen, und Sie können es auch verwenden, um das Array abzuschneiden:
Die Codekopie lautet wie folgt:
var myarray = [12, 222, 1000, 124, 98, 10];
myarray.length = 4; // myarray ist gleich [12, 222, 1000, 124].
Gleichzeitig erhöht sich der Längenwert des Arrays, wenn das Längenattribut erhöht wird, und undefined wird als neues Element zum Füllen verwendet. Länge ist eine beschreibbare Eigenschaft.
Die Codekopie lautet wie folgt:
myarray.length = 10; // Die Neuarraylänge beträgt 10
myarray [myarray.length - 1]; // undefiniert
22. Verwenden Sie Logik und / unter Bedingungen
Die Codekopie lautet wie folgt:
var foo = 10;
foo == 10 && dosomething (); // ist dasselbe wie wäre (foo == 10) etwas ();
foo == 5 || dosometing (); // ist dasselbe wie wäre (foo! = 5) etwas ();
Logisch oder kann auch verwendet werden, um Standardwerte festzulegen, z. B. die Standardwerte der Funktionsparameter.
Die Codekopie lautet wie folgt:
Funktion doomething (arg1) {
arg1 = arg1 || 10; // arg1 hat 10 als Standardwert, wenn er noch nicht festgelegt ist
}
23. Machen Sie die MAP () -Funktionsmethode, die die Daten löschen
Die Codekopie lautet wie folgt:
var squares = [1,2,3,4] .map (Funktion (val) {
return val * val;
});
// Quadrate sind gleich [1, 4, 9, 16]
24. Halten Sie die angegebene Anzahl von Dezimalstellen
Die Codekopie lautet wie folgt:
var num = 2,443242342;
Num = num.tofixed (4); // num ist gleich 2,4432
Beachten Sie, dass Tofixec () eine Zeichenfolge zurückgibt, keine Nummer.
25. Probleme der Berechnung des Schwimmpunkts
Die Codekopie lautet wie folgt:
0,1 + 0,2 === 0,3 // ist falsch
9007199254740992 + 1 // entspricht 9007199254740992
9007199254740992 + 2 // entspricht 9007199254740994
Warum? Denn 0,1+0,2 entspricht 0,3000000000000000000004. JavaScript-Nummern werden gemäß dem IEEE 754-Standard erstellt und intern durch 64-Bit-Schwimmpunkt-Dezimalstellen dargestellt. Weitere Informationen finden Sie in der Art und Weise, wie die Zahlen in JavaScript codiert werden.
Dieses Problem kann durch Verwendung von tofixed () und toprecision () gelöst werden.
26. Überprüfen Sie die Eigenschaften des Objekts über die For-In-Schleife
Die folgende Verwendung kann verhindern, dass sie während der Iteration die Prototypeigenschaften des Objekts eingeben.
Die Codekopie lautet wie folgt:
für (var name im objekt) {
if (Object.hasownProperty (Name)) {
// etwas mit Namen mach
}
}
27. Komma -Betreiber
Die Codekopie lautet wie folgt:
var a = 0;
var b = (a ++, 99);
console.log (a); // a wird gleich 1 sein
console.log (b); // b ist gleich 99
28. Temporäre Speicherung von Variablen, die zur Berechnung und Abfrage verwendet werden
In JQuery Selector kann das gesamte DOM -Element vorübergehend gespeichert werden.
Die Codekopie lautet wie folgt:
var navright = document.querySelector ('#rechts');
var navleft = document.querySelector ('#links');
var navup = document.querySelector ('#Up');
var navdown = document.querySelector ('#down');
29. Überprüfen Sie die Parameter, die in isfinite () im Voraus übergeben wurden
Die Codekopie lautet wie folgt:
isfinite (0/0); // FALSCH
isFinite ("foo"); // FALSCH
isfinite ("10"); // WAHR
isfinite (10); // WAHR
isfinite (undefiniert); // FALSCH
isfinite (); // FALSCH
isfinite (null); // wahr, achten Sie besondere Aufmerksamkeit darauf
30. Vermeiden Sie die Verwendung negativer Zahlen als Indizierung in Arrays
Die Codekopie lautet wie folgt:
var numnernArray = [1,2,3,4,5];
var from = numberArray.indexof ("foo"); // von ist gleich -1 gleich
NumbersArray.SPLICE (von, 2); // wird zurückkehren [5]
Beachten Sie, dass der an Spleiß übergebene Indexparameter keine negative Zahl ist. Wenn es sich um eine negative Zahl handelt, wird das Element vom Ende des Arrays gelöscht.
31. Verwenden Sie JSON, um zu serialisieren und zu deserialisieren
Die Codekopie lautet wie folgt:
var person = {name: 'saad', Alter: 26, Abteilung: {id: 15, name: "r & d"}};
var stringstromperson = json.stringify (Person);
/ * StringFromperson -Ergebnis ist "{" Name ":" Saad "," Alter ": 26," Abteilung ": {" ID ": 15," Name ":" R & D "}}" */////
var personfromstring = json.parse (StringFromperson);
/* Der Wert der Person aus der STRING ist der gleiche wie der des Personobjekts*/
32. Verwenden Sie eval () oder Funktionskonstruktor nicht
Der Overhead von Eval () und Funktionskonstruktoren ist hoch. Jedes Mal, wenn sie aufgerufen werden, muss die JavaScript -Engine den Quellcode in ausführbaren Code umwandeln.
Die Codekopie lautet wie folgt:
var func1 = neue Funktion (Funktionscode);
var func2 = eval (functionCode);
33. Vermeiden Sie die Verwendung mit ()
Verwenden Sie mit () zum globalen Bereich Variablen. Wenn es also andere Variablen mit demselben Namen gibt, ist es einfach, verwirrt zu sein, und der Wert wird auch überschrieben.
34. Verwenden Sie nicht für Arrays für Arrays
vermeiden:
Die Codekopie lautet wie folgt:
var sum = 0;
für (var i in arraynumbers) {
sum += arraynumbers [i];
}
Stattdessen:
Die Codekopie lautet wie folgt:
var sum = 0;
für (var i = 0, len = arrayNumbers.length; i <len; i ++) {
sum += arraynumbers [i];
}
Ein weiterer Vorteil ist, dass die beiden Variablen I und Len in der ersten Deklaration der für die für die Schleife und beide nur einmal initialisiert werden, was schneller ist als die folgende Schreibmethode:
Die Codekopie lautet wie folgt:
für (var i = 0; i <arrayNumbers.length; i ++)
35. Verwenden Sie Funktionen anstelle von Zeichenfolgen, wenn Sie an setInterval () und setTimeout () übergeben werden
Wenn Sie eine Zeichenfolge an setTimeout () und setInterval () übergeben, werden sie in ähnlicher Weise wie Eval konvertiert, was definitiv langsamer ist. Verwenden Sie also nicht:
Die Codekopie lautet wie folgt:
setInterval ('dosomethingperiodical ()', 1000);
setTimeout ('dosomethingAfterfiveSeconds ()', 5000);
Verwenden Sie stattdessen:
Die Codekopie lautet wie folgt:
setInterval (dosomethingperiodisch 1000);
setTimeout (dosomethingAfterfiveseconds, 5000);
36. Verwenden Sie Switch/Case anstelle eines großen Stapels von if/sonst
Wenn Sie beurteilen, dass es mehr als zwei Zweige gibt, verwenden Sie Switch/Fall, um schneller und eleganter und förderlicher für die Organisation von Code zu fördern. Wenn es mehr als 10 Verzweigungen gibt, verwenden Sie natürlich keinen Schalter/Fall.
37. Verwenden Sie digitale Intervalle in Switch/Case
Tatsächlich können die Fallbedingungen in Switch/Fall auch so geschrieben werden:
Die Codekopie lautet wie folgt:
Funktion getCategory (Alter) {
var category = "";
Switch (true) {
Fall ISNAN (Alter):
category = "kein Alter";
brechen;
Fall (Alter> = 50):
category = "alt";
brechen;
Fall (Alter <= 20):
category = "baby";
brechen;
Standard:
category = "jung";
brechen;
};
Rückgabekategorie;
}
GetCategory (5); // wird "Baby" zurückkehren "
38. Verwenden Sie Objekte als Prototypen
Auf diese Weise können Sie als Parameter ein neues Objekt erstellen:
Die Codekopie lautet wie folgt:
Funktionsklon (Objekt) {
Funktion OneshotConstructor () {};
OneshotConstructor.Prototype = Objekt;
return neuer OneShotConstructor ();
}
Klon (Array) .Prototyp; // []
39. HTML -Feldkonvertierungsfunktion
Die Codekopie lautet wie folgt:
Funktion Escapehtml (Text) {
var Ersatz = {"<": "<", ">": ">", "&": "&", "/": "" "};
return text.replace (/[<> & "]/g, Funktion (Zeichen) {
Ersatz zurückgeben [Zeichen];
});
}
40. Verwenden Sie Try-Catch-final in der Schleife nicht
Der Fangteil in Try-Catch-final ordnet bei der Ausführung einer Variablen Ausnahmen zu, und diese Variable wird in eine neue Variable innerhalb des Laufzeitbereichs aufgebaut.
Nicht:
Die Codekopie lautet wie folgt:
var object = ['foo', 'bar'], i;
für (i = 0, len = Object.length; i <len; i ++) {
versuchen {
// etwas tun, das eine Ausnahme auswirft
}
fangen (e) {
// Ausnahme behandeln
}
}
Stattdessen:
Die Codekopie lautet wie folgt:
var object = ['foo', 'bar'], i;
versuchen {
für (i = 0, len = Object.length; i <len; i ++) {
// etwas tun, das eine Ausnahme auswirft
}
}
fangen (e) {
// Ausnahme behandeln
}
41. Achten Sie darauf, Timeout bei Verwendung von XMLHTTPrequests festzulegen
Wenn XMLHTTPrequests ausgeführt werden, sollte die Verbindung abgebrochen werden, wenn es lange Zeit keine Antwort gibt (z. B. Netzwerkprobleme usw.). Diese Arbeit kann durch setTimeout () erledigt werden:
Die Codekopie lautet wie folgt:
var xhr = new xmlhttprequest ();
xhr.onreadyStatechange = function () {
if (this.readystate == 4) {
Clearimeout (Zeitüberschreitung);
// etwas mit Antwortdaten tun
}
}
var timeout = setTimeout (function () {
xhr.abort (); // Aufruf Fehlerrückruf
}, 60*1000 /*Timeout nach einer Minute* /);
xhr.open ('get', url, wahr);
xhr.send ();
Gleichzeitig sollte beachtet werden, dass mehrere XMLHTTPREquests -Anfragen nicht gleichzeitig eingeleitet werden sollten.
42. Behandeln Sie die Zeitüberschreitung von Websocket
Im Allgemeinen wird nach dem Erstellen der WebSocket -Verbindung, wenn es innerhalb von 30 Sekunden keine Aktivität gibt, der Server die Verbindung abzweigt und die Firewall auch die Verbindung, die in einem Einheitszyklus nicht aktiv ist, einstellen kann.
Um dies zu verhindern, kann jedes Mal eine leere Nachricht an den Server gesendet werden. Diese Anforderung kann durch die folgenden zwei Funktionen erreicht werden, um die Verbindung aktiv und die andere speziell für die Beendigung dieses Zustands zu halten.
Die Codekopie lautet wie folgt:
var timerid = 0;
Funktion keepalive () {
var timeout = 15000;
if (WebSocket.ReadyState == WebSocket.open) {
WebSocket.Send ('');
}
TimerID = setTimeout (Keepalive, Timeout);
}
Funktion CancelkeePalive () {
if (timerid) {
Canceltimeout (TimerID);
}
}
Die Funktion keepalive () kann am Ende der Onopen () -Methode der WebSocket -Verbindung platziert werden, und am Ende der Onclose () -Methode kann Cancelkeepalive () platziert werden.
43. Achten Sie auf die Zeit und der ursprüngliche Bediener ist schneller als der Funktionsaufruf. Verwenden Sie Vanillejs
Zum Beispiel im Allgemeinen nicht so:
Die Codekopie lautet wie folgt:
var min = math.min (a, b);
A.push (v);
Dies kann stattdessen verwendet werden:
Die Codekopie lautet wie folgt:
var min = a <b? A: B;
A [a.länge] = v;
44. Achten Sie auf die Codestruktur während der Entwicklung, überprüfen und komprimieren Sie den JavaScript -Code, bevor Sie online gehen
Sie können Tools wie JSLINT oder JSMIN verwenden, um den Code zu überprüfen und zu komprimieren.