1. Verwenden Sie === anstelle von ==
JavaScript verwendet zwei verschiedene Gleichheitsoperatoren: ===|!== und ==|!=, bei Vergleichsoperationen ist die Verwendung des ersteren Best Practice.
„Wenn beide Operanden den gleichen Typ und Wert haben, gibt === true und !== false zurück – JavaScript: Language Essence
Bei Verwendung von == und! =, kann es zu einer Situation kommen, in der die Typen unterschiedlich sind. In diesem Fall werden die Typen der Operanden gezwungen, gleich zu sein und dann verglichen, was möglicherweise nicht das gewünschte Ergebnis ist.
2.Eval == Evil
Wenn wir es zunächst nicht kennen, gibt uns „eval“ Zugriff auf den JavaScript-Compiler (Anmerkung: Das scheint sehr mächtig zu sein). Im Wesentlichen können wir bei der Ausführung einen String als Parameter an eval übergeben.
Dies verringert nicht nur die Leistung des Skripts erheblich (Anmerkung: Der JIT-Compiler kann den Inhalt des Strings nicht vorhersagen und nicht vorkompilieren und optimieren), sondern birgt auch enorme Sicherheitsrisiken, da der auszuführende Text dies auch tut groß. Hohe Autorität, bleib weg.
3. Das Weglassen erspart möglicherweise keinen Ärger
Technisch gesehen können Sie die meisten geschweiften Klammern und Semikolons weglassen. Die meisten Browser werden den folgenden Code richtig verstehen:
if(someVariableExists) x = false
Dann, wenn jemand so ist:
if(someVariableExists) x = false anotherFunctionCall();
jemand, den Sie vielleicht denken dass der obige Code dem Folgenden entspricht:
if(someVariableExists) {
x = false;
anotherFunctionCall();
}Leider ist dieses Verständnis falsch. Die tatsächliche Bedeutung ist wie folgt:
if(someVariableExists) {
x = false;
}
anotherFunctionCall();Möglicherweise ist Ihnen aufgefallen, dass die Einrückung oben leicht die Illusion von geschweiften Klammern vermittelt. Zu Recht ist dies eine schreckliche Praxis und sollte unbedingt vermieden werden. Es gibt nur einen Fall, in dem die geschweiften Klammern weggelassen werden können, nämlich wenn es nur eine Zeile gibt, aber das ist umstritten.
if(2 + 2 === 4) return 'nicely done';
Denken Sie voraus
Es besteht die Möglichkeit, dass Sie eines Tages weitere Anweisungen zu Ihrem if-Block hinzufügen müssen. In diesem Fall müssen Sie diesen Code neu schreiben. Fazit: Auslassungen sind ein Minenfeld.
4. Platzieren Sie das Skript am Ende der Seite
Denken Sie daran – das Hauptziel besteht darin, die Seite so schnell wie möglich zu präsentieren Blockierung: Der Browser kann den folgenden Inhalt nicht weiter rendern, bis er geladen und ausgeführt wird. Daher müssen Benutzer länger warten.
Wenn Ihr js nur zur Verstärkung des Effekts verwendet wird – zum Beispiel ein Button-Click-Ereignis – platzieren Sie das Skript sofort vor dem Ende des Textkörpers. Dies ist definitiv die beste Vorgehensweise.
5. Vermeiden Sie die Deklaration von Variablen innerhalb einer For-Anweisung
Wenn Sie eine lange for-Anweisung ausführen, halten Sie den Anweisungsblock so prägnant wie möglich, zum Beispiel:
Ups:
for(var i = 0; i < someArray.length; i++) {
var container = document.getElementById('container');
container.innerHtml += 'my number: ' + i;
console.log(i);
}Beachten Sie, dass jede Schleife die Länge des Arrays berechnen muss und jedes Mal den Dom durchlaufen muss, um das „Container“-Element abzufragen – die Effizienz ist sehr gering!
Empfehlungen:
var container = document.getElementById('container');
for(var i = 0, len = someArray.length; i < len; i++) {
container.innerHtml += 'my number: ' + i;
console.log(i);
}
6. Der beste Weg, eine Zeichenfolge zu erstellen
Wenn Sie über ein Array iterieren müssen oder Objekt, denken Sie nicht immer an die „für“-Anweisung, seien Sie kreativ, Sie können immer einen besseren Weg finden, zum Beispiel wie den folgenden.
var arr = ['item 1', 'item 2', 'item 3', ...];
var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';Ich bin nicht dein Gott, aber bitte glaub mir (wenn du mir nicht glaubst, teste es selbst) – das ist bei weitem die schnellste Methode!
Die Verwendung von nativem Code (z. B. join()) ist unabhängig davon, was das System intern tut, normalerweise viel schneller als die Verwendung von nicht nativem Code.
7. Reduzieren Sie globale Variablen
“Solange mehrere globale Variablen unter einem Namensraum organisiert sind, wird die Interaktion mit anderen Anwendungen, Komponenten oder Klassen erheblich reduziert. “ – Douglas Crockford
var name = 'Jeffrey';
var lastName = 'Way';
function doSomething() {...}
console.log(name); // Jeffrey -- 或 window.name// 更好的做法var DudeNameSpace = {
name : 'Jeffrey',
lastName : 'Way',
doSomething : function() {...}
}
console.log(DudeNameSpace.name); // JeffreyHinweis: Dies wird einfach „DudeNameSpace“ genannt. Ein vernünftigerer Name.
8. Kommentare zum Code hinzufügen
Es scheint unnötig, aber bitte glauben Sie mir, versuchen Sie, Ihrem Code vernünftigere Kommentare hinzuzufügen. Wenn Sie einige Monate später auf Ihr Projekt zurückblicken, erinnern Sie sich möglicherweise nicht mehr an Ihre ursprünglichen Gedanken. Oder was ist, wenn einer Ihrer Kollegen Änderungen an Ihrem Code vornehmen muss? Alles in allem ist das Hinzufügen von Kommentaren zu Ihrem Code ein wichtiger Teil.
// 循环数组，输出每项名字（译者注：这样的注释似乎有点多余吧）for(var i = 0, len = array.length; i < len; i++) {
console.log(array[i]);
}
9. Nutzen Sie die progressive Verbesserung
Sorgen Sie für eine reibungslose Degradierung, wenn Javascript deaktiviert ist. Wir sind immer versucht zu denken: „Die meisten meiner Besucher haben bereits JavaScript aktiviert, also muss ich mir keine Sorgen machen.“ Dies ist jedoch ein großes Missverständnis.
Haben Sie sich jemals einen Moment Zeit genommen, um zu sehen, wie Ihre schöne Seite aussieht, wenn Javascript deaktiviert ist? (Dies ist einfach, indem Sie das Web Developer-Tool herunterladen (Anmerkung des Übersetzers: Chrome-Benutzer laden es im App Store herunter, IE-Benutzer stellen es in den Internetoptionen ein)), aber dies kann Ihre Website beschädigen. Als Faustregel gilt: Entwerfen Sie Ihre Website unter der Annahme, dass JavaScript deaktiviert ist, und verbessern Sie dann auf dieser Grundlage schrittweise Ihre Website.
10. Übergeben Sie keine String-Parameter an „setInterval“ oder „setTimeout“
Beachten Sie den folgenden Code:
setInterval( "document.getElementById('container').innerHTML += 'My new number: ' + i", 3000 );
不仅效率低下，而且这种做法和"eval"如出一辙。从不给setInterval和setTimeout传递字符串作为参数，而是像下面这样传递函数名。
setInterval(someFunction, 3000);
11.不要使用"with"语句
乍一看，"with"语句看起来像一个聪明的主意。基本理念是,它可以为访问深度嵌套对象提供缩写，例如……
with (being.person.man.bodyparts) {
arms = true;
legs = true;
}而不是像下面这样：
being.person.man.bodyparts.arms = true; being.person.man.bodyparts.legs= true;
不幸的是，经过测试后，发现这时“设置新成员时表现得非常糟糕。作为代替，您应该使用变量，像下面这样。
var o = being.person.man.bodyparts; o.arms = true; o.legs = true;
12.使用{}代替 new Ojbect()
在JavaScript中创建对象的方法有多种。可能是传统的方法是使用"new"加构造函数，像下面这样:
ar o = new Object();
o.name = 'Jeffrey';
o.lastName = 'Way';
o.someFunction = function() {
console.log(this.name);
}然而，这种方法的受到的诟病不及实际上多。作为代替,我建议你使用更健壮的对象字面量方法。
更好的做法
var o = {
name: 'Jeffrey',
lastName = 'Way',
someFunction : function() {
console.log(this.name);
}
};注意，果你只是想创建一个空对象，{}更好。
13.使用[]代替 new Array()
这同样适用于创建一个新的数组。
例如：
var a = new Array(); a[0] = "Joe"; a[1] = 'Plumber';// 更好的做法：var a = ['Joe','Plumber'];
“javascript程序中常见的错误是在需要对象的时候使用数组，而需要数组的时候却使用对象。规则很简单：当属性名是连续的整数时，你应该使用数组。否则，请使用对象”——Douglas Crockford
14.定义多个变量时，省略var关键字，用逗号代替
var someItem = 'some string';
var anotherItem = 'another string';
var oneMoreItem = 'one more string';// 更好的做法var someItem = 'some string',
anotherItem = 'another string',
oneMoreItem = 'one more string';应而不言自明。我怀疑这里真的有所提速，但它能是你的代码更清晰。
15.使用Firebug的"timer"功能优化你的代码
在寻找一个快速、简单的方法来确定操作需要多长时间吗？使用Firebug的“timer”功能来记录结果。
function TimeTracker(){
console.time("MyTimer");
for(x=5000; x > 0; x--){}
console.timeEnd("MyTimer");
}Das obige ist der detaillierte Inhalt vonAuf welche Details muss bei Javascript geachtet werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
