Praktische Verwendung von Javascript für Anfänger

1. Verwenden Sie lieber === anstelle von ==

JavaScript verwendet zwei Gleichheitsoperatoren: ===|!== und ==|!= Vergleich Die beste Vorgehensweise besteht darin, den vorherigen Satz von Operatoren zu verwenden.

"Wenn die beiden Operanden denselben Typ und Wert haben, ist das Ergebnis des ===-Vergleichs wahr und das Ergebnis des !== Vergleich ist falsch.“                                   . JavaScript-Sprachessenz

Wenn Sie jedoch == und != verwenden, treten beim Vergleich von Operanden unterschiedlichen Typs Probleme auf. In diesem Fall wird dieser Satz von Operatoren versuchen, nutzlos zu sein Zwang des Werts einer Zahl.

2. Eval ist gleichbedeutend mit schlecht

Für diejenigen, die mit JavaScript nicht vertraut sind: Die Funktion „evel“ gibt uns Zugriff auf den JavaScript-Compiler. Wir können das erhalten Ergebnis der String-Ausführung durch Übergabe eines String-Parameters an „eval“.

Dies wird nicht nur die Leistung Ihres Skripts erheblich verringern, sondern auch ein großes Sicherheitsrisiko darstellen, da dies möglich ist Übergeben Sie zu viel Klartext und vermeiden Sie die Verwendung der Auswertungsfunktion so weit wie möglich.

3. Seien Sie nicht faul

Bei einer ungeraden Zahl können Sie tatsächlich das Glück haben, die meisten wegzulassen des Textes. Die meisten Browser können den folgenden Codeausschnitt korrekt speichern:

if(someVarianbleExists)
x = false

Betrachten Sie diesen Code jedoch noch einmal:

if(someVariableExists)
 
x=false
anotherFunctionCall();

Einige Leute denken vielleicht, dass ein Stück des Codes entspricht:

if(someVariableExists){
x = false;
anotherFunctionCall();

Sie sollten auch bemerkt haben, dass die Einrückung im Code die Funktion von geschweiften Klammern imitiert. Dies ist natürlich eine sehr schreckliche Praxis und sollte unbedingt vermieden werden Die einzige Möglichkeit, die geschweiften Klammern wegzulassen, besteht in einer einzeiligen Aussage, aber selbst in diesem Fall ist es sehr umstritten.

if(2 + 2 ===4) return"nicely done";

Denken Sie immer an die Zukunft

Wenn etwas passiert In der Zukunft müssen Sie dieser if-Anweisung weitere Befehle hinzufügen. Was sollten Sie also tun? >

4. Verwenden Sie JS Lint

JSLint ist ein Debugger, der von Douglas Crockford geschrieben wurde, und er wird alle offensichtlichen Probleme in Ihrem Code und Fehler schnell beheben.

„JSLint nimmt eine Kopie des JavaScript-Quellcodes und scannt den Code. Wenn ein Problem gefunden wird, wird eine Meldung zurückgegeben, die das Problem und seine ungefähre Position im Quellcode beschreibt. Obwohl es sich bei dem Problem häufig um einen Syntaxfehler handelt, ist dies nicht unbedingt der Fall . JSLint prüft auch auf einige Stilgewohnheiten und strukturelle Probleme. Es stellt lediglich ein weiteres Paar Augen zur Verfügung, um Probleme zu finden, bevor das Schreiben des Skriptcodes abgeschlossen ist Fangen Sie keine dummen Fehler ein.

5. Verschieben Sie das Skript an das Ende der Seite

Diese Technik wird auch in früheren Artikeln dieser Serie empfohlen. Da sie jedoch sehr angemessen ist, habe ich Ich füge diese Informationen direkt hier ein.

Denken Sie daran – das Hauptziel dieser Best Practice besteht darin, die Seite so schnell wie möglich für den Benutzer zu laden. Beim Laden eines Skripts kann der Browser nicht fortfahren, bis die Seite vollständig geladen ist Daher muss der Benutzer länger warten, bevor er einen Fortschritt bemerkt.

Wenn die JS-Datei nur dazu dient, Funktionen hinzuzufügen – zum Beispiel nach dem Klicken auf eine bestimmte Schaltfläche – dann legen Sie diese Dateien ab unten, vor dem schließenden Tag des Körpers.

Bessere Vorgehensweise

6. Deklarieren Sie Variablen außerhalb der For-Anweisung

<p>And now you know my favorite kinds of corn. </p> <script type="text/javascript" src="path/to/file.js?1.1.11">
</script> <script type="text/javascript" src="path/to/anotherFile.js?1.1.11"></script> </body> </html>

Beim Ausführen einer langen 'for'-Anweisung, lassen Sie einfach die Interpretationsmaschine die Arbeit machen, die sie tun muss Das Code-Snippet muss die Länge des Arrays überprüfen. Und jedes Mal muss es den DOM-Baum durchlaufen, um das „Container“-Element zu finden – wie ineffizient!!!

Besserer Ansatz

7. Der schnellste Weg, einen String zu erstellen

Wenn Traversierung erforderlich ist. Wenn Sie mit einem Array oder Objekt arbeiten, verwenden Sie nicht immer Ihre praktische „for“-Anweisung, seien Sie kreativ und finden Sie den schnellsten Weg, um den Job zu bekommen erledigt.

for(var i = 0; i < someArray.length; i++) {     
var container = document.getElementById(&#39;container&#39;);     
container.innerHtml += &#39;my number: &#39; + i;     
console.log(i); }

"Ich werde mich nicht mit Benchmarks herumschlagen. Du musst mir einfach vertrauen (oder es selbst testen) - es ist bei weitem der schnellste Weg! „

Die Verwendung nativer Methoden (wie join()), unabhängig davon, was hinter der Abstraktionsebene passiert, ist normalerweise viel schneller als jede nicht-native Methode.

ar container = document.getElementById('container'); 
for(var i = 0, len = someArray.length; i < len; i++) {     
container.innerHtml += &#39;my number: &#39; + i;     
console.log(i); }

8. Reduzieren Sie globale Variablen

Durch die Kapselung globaler Dinge in einem einzigen Namespace können Sie die Wahrscheinlichkeit verwirrender Interaktionen mit anderen Anwendungen, Komponenten und Codebibliotheken erheblich reduzieren.

var arr = [&#39;item 1&#39;, &#39;item 2&#39;, &#39;item 3&#39;, ...]; var list = &#39;<ul><li>&#39; + arr.join(&#39;</li><li>&#39;) + &#39;</li></ul>&#39;;

Bessere Vorgehensweise

9. Kommentieren Sie Ihren Code

Es mag zunächst unnötig erscheinen, aber glauben Sie mir, Sie werden Ihren Code so gut wie möglich kommentieren wollen, wenn Sie in ein paar Monaten darauf zurückkommen. Was passiert? Sie können Ihre ursprünglichen Gedanken nicht einfach zu jeder Codezeile mitteilen. Oder was ist, wenn einer Ihrer Kollegen immer daran denken muss, wichtige Teile Ihres Codes zu kommentieren? 🎜> 10. Nutzen Sie die progressive Verbesserung

Überlegen Sie immer, wie Sie mit Situationen umgehen sollen, in denen JavaScript deaktiviert ist. Sie denken möglicherweise: „Die meisten Leser meiner Seite haben es aktiviert, daher mache ich mir darüber keine Sorgen.“ Das Problem ist jedoch ein großer Fehler

你曾花时间去看过关闭JavaScript后你的漂亮的花动态哦是什么样么?也许他会完全破坏你的站点.按照以往经验,设计你的站点是应假设将会禁用JavaScript,那么,一旦你这样做了,那么开始渐进的增强你的网页布局吧!

11.不要传递字符串给"SetInterval"或"SetTimeout"

考虑一下如下代码:

etInterval( "document.getElementById('container').innerHTML += 'my new number: ' + i", 3000 );

 这段代码不仅抵消,而且其行为与"eval"函数相同.永远不要传给字符串给SetInterval和SetTimeout.相反,颍川地一个函数名.

setInterval(someFunction, 3000);

12.不要使用"with"语句

乍一看,'with'语句似乎是个聪明的想法.基本概念是他们能够为深度嵌套对象提供一种简写方式,例如...

with (being.person.man.bodyparts) {     arms = true;     legs = true; }

取代如下写法

being.person.man.bodyparts.arms = true; being.person.man.bodyparts.legs = true;

很不幸,经过一些测试,会发现这种简写在设置新成员时表现非常糟糕.作为替代.你应该使用var.

var o = being.person.man.bodyparts; o.arms = true; o.legs = true;

13 使用{}而不是new Object()

JavaScript中有很多种穿件对象的方式.也许更传统的方式是使用''new''构造器.像这样:

var o = new Object(); o.name = 'Jeffrey'; o.lastname = 'Way'; o.someFuncion = function() {     console.log(this.name); }

然而,这种方式因其行为并不是我们所想的那样而被认为是"糟糕的实践".相反,我推荐你使用更健壮的对象字面方法.

更好的写法 

var o = {     name: 'Jeffrey',     lastName: 'Way',     someFunction: function() {         console.log(this.name);     } };

注意如果你只是想简单地创建个空对象,{}就派上用场了.

var o = {};

对象字面量使我们能够编写支持很多特性的代码,并对代码的实现者来说代码仍然相对直观,不需要直接调用构造器或维护传递给函数的参数的正确顺序,等等.

14.使用[]而不是New Array()

这同样适用于创建一个新数组

过去的写法

var a = new Array(); a[0] = 'Joe'; a[1] = 'Plumber';

更好的写法 var a = ['Joe', 'Plumber'];

Javascript中一个常见的错误是需要数组时使用对象或需要对象时使用数组,规则很简单:当属姓名是小的连续整数时,你应该使用数组,否则,使用对象

15.一长串变量? 省略''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';

相当的不言自明,我不知道这里是否有任何真正的速度提升,但是它使你的代码更加简洁了.

16.始终,始终使用分号

技术上来说,大多数浏览器都允许你省略一些分号

var someItem = 'some string' function doSomething() {     return 'something' }

话虽如此,但这是一种非常糟糕的做法,可能导致更大的问题,问题查找起来也更困难

更好的写法

var someItem = 'some string'; function doSomething() {     return 'something'; }

 18.For in 语句

遍历对象内的成员时,你也会得到方法函数,为了解决这个问题,应始终将你的代码包装在一个if语句中来过滤信息

for(key in object) {     if(object.hasOwnProperty(key)) {         ... then do something...     } }

19.使用firebug的''Timer''特性来优化代码

需要一种快速简单地方法来检测一个操作花费多长时间么?

使用Firebug的timer特性记录结果

function TimeTracker() {     console.time("MyTimer");     for(x=5000; x > 0; x--){}     console.timeEnd("MyTimer"); }

20.读书 面向对象的JavaScript

•               JavaScript：语言精粹

•                学习jQuery 1.3

•               学习JavaScript

 

 21.自执行函数(self-executing functions)

相比调用函数,当页面加载或调用父函数时,让函数自动执行会简单些.简单地将你的函数包装在圆括号内,并添加额外的一对圆括号,其本质上就调用了这个函数

(function doSomething() {     return {         name: 'jeff',         lastName: 'way'     };  })();

22.原始(raw)javascript代码的执行速度始终快于使用代码库

 Javascript代码库,如jQuery和mootools,能够为你节省大量的编码时间--特别是使用ajax操作.话虽如此,适中谨记代码库的执行速度适中是比不上原始JavaScript代码的(假设了代码的正确性)

jQuery的each方法来做遍历非常赞,但使用原生for语句适中会快一些

23.crockford的json.parse

虽然JavaScript 2 应该有一个内置的json解析器,但我们仍旧需要自己实现.Douglas Crockford，JSON的创造者，已经实现了一个解析器供你使用。可以从这里下载。

简单地导入该脚本,你就能获得一个新的json全局对象,用于解析你的.json文件.

var response = JSON.parse(xhr.responseText); 
var container = document.getElementById('container'); 
for(var i = 0, len = response.length; i < len; i++) {     
container.innerHTML += &#39;<li>&#39; + response[i].name + &#39; : &#39; + response[i].email + &#39;</li>&#39;;
 }

24.删除''language''

在script标签内最常见的language属性,现在已经不用了  

Das obige ist der detaillierte Inhalt vonPraktische Verwendung von Javascript für Anfänger. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!