15條JavaScript最佳實踐小結_javascript技巧

本文檔整理大部分公認的、或者少有爭議的JavaScript良好書寫規范（Best Practice）。一些顯而易見的常識就不再論述（比如要用對象支持識別判斷，而不是瀏覽器識別判斷；比如不要嵌套太深）。條目順序按重要級粗略的從高到低排列。
把外部JavaScript文件放在HTML底部
我們的目標是相同的：為用戶盡可能快地顯示內容。當載入一個腳本文件的時候，HTML會停止解析，直到腳本載入完畢。因此，用戶可能會長時間對著一個空白的屏幕，看上去什么都沒有發生。如果你的JavaScript代碼只是增加一些功能（比如按鈕的點擊動作），那么盡管大膽地把文件引用放在HTML底部吧（就在之前），你會看到明顯的速度提升。如果是用于其他目的的腳本文件，則需要慎重地考慮。但無論如何，這毫無疑問是一個非常值得考慮的地方。
優化循環
循環遍歷一個數組
代碼如下:
//這段糟糕的代碼會在每次進入循環的時候都計算一次數組的長度
var names = ['George','Ringo','Paul','John'];
for(var i=0;idoSomeThingWith(names[i]);
}

代碼如下:
//這樣的話，就只會計算一次了
var names = ['George','Ringo','Paul','John'];
var all = names.length;
for(var i=0;idoSomeThingWith(names[i]);
}

代碼如下:
//這樣就更加簡短了
var names = ['George','Ringo','Paul','John'];
for(var i=0,j=names.length;idoSomeThingWith(names[i]);
}

代碼如下:
//這段代碼的糟糕之處在于，它把變量聲明放在循環體內了，每次循環都會創建變量
for(var i = 0; i < someArray.length; i++) {
var container = document.getElementById('container');
container.innerHtml += 'my number: ' + i;
console.log(i);
}

代碼如下:
//在循環體外聲明變量，變量只會創建一次
var container = document.getElementById('container');
for(var i = 0, len = someArray.length; i < len; i++) {
container.innerHtml += 'my number: ' + i;
console.log(i);
}

用盡量簡短的代碼
如果可以增加可讀性的話，那么使用代碼的簡短格式是有意義的，下面是一份不完全的列表：
代碼如下:
//對于條件判斷只有兩次的，這是一種冗長的寫法
var direction;
if(x > 100){
direction = 1;
} else {
direction = -1;
}

代碼如下:
//更好的代碼
var direction = (x > 100) ? 1 : -1;

代碼如下:
//判斷一個 變量是否定義，如果否，就賦予一個值，糟糕的代碼
if(v){
var x = v;
} else {
var x = 10;
}

代碼如下:
//更好的代碼
var x = v || 10;

代碼如下:
//重復了變量名很多次
var cow = new Object();
cow.colour = 'brown';
cow.commonQuestion = 'What now?';
cow.moo = function(){
console.log('moo');
}
cow.feet = 4;
cow.accordingToLarson = 'will take over the world';

代碼如下:
//更好的寫法是這樣
var cow = {
colour:'brown',
commonQuestion:'What now?',
moo:function(){
console.log('moo);
},
feet:4,
accordingToLarson:'will take over the world'
};

代碼如下:
//重復了很多次數組名
var aweSomeBands = new Array();
aweSomeBands[0] = 'Bad Religion';
aweSomeBands[1] = 'Dropkick Murphys';
aweSomeBands[2] = 'Flogging Molly';
aweSomeBands[3] = 'Red Hot Chili Peppers';
aweSomeBands[4] = 'Pornophonique';

代碼如下:
//更好的代碼
var aweSomeBands = [
'Bad Religion',
'Dropkick Murphys',
'Flogging Molly',
'Red Hot Chili Peppers',
'Pornophonique'
];

單引號和雙引號
為了避免混亂，我們建議在HTML中使用雙引號，在JavaScript中使用單引號。
代碼如下:
//html


代碼如下:
//JavaScript

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com