Heim > Artikel > Web-Frontend > 45 Vorsichtsmaßnahmen und Fähigkeiten zur JavaScript-Programmierung_Javascript-Kenntnisse

45 Vorsichtsmaßnahmen und Fähigkeiten zur JavaScript-Programmierung_Javascript-Kenntnisse

WBOYOriginal: 2016-05-16 16:14:24980Durchsuche

JavaScript ist die beliebteste Programmiersprache der Welt und kann für die Webentwicklung, die Entwicklung mobiler Anwendungen (PhoneGap, Appcelerator), die serverseitige Entwicklung (Node.js und Wakanda) usw. verwendet werden. Für viele Anfänger ist JavaScript auch die erste Sprache, die in die Welt des Programmierens einsteigt. Es kann verwendet werden, um ein einfaches Eingabeaufforderungsfeld im Browser anzuzeigen oder den Roboter über Nodebot oder Nodruino zu steuern. Entwickler, die JavaScript-Code mit klarer Struktur und hoher Leistung schreiben können, sind heute die gefragtesten Personen auf dem Personalbeschaffungsmarkt.

In diesem Artikel werde ich einige JavaScript-Tipps, Geheimnisse und Best Practices teilen, die bis auf wenige Ausnahmen sowohl für die JavaScript-Engine des Browsers als auch für den serverseitigen JavaScript-Interpreter gelten.

Der Beispielcode in diesem Artikel hat den Test auf der neuesten Version von Google Chrome 30 (V8 3.20.17.15) bestanden.

1. Verwenden Sie unbedingt das Schlüsselwort var, wenn Sie einer Variablen zum ersten Mal einen Wert zuweisen

Wenn eine Variable direkt zugewiesen wird, ohne deklariert zu werden, wird sie standardmäßig als neue globale Variable verwendet. Vermeiden Sie die Verwendung globaler Variablen.

2. Verwenden Sie === anstelle von ==

Die Operatoren

== und != konvertieren Datentypen bei Bedarf automatisch. Aber === und !== nicht, sie vergleichen Werte und Datentypen gleichzeitig, was sie auch schneller macht als == und !=.

Code kopieren Der Code 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 true == "a" ist falsch

'' === false // ist false

3. Die logischen Ergebnisse von unterbestimmt, null, 0, falsch, NaN und leerer Zeichenfolge sind alle falsch
4. Verwenden Sie am Ende der Zeile das Semikolon

In der Praxis ist es am besten, Semikolons zu verwenden. Es macht nichts, wenn Sie vergessen, sie zu schreiben. In den meisten Fällen fügt der JavaScript-Interpreter sie automatisch hinzu. Weitere Informationen darüber, warum Semikolons verwendet werden, finden Sie im Artikel „Die Wahrheit über Semikolons in JavaScript“.

5. Objektkonstruktor verwenden

Code kopieren Der Code lautet wie folgt:

Funktion Person(Vorname, Nachname){

This.firstName = firstName;

This.lastName = lastName;

}

var Saad = neue Person("Saad", "Mousliki");

6. Verwenden Sie Typ, Instanz und Konstruktor sorgfältig
typeof: Unärer JavaScript-Operator, der verwendet wird, um den ursprünglichen Typ der Variablen in Form einer Zeichenfolge zurückzugeben. Beachten Sie, dass typeof null auch ein Objekt zurückgibt (Array, Array, Zeit, Datum usw.). Objekt
Konstruktor: interne Prototypeigenschaft, kann durch Code
überschrieben werden Instanz von: JavaScript-Operator, sucht im Konstruktor in der Prototypenkette und gibt „true“ zurück, wenn er gefunden wird, andernfalls wird „false“ zurückgegeben

Code kopieren Der Code lautet wie folgt:

var arr = ["a", "b", "c"];

typeof arr; // „Objekt“ zurückgeben 

arr-Instanz des Arrays // true

arr.constructor(); //[]

7. Selbstaufrufende Funktionen verwenden
Die Funktion wird direkt nach der Erstellung automatisch ausgeführt und wird normalerweise als selbstaufgerufene anonyme Funktion (selbstaufgerufene anonyme Funktion) oder direkt aufgerufener Funktionsausdruck (sofort aufgerufener Funktionsausdruck) bezeichnet. Das Format ist wie folgt:

Code kopieren Der Code lautet wie folgt:

(function(){

//Der hier platzierte Code wird automatisch ausgeführt

})(); 

(Funktion(a,b){

var result = a b;

Ergebnis zurückgeben;

})(10,20)

8. Erhalten Sie zufällig Mitglieder aus dem Array

Code kopieren Der Code 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. Erhalten Sie Zufallszahlen innerhalb des angegebenen Bereichs
Diese Funktion ist besonders nützlich, wenn gefälschte Daten zu Testzwecken generiert werden, beispielsweise Gehälter innerhalb eines bestimmten Bereichs.

Code kopieren Der Code lautet wie folgt:

var x = Math.floor(Math.random() * (max - min 1)) min;

10. Erzeugen Sie ein digitales Array von 0 bis zum angegebenen Wert

Code kopieren Der Code lautet wie folgt:

var zahlenArray = [] , max = 100;

for( var i=1; zahlenArray.push(i ) < max;); // zahlen = [1,2,3 ... 100]

11. Generieren Sie zufällige alphanumerische Zeichenfolgen

Code kopieren Der Code lautet wie folgt:

Funktion genericRandomAlphaNum(len) {

var rdmString = "";

for( ; rdmString.length < len; rdmString = Math.random().toString(36).substr(2));

Gibt rdmString.substr(0, len);
 zurück

12. Unterbrechen Sie die Reihenfolge des Zahlenarrays

Code kopieren Der Code lautet wie folgt:

var-Zahlen = [5, 458, 120, -215, 228, 400, 122205, -85411];

zahlen = zahlen.sort(function(){ return Math.random() - 0.5});

/* Das Zahlenarray sieht wie folgt aus: [120, 5, 228, -215, 400, 458, -85411, 122205] */

Hier wird die integrierte Array-Sortierfunktion von JavaScript verwendet. Eine bessere Möglichkeit besteht darin, speziellen Code zu verwenden, um sie zu implementieren (z. B. den Fisher-Yates-Algorithmus). Diese Diskussion finden Sie auf StackOverFlow.

13. Leerzeichen aus Zeichenfolgen entfernen

Java, C#, PHP und andere Sprachen implementieren alle spezielle Funktionen zum Entfernen von String-Leerzeichen, aber in JavaScript gibt es keine solche Funktion. Sie können den folgenden Code verwenden, um eine Trimmfunktion für das String-Objekt auszuführen:

Code kopieren Der Code 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. Zwischen Arrays anhängen

Code kopieren Der Code lautet wie folgt:

var array1 = [12 , „foo“ , {name „Joe“} , -2458];

var array2 = ["Doe" , 555 , 100];

Array.prototype.push.apply(array1, array2);

/* Der Wert von array1 ist [12, „foo“, {name „Joe“}, -2458, „Doe“, 555, 100] */

15. Objekt in Array konvertieren

Code kopieren Der Code lautet wie folgt:

var argArray = Array.prototype.slice.call(arguments);

16. Überprüfen Sie, ob es sich um eine Zahl handelt

Code kopieren Der Code lautet wie folgt:

Funktion isNumber(n){

Rückgabe !isNaN(parseFloat(n)) && isFinite(n);

}

17. Überprüfen Sie, ob es sich um ein Array handelt

Code kopieren Der Code lautet wie folgt:

Funktion isArray(obj){

Return Object.prototype.toString.call(obj) === '[object Array]' ;

}

Wenn die toString()-Methode jedoch überschrieben wird, funktioniert sie nicht. Sie können auch die folgende Methode verwenden:

Code kopieren Der Code lautet wie folgt:

Array.isArray(obj); // es ist eine neue Array-Methode

Wenn im Browser kein Frame verwendet wird, kann auch die Instanz von verwendet werden. Wenn der Kontext jedoch zu komplex ist, kann es zu Fehlern kommen.

Code kopieren Der Code 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] 

// Der Konstruktor von myArray ist verloren gegangen und das Ergebnis von Instanz von wird abnormal sein

// Der Konstruktor kann nicht über mehrere Frames hinweg geteilt werden 

arr instanceof Array; // false

18. Holen Sie sich die Maximal- und Minimalwerte im Array

Code kopieren Der Code 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

Code kopieren Der Code 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 delete direkt auf ein Array-Element anwenden, wird es nicht gelöscht, sondern das Element wird auf undefiniert gesetzt. Beim Löschen von Array-Elementen sollte Splice verwendet werden.
Nicht:

Code kopieren Der Code lautet wie folgt:

var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ];

items.length; // return 11 

Elemente löschen[3]; // true zurückgeben 

items.length; // return 11 

/* Das Ergebnis der Elemente ist [12, 548, „a“, undefiniert × 1, 5478, „foo“, 8852, undefiniert × 1, „Doe“, 2154, 119] */

Stattdessen:

Code kopieren Der Code lautet wie folgt:

var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ];

items.length; // return 11 

items.splice(3,1) ; 

items.length; // 10 zurückgeben 

/* Das Ergebnis der Elemente ist [12, 548, „a“, 5478, „foo“, 8852, undefiniert × 1, „Doe“, 2154, 119]

delete kann beim Löschen der Eigenschaften eines Objekts verwendet werden.

21. Verwenden Sie das Längenattribut, um das Array zu kürzen

Im vorherigen Beispiel wurde das Längenattribut zum Löschen des Arrays verwendet. Es kann auch zum Abschneiden des Arrays verwendet werden:

Code kopieren Der Code lautet wie folgt:

var myArray = [12, 222, 1000, 124, 98, 10]; myArray.length = 4; // myArray ist gleich [12, 222, 1000, 124].

Wenn gleichzeitig das Längenattribut vergrößert wird, erhöht sich der Längenwert des Arrays und undefiniert wird als neues zu füllendes Element verwendet. Länge ist eine beschreibbare Eigenschaft. 

Code kopieren Der Code lautet wie folgt: myArray.length = 10; // die neue Array-Länge beträgt 10

myArray[myArray.length - 1]; // undefiniert

22. Verwenden Sie logisches UND oder in Bedingungen

Code kopieren Der Code lautet wie folgt: var foo = 10;

foo == 10 && doSomething(); // ist dasselbe wie if (foo == 10) doSomething(); foo == 5 ||. doSomething(); // ist dasselbe wie if (foo != 5) doSomething();

Logisches ODER kann auch verwendet werden, um Standardwerte festzulegen, beispielsweise Standardwerte für Funktionsparameter. 

Code kopieren

Der Code lautet wie folgt:

Funktion doSomething(arg1){ 

arg1 = arg1 ||. 10; // arg1 hat 10 als Standardwert, wenn es nicht bereits festgelegt ist

}

23. Lassen Sie die Funktion „map()“ eine Schleife über die Daten durchführen

Code kopieren Der Code lautet wie folgt:

var quadrate = [1,2,3,4].map(function (val) { 

Rückgabewert * val; 

}); 

// Quadrate sind gleich [1, 4, 9, 16]

24. Behalten Sie die angegebene Anzahl an Dezimalstellen bei

Code kopieren Der Code lautet wie folgt:

var num =2.443242342;

num = num.toFixed(4); // num wird gleich 2,4432 sein

Beachten Sie, dass toFixec() eine Zeichenfolge und keine Zahl zurückgibt.

25. Probleme mit der Gleitkommaberechnung

Code kopieren Der Code lautet wie folgt:

0,1 0,2 === 0,3 // ist falsch 

9007199254740992 1 // ist gleich 9007199254740992

9007199254740992 2 // ist gleich 9007199254740994

Warum? Weil 0,1 0,2 gleich 0,30000000000000004 ist. Zahlen in JavaScript werden gemäß dem IEEE 754-Standard erstellt und intern als 64-Bit-Gleitkomma-Dezimalzahlen dargestellt. Weitere Informationen finden Sie unter der Codierung von Zahlen in JavaScript.

Dieses Problem kann durch die Verwendung von toFixed() und toPrecision() gelöst werden.

26. Überprüfen Sie die Eigenschaften des Objekts durch die For-In-Schleife
Die folgende Verwendung kann die Eingabe der Prototypeigenschaften des Objekts während der Iteration verhindern.

Code kopieren Der Code lautet wie folgt:

for (Var-Name im Objekt) { 

If (object.hasOwnProperty(name)) { 

// etwas mit dem Namen machen

}  

}

27. Komma-Operator

Code kopieren Der Code 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. Variablen, die für Berechnungen und Abfragen verwendet werden, vorübergehend speichern
In jQuery-Selektoren können ganze DOM-Elemente temporär gespeichert werden.

Code kopieren Der Code lautet wie folgt:

var navright = document.querySelector('#right');
var navleft = document.querySelector('#left');
var navup = document.querySelector('#up');
var navdown = document.querySelector('#down');

29. Überprüfen Sie im Voraus die an isFinite() übergebenen Parameter

Code kopieren

Der Code lautet wie folgt: isFinite(0/0); // false isFinite("foo"); // false

isFinite("10"); // true

isFinite(10); // true

isFinite(undefiniert); // false

isFinite(); // false

isFinite(null); // wahr, darauf sollte besondere Aufmerksamkeit gelegt werden 

30. Vermeiden Sie die Verwendung negativer Zahlen als Indizes in Arrays

Code kopieren

Der Code lautet wie folgt: var zahlenArray = [1,2,3,4,5]; var from = zahlenArray.indexOf("foo") ; // from ist gleich -1

zahlenArray.splice(from,2); // gibt [5]

 zurück

Beachten Sie, dass der an splice übergebene Indexparameter keine negative Zahl sein sollte. Wenn es sich um eine negative Zahl handelt, wird das Element am Ende des Arrays gelöscht.

31. Verwenden Sie JSON zum Serialisieren und Deserialisieren

Code kopieren

Der Code lautet wie folgt:

var person = {Name:'Saad', Alter: 26, Abteilung: {ID: 15, Name: "R&D"} };

var stringFromPerson = JSON.stringify(person);

/* Das Ergebnis von stringFromPerson ist „{“name“: „Saad“, „age“:26, „department“:{“ID“:15, „name“: „R&D“}}“ */

var personFromString = JSON.parse(stringFromPerson);

/* Der Wert von personFromString ist derselbe wie das Personenobjekt */

32. Verwenden Sie weder eval() noch den Funktionskonstruktor
eval() und Funktionskonstruktor (Funktionskonstruktor) sind relativ teuer. Bei jedem Aufruf muss die JavaScript-Engine den Quellcode in ausführbaren Code konvertieren.

Code kopieren Der Code lautet wie folgt:

var func1 = neue Funktion(functionCode);

var func2 = eval(functionCode);

33. Vermeiden Sie die Verwendung von with()
Die Verwendung von with() kann Variablen zum globalen Bereich hinzufügen. Wenn daher andere Variablen mit demselben Namen vorhanden sind, kann es leicht zu Verwechslungen kommen und der Wert wird überschrieben.

34. Nicht for-in für Arrays verwenden
Vermeiden Sie:

Code kopieren Der Code lautet wie folgt:

var sum = 0; 

for (var i in arrayNumbers) { 

sum = arrayNumbers[i];
}

Stattdessen:

Code kopieren Der Code lautet wie folgt:

var sum = 0; 

for (var i = 0, len = arrayNumbers.length; i < len; i ) { 

sum = arrayNumbers[i];
}

Ein weiterer Vorteil besteht darin, dass sich die beiden Variablen i und len in der ersten Anweisung der for-Schleife befinden und nur einmal initialisiert werden, was schneller ist als die folgende Schreibweise:

Code kopieren Der Code lautet wie folgt:

for (var i = 0; i < arrayNumbers.length; i )

35. Verwenden Sie Funktionen anstelle von Zeichenfolgen, wenn Sie an setInterval() und setTimeout() übergeben.
Wenn Sie eine Zeichenfolge an setTimeout() und setInterval() übergeben, werden diese auf ähnliche Weise wie bei eval konvertiert, was definitiv langsamer ist. Verwenden Sie daher nicht:

Code kopieren Der Code lautet wie folgt:

setInterval('doSomethingPeriodically()', 1000); setTimeout('doSomethingAfterFiveSeconds()', 5000);

Verwenden Sie stattdessen:

Code kopieren Der Code lautet wie folgt: setInterval(doSomethingPeriodically, 1000);

setTimeout(doSomethingAfterFiveSeconds, 5000);

36. Verwenden Sie switch/case anstelle eines großen Stapels von if/else

Bei der Beurteilung, dass mehr als zwei Zweige vorhanden sind, ist die Verwendung von switch/case schneller, eleganter und der Codeorganisation förderlicher. Wenn mehr als 10 Zweige vorhanden sind, verwenden Sie natürlich keinen switch/case.

37. Verwenden Sie Zahlenintervalle in Schalter/Groß-/Kleinschreibung

Tatsächlich kann die Fallbedingung in switch/case auch so geschrieben werden:

Code kopieren Der Code lautet wie folgt:

Funktion getCategory(age) { 

var Category = „“;
switch (true) { 

case isNaN(age): 

            Kategorie = „kein Alter“ 

Pause; 

Fall (Alter >= 50): 

            Kategorie = „Alt“ 

Pause; 

Fall (Alter <= 20): 

            Kategorie = „Baby“ 

Pause; 

                Standard:                                                              
            Kategorie = „Jung“;
Pause; 

}; 

Rückgabekategorie; 

} 

getCategory(5); // gibt „Baby“ zurück

38. Verwenden Sie Objekte als Prototypen von Objekten

Auf diese Weise können Sie ein Objekt als Parameter angeben, um ein neues Objekt basierend auf diesem Prototyp zu erstellen:

Code kopieren Der Code lautet wie folgt: Funktionsklon (Objekt) {

Funktion OneShotConstructor(){}; OneShotConstructor.prototype = object;

Gibt new OneShotConstructor() zurück
} 

clone(Array).prototype; // []

39. HTML-Feldkonvertierungsfunktion

Code kopieren

Der Code lautet wie folgt: Funktion escapeHTML(text) { var replacements= {"<": "<", ">": ">", "&": "&", """: """}; Rückgabe text.replace(/[<>&"]/g, function(character) { Ersatz zurückgeben[Zeichen];

});

}

40. Verwenden Sie try-catch-finally nicht innerhalb einer Schleife

Der Catch-Teil von try-catch-finally weist die Ausnahme während der Ausführung einer Variablen zu, und diese Variable wird im Laufzeitbereich in eine neue Variable umgewandelt.

Nicht:

Code kopieren

Der Code lautet wie folgt: var object = ['foo', 'bar'], i; for (i = 0, len = object.length; i Versuchen Sie es mit { // etwas tun, das eine Ausnahme auslöst }

fangen (e) {

// Ausnahme behandeln 

} 

}

Stattdessen: 

Code kopieren

Der Code lautet wie folgt:

var object = ['foo', 'bar'], i; Versuchen Sie es mit { for (i = 0, len = object.length; i // etwas tun, das eine Ausnahme auslöst } }

fangen (e) {

// Ausnahme behandeln 

}

41. Achten Sie bei der Verwendung von XMLHttpRequests auf die Einstellung des Timeouts

Wenn XMLHttpRequests ausgeführt wird und längere Zeit keine Antwort erfolgt (z. B. Netzwerkprobleme usw.), sollte die Verbindung beendet werden. Diese Arbeit kann über setTimeout() abgeschlossen werden:

Code kopieren
Der Code lautet wie folgt:

var xhr = new XMLHttpRequest ();
xhr.onreadystatechange = function () { 

If (this.readyState == 4) { 

                                                                      ,,,,,,,,,,,,,,,,,,,,,,,,,,,,
// etwas mit Antwortdaten machen 

}  

} 

var timeout = setTimeout( function () { 

xhr.abort(); // Fehlerrückruf aufrufen 

}, 60*1000 /* Timeout nach einer Minute */ );
xhr.open('GET', url, true); 

xhr.send();

Gleichzeitig ist zu beachten, dass nicht mehrere XMLHttpRequests-Anfragen gleichzeitig initiiert werden.

42. Umgang mit WebSocket-Timeout

Normalerweise unterbricht der Server die Verbindung, nachdem eine WebSocket-Verbindung erstellt wurde und innerhalb von 30 Sekunden keine Aktivität stattfindet. Die Firewall kann die Verbindung auch abbrechen, wenn innerhalb des Einheitenzeitraums keine Aktivität erfolgt.

Um dies zu verhindern, können Sie in bestimmten Abständen eine leere Nachricht an den Server senden. Diese Anforderung kann durch die folgenden zwei Funktionen erreicht werden: Eine dient dazu, die Verbindung aktiv zu halten, und die andere dient speziell dazu, diesen Zustand zu beenden.

Code kopieren Der Code 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 Methode onOpen() der WebSocket-Verbindung platziert werden, und cancelKeepAlive() wird am Ende der Methode onClose() platziert. 

43. Bitte beachten Sie, dass primitive Operatoren schneller sind als Funktionsaufrufe. Verwenden Sie VanillaJS

Tun Sie beispielsweise Folgendes im Allgemeinen nicht:

Code kopieren

Der Code lautet wie folgt: var min = Math.min(a,b); A.push(v);

Es kann ersetzt werden durch:

Code kopieren

Der Code lautet wie folgt: var min = a < b ? a : b; A[A.length] = v;

44. Achten Sie bei der Entwicklung auf die Codestruktur und überprüfen und komprimieren Sie den JavaScript-Code, bevor Sie online gehen

Sie können Tools wie JSLint oder JSMin verwenden, um Ihren Code zu überprüfen und zu minimieren. 

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung des Funktionsmusters in JavaScript_Javascript-KenntnissenNächster Artikel：Detaillierte Erläuterung des Funktionsmusters in JavaScript_Javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen