45 Tipps zur JavaScript-Entwicklung

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, mit Ausnahme einiger weniger, ob es sich um die JavaScript-Engine des Browsers oder den serverseitigen JavaScript-Interpreter handelt. Alle anwendbar.

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

1. Stellen Sie sicher, dass Sie das Schlüsselwort var verwenden, wenn Sie einer Variablen zum ersten Mal einen Wert zuweisen.

Wenn eine Variable direkt ohne Deklaration zugewiesen wird, wird sie als neue Variable verwendet Versuchen Sie, die Verwendung globaler Variablen standardmäßig zu vermeiden.

2. Verwenden Sie === anstelle von ==

== und der !=-Operator konvertiert den Datentyp bei Bedarf automatisch. Aber === und !== nicht, sie vergleichen Werte und Datentypen gleichzeitig, was sie auch schneller macht als == und !=.

[10] === 10    // is false
[10]  == 10    // is true
'10' == 10     // is true
'10' === 10    // is false
 []   == 0     // is true
 [] ===  0     // is false
 '' == false   // is true but true == "a" is false
 '' === false  // is false

3. Die logischen Ergebnisse von unterdefinierten, null, 0, falschen, NaN- und leeren Zeichenfolgen sind falsch

4. Verwenden Sie ein Semikolon am Ende der Zeile

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

5. Verwenden Sie den Objektkonstruktor

function Person(firstName, lastName){
    this.firstName =  firstName;
    this.lastName = lastName;
}
var Saad = new Person("Saad", "Mousliki");

6. Verwenden Sie „typeof“, „instanceof“ und „constructor“ sorgfältig.

• typeof: Unärer JavaScript-Operator Beachten Sie, dass typeof null auch ein Objekt zurückgibt und die meisten Objekttypen (Array, Array, Zeit, Datum usw.) auch ein Objekt zurückgeben.

• Konstruktor: Internes Prototypattribut, das durch Code überschrieben werden kann

• instanceof: JavaScript-Operator, der im Konstruktor in der Prototypenkette gesucht wird. Wenn er gefunden wird, wird true zurückgegeben , andernfalls wird false zurückgegeben

var arr = ["a", "b", "c"];
typeof arr;   // 返回 "object" 
arr instanceof Array // true
arr.constructor();  //[]

7. Selbstaufrufende Funktionen verwenden

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

(function(){
    // 置于此处的代码将自动执行
})();  
(function(a,b){
    var result = a+b;
    return result;
})(10,20)

8. Erhalten Sie zufällige Zahlen aus dem Array

var items = [12, 548 , 'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' , 2145 , 119];
var  randomItem = items[Math.floor(Math.random() * items.length)];

9. Diese Funktion ist Wird zur Generierung von Tests verwendet. Besonders häufig kommen falsche Daten vor, wie beispielsweise Löhne innerhalb einer bestimmten Spanne.

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

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

11. Erzeugen Sie eine zufällige alphanumerische Zeichenfolge

var numbersArray = [] , max = 100;
for( var i=1; numbersArray.push(i++) < max;);  // numbers = [1,2,3 ... 100]

12 Reihenfolge des Arrays von Zufallszahlen

function generateRandomAlphaNum(len) {
    var rdmString = "";
    for( ; rdmString.length < len; rdmString  += Math.random().toString(36).substr(2));
    return  rdmString.substr(0, len);
}

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). kann diese Diskussion auf StackOverFlow sehen.

var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];
numbers = numbers.sort(function(){ return Math.random() - 0.5});
/* numbers 数组将类似于 [120, 5, 228, -215, 400, 458, -85411, 122205]  */

13. String-Leerzeichen entfernen

Java, C#, PHP und andere Sprachen haben spezielle Funktionen zum Entfernen von String-Leerzeichen implementiert, diese sind jedoch in JavaScript nicht verfügbar Führen Sie diese String-Objektfunktion und eine Trim-Funktion aus:

Die neue JavaScript-Engine verfügt bereits über eine native Implementierung von trim().

String.prototype.trim = function(){return this.replace(/^\s+|\s+$/g, "");};

14. Zwischen Arrays anhängen

15. Objekte in Arrays konvertieren

var array1 = [12 , "foo" , {name "Joe"} , -2458];
var array2 = ["Doe" , 555 , 100];
Array.prototype.push.apply(array1, array2);
/* array1 值为  [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100] */

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

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

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

function isNumber(n){
    return !isNaN(parseFloat(n)) && isFinite(n);
}

Wenn die toString()-Methode jedoch überschrieben wird, wird dies nicht der Fall sein arbeiten. . Sie können auch die folgende Methode verwenden:

function isArray(obj){
    return Object.prototype.toString.call(obj) === '[object Array]' ;
}

Wenn Sie im Browser keinen Frame verwenden, können Sie auch die Instanz von verwenden. Wenn der Kontext jedoch zu komplex ist, können Fehler auftreten.

Array.isArray(obj); // its a new Array method

18. Holen Sie sich die maximalen und minimalen Werte im Array

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]  
// myArray 的构造器已经丢失，instanceof 的结果将不正常
// 构造器是不能跨 frame 共享的
arr instanceof Array; // false

19. Löschen Sie das Array direkt aus dem Array Oder Element entfernen

var  numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411]; 
var maxInNumbers = Math.max.apply(Math, numbers); 
var minInNumbers = Math.min.apply(Math, numbers);

Wenn delete direkt auf das Array-Element angewendet wird, wird es nicht gelöscht, sondern das Element wird auf undefiniert gesetzt. Beim Löschen von Array-Elementen sollte Splice verwendet werden.

var myArray = [12 , 222 , 1000 ];  
myArray.length = 0; // myArray will be equal to [].

Nicht:

Stattdessen:

Sie können Löschen verwenden, wenn Sie die Eigenschaften eines Objekts löschen.

var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]; 
items.length; // return 11 
delete items[3]; // return true 
items.length; // return 11 
/* items 结果为 [12, 548, "a", undefined × 1, 5478, "foo", 8852, undefined ×
 1, "Doe", 2154, 119] */

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

var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]; 
items.length; // return 11 
items.splice(3,1) ; 
items.length; // return 10 
/* items 结果为 [12, 548, "a", 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119]

Im vorherigen Beispiel wird das Längenattribut verwendet, um das Array zu kürzen:

Gleichzeitig erhöht sich der Längenwert des Arrays, wenn das Längenattribut vergrößert wird, und undefiniert wird als neues Element zum Füllen verwendet. Länge ist eine beschreibbare Eigenschaft.

22. Verwenden Sie logisches UND oder in Bedingungen

var myArray = [12 , 222 , 1000 , 124 , 98 , 10 ];  
myArray.length = 4; // myArray will be equal to [12 , 222 , 1000 , 124].

Logisches ODER kann auch verwendet werden, um Standardwerte festzulegen, beispielsweise die Standardwerte von Funktionsparametern.

myArray.length = 10; // the new array length is 10 
myArray[myArray.length - 1] ; // undefined

23. Lassen Sie die Methode „map()“ die Daten durchlaufen

var foo = 10;  
foo == 10 && doSomething(); // is the same thing as if (foo == 10) doSomething(); 
foo == 5 || doSomething(); // is the same thing as if (foo != 5) doSomething();

24. Behalten Sie die angegebene Anzahl von Dezimalstellen bei

function doSomething(arg1){ 
    arg1 = arg1 || 10; // arg1 will have 10 as a default value if it’s not already set
}

Hinweis Das toFixec() Was zurückgegeben wird, ist eine Zeichenfolge, keine Zahl.

var squares = [1,2,3,4].map(function (val) {  
    return val * val;  
}); 
// squares will be equal to [1, 4, 9, 16]

25. Probleme mit Gleitkommaberechnungen

var num =2.443242342;
num = num.toFixed(4);  // num will be equal to 2.4432

Warum? Weil 0,1+0,2 gleich 0,30000000000000004 ist. JavaScript-Zahlen werden gemäß dem IEEE 754-Standard erstellt und intern durch 64-Bit-Gleitkomma-Dezimalzahlen dargestellt. Weitere Informationen finden Sie unter, wie Zahlen in JavaScript mit toFixed() codiert werden. und toPrecision() Lösen Sie dieses Problem.

26、通过for-in循环检查对象的属性

下面这样的用法，可以防止迭代的时候进入到对象的原型属性中。

for (var name in object) {  
    if (object.hasOwnProperty(name)) { 
        // do something with name
    }  
}

27、逗号操作符

var a = 0; 
var b = ( a++, 99 ); 
console.log(a);  // a will be equal to 1 
console.log(b);  // b is equal to 99

28、临时存储用于计算和查询的变量

在jQuery选择器中，可以临时存储整个DOM元素。

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

29、提前检查传入isFinite()的参数

isFinite(0/0) ; // false
isFinite("foo"); // false
isFinite("10"); // true
isFinite(10);   // true
isFinite(undefined);  // false
isFinite();   // false
isFinite(null);  // true，这点当特别注意

30、避免在数组中使用负数做索引

var numbersArray = [1,2,3,4,5];
 var from = numbersArray.indexOf("foo") ; // from is equal to -1
 numbersArray.splice(from,2); // will return [5]

注意传给splice的索引参数不要是负数，当是负数时，会从数组结尾处删除元素。

31、用JSON来序列化与反序列化

var person = {name :'Saad', age : 26, department : {ID : 15, name : "R&D"} };
var stringFromPerson = JSON.stringify(person);
/* stringFromPerson 结果为 "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}"   */
var personFromString = JSON.parse(stringFromPerson);
/* personFromString 的值与 person 对象相同  */

32、不要使用eval()或者函数构造器

eval()和函数构造器（Functionconsturctor）的开销较大，每次调用，JavaScript引擎都要将源代码转换为可执行的代码。

var func1 = new Function(functionCode);
var func2 = eval(functionCode);

32、不要使用eval()或者函数构造器

eval()和函数构造器（Functionconsturctor）的开销较大，每次调用，JavaScript引擎都要将源代码转换为可执行的代码。

var func1 = new Function(functionCode);
var func2 = eval(functionCode);

33、避免使用with()

使用with()可以把变量加入到全局作用域中，因此，如果有其它的同名变量，一来容易混淆，二来值也会被覆盖。

34、不要对数组使用for-in

避免：

var sum = 0;  
for (var i in arrayNumbers) {  
    sum += arrayNumbers[i];  
}

而是：

var sum = 0;  
for (var i = 0, len = arrayNumbers.length; i < len; i++) {  
    sum += arrayNumbers[i];  
}

另外一个好处是，i和len两个变量是在for循环的第一个声明中，二者只会初始化一次，这要比下面这种写法快：

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

35、传给setInterval()和setTimeout()时使用函数而不是字符串

如果传给setTimeout()和setInterval()一个字符串，他们将会用类似于eval方式进行转换，这肯定会要慢些，因此不要使用：

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

而是用：

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

36、使用switch/case代替一大叠的if/else

当判断有超过两个分支的时候使用switch/case要更快一些，而且也更优雅，更利于代码的组织，当然，如果有超过10个分支，就不要使用switch/case了。

37、在switch/case中使用数字区间

其实，switch/case中的case条件，还可以这样写：

function getCategory(age) {  
    var category = "";  
    switch (true) {  
        case isNaN(age):  
            category = "not an age";  
            break;  
        case (age >= 50):  
            category = "Old";  
            break;  
        case (age <= 20):  
            category = "Baby";  
            break;  
        default:  
            category = "Young";  
            break;  
    };  
    return category;  
}  
getCategory(5);  // 将返回 "Baby"

38、使用对象作为对象的原型

下面这样，便可以给定对象作为参数，来创建以此为原型的新对象：

function clone(object) {  
    function OneShotConstructor(){}; 
    OneShotConstructor.prototype = object;  
    return new OneShotConstructor(); 
} 
clone(Array).prototype ;  // []

39、HTML字段转换函数

function escapeHTML(text) {  
    var replacements= {"<": "<", ">": ">","&": "&", "\"": """};                      
    return text.replace(/[<>&"]/g, function(character) {  
        return replacements[character];  
    }); 
}

40、不要在循环内部使用try-catch-finally

try-catch-finally中catch部分在执行时会将异常赋给一个变量，这个变量会被构建成一个运行时作用域内的新的变量。

切忌：

var object = ['foo', 'bar'], i;  
for (i = 0, len = object.length; i <len; i++) {  
    try {  
        // do something that throws an exception 
    }  
    catch (e) {   
        // handle exception  
    } 
}

而应该：

var object = ['foo', 'bar'], i;  
try { 
    for (i = 0, len = object.length; i <len; i++) {  
        // do something that throws an exception 
    } 
} 
catch (e) {   
    // handle exception  
}

41、使用XMLHttpRequests时注意设置超时

XMLHttpRequests在执行时，当长时间没有响应（如出现网络问题等）时，应该中止掉连接，可以通过setTimeout()来完成这个工作：

var xhr = new XMLHttpRequest (); 
xhr.onreadystatechange = function () {  
    if (this.readyState == 4) {  
        clearTimeout(timeout);  
        // do something with response data 
    }  
}  
var timeout = setTimeout( function () {  
    xhr.abort(); // call error callback  
}, 60*1000 /* timeout after a minute */ ); 
xhr.open('GET', url, true);  
xhr.send();

同时需要注意的是，不要同时发起多个XMLHttpRequests请求。

42、处理WebSocket的超时

通常情况下，WebSocket连接创建后，如果30秒内没有任何活动，服务器端会对连接进行超时处理，防火墙也可以对单位周期没有活动的连接进行超时处理。

为了防止这种情况的发生，可以每隔一定时间，往服务器发送一条空的消息。可以通过下面这两个函数来实现这个需求，一个用于使连接保持活动状态，另一个专门用于结束这个状态。

var timerID = 0; 
function keepAlive() { 
    var timeout = 15000;  
    if (webSocket.readyState == webSocket.OPEN) {  
        webSocket.send('');  
    }  
    timerId = setTimeout(keepAlive, timeout);  
}  
function cancelKeepAlive() {  
    if (timerId) {  
        cancelTimeout(timerId);  
    }  
}

keepAlive()函数可以放在WebSocket连接的onOpen()方法的最后面，cancelKeepAlive()放在onClose()方法的最末尾。

43、时间注意原始操作符比函数调用快，使用VanillaJS

比如，一般不要这样：

var min = Math.min(a,b); 
A.push(v);

可以这样来代替：

var min = a < b ? a : b; 
A[A.length] = v;

44、开发时注意代码结构，上线前检查并压缩JavaScript代码

别忘了在写代码时使用一个代码美化工具。使用JSLint(一个语法检查工具)并且在上线前压缩代码（比如使用JSMin）。注：现在代码压缩一般推荐 UglifyJS (http://www.php.cn/)

45、JavaScript博大精深，这里有些不错的学习资源

• Code Academy资源：http://www.php.cn/

• Marjin Haverbekex编写的Eloquent JavaScript：http://www.php.cn/

• John Resig编写的Advanced JavaScript：http://www.php.cn/

 以上就是JavaScript 开发的45个技巧的内容，更多相关内容请关注PHP中文网（www.php.cn）！