15條JavaScript最佳實(shí)踐小結(jié)
更新時間：2013年08月09日 11:05:52 作者：
如果你的JavaScript代碼只是增加一些功能，那么盡管大膽地把文件引用放在HTML底部吧，你會看到明顯的速度提升。本文總結(jié)了15條小建議，感興趣的朋友可以參考下
本文檔整理大部分公認(rèn)的、或者少有爭議的JavaScript良好書寫規(guī)范（Best Practice）。一些顯而易見的常識就不再論述（比如要用對象支持識別判斷，而不是瀏覽器識別判斷；比如不要嵌套太深）。條目順序按重要級粗略的從高到低排列。
把外部JavaScript文件放在HTML底部
我們的目標(biāo)是相同的：為用戶盡可能快地顯示內(nèi)容。當(dāng)載入一個腳本文件的時候，HTML會停止解析，直到腳本載入完畢。因此，用戶可能會長時間對著一個空白的屏幕，看上去什么都沒有發(fā)生。如果你的JavaScript代碼只是增加一些功能（比如按鈕的點(diǎn)擊動作），那么盡管大膽地把文件引用放在HTML底部吧（就在</body>之前），你會看到明顯的速度提升。如果是用于其他目的的腳本文件，則需要慎重地考慮。但無論如何，這毫無疑問是一個非常值得考慮的地方。
優(yōu)化循環(huán)
循環(huán)遍歷一個數(shù)組
//這段糟糕的代碼會在每次進(jìn)入循環(huán)的時候都計算一次數(shù)組的長度
var names = ['George','Ringo','Paul','John'];
for(var i=0;i<names.length;i++){
doSomeThingWith(names[i]);
}
//這樣的話，就只會計算一次了
var names = ['George','Ringo','Paul','John'];
var all = names.length;
for(var i=0;i<all;i++){
doSomeThingWith(names[i]);
}
//這樣就更加簡短了
var names = ['George','Ringo','Paul','John'];
for(var i=0,j=names.length;i<j;i++){
doSomeThingWith(names[i]);
}
//這段代碼的糟糕之處在于，它把變量聲明放在循環(huán)體內(nèi)了，每次循環(huán)都會創(chuàng)建變量
for(var i = 0; i < someArray.length; i++) {
var container = document.getElementById('container');
container.innerHtml += 'my number: ' + i;
console.log(i);
}
//在循環(huán)體外聲明變量，變量只會創(chuàng)建一次
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;
//重復(fù)了變量名很多次
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'
};
//重復(fù)了很多次數(shù)組名
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
<img src="picture.gif" />
//JavaScript
<script type="text/javascript">
document.write('<p>');
</script>
//一段混用的jQuery代碼
$('h1').after('<div id="content"><h2>目錄</h2><ol></ol></div>');
避免混入其他技術(shù)
CSS:假設(shè)我們的頁面上有必須填入的輸入框（擁有class“mandatory”），如果它沒有被輸入數(shù)據(jù)，周圍就會加上紅色邊框。
//一段混合了其他技術(shù)的代碼會這樣做：
var f = document.getElementById('mainform');
var inputs = f.getElementsByTagName('input');
for(var i=0,j=inputs.length;i<j;i++){
if(inputs[i].className === 'mandatory' &&
inputs[i].value === ''){
inputs[i].style.borderColor = '#f00';
inputs[i].style.borderStyle = 'solid';
inputs[i].style.borderWidth = '1px';
}
}
//一段良好的代碼會這么做：將風(fēng)格化的事情交給CSS吧
var f = document.getElementById('mainform');
var inputs = f.getElementsByTagName('input');
for(var i=0,j=inputs.length;i<j;i++){
if(inputs[i].className === 'mandatory' &&
inputs[i].value === ''){
inputs[i].className += ' error';
}
}
HTML:假設(shè)我們有內(nèi)多HTML內(nèi)容需要用JavaScript來載入，那么使用Ajax載入單獨(dú)的文件，而不是通過JavaScript處理DOM，后者會讓代碼難以處理，并且出現(xiàn)難以維護(hù)的兼容性問題。
驗(yàn)證JavaScript代碼
瀏覽器處理JavaScript代碼可能會非常寬容，但我建議你不要依賴瀏覽器的解析能力，因此養(yǎng)成了懶散的編碼習(xí)慣。
最簡單的檢測你的代碼質(zhì)量的方法是通過一個在線JavaScript驗(yàn)證工具JSLint。
“JSLint takes a JavaScript source and scans it. If it finds a problem, it returns a message describing the problem and an approximate location within the source. The problem is not necessarily a syntax error, although it often is. JSLint looks at some style conventions as well as structural problems. It does not prove that your program is correct. It just provides another set of eyes to help spot problems.”
– JSLint Documentation
使用更簡單的格式來寫innerscript
//早期的代碼可能是這樣的
<script type="text/javascript" language="javascript">
...
</script>
//現(xiàn)在不用language屬性了
<script type="text/javascript">
...
</script>
總是檢查數(shù)據(jù)
要檢查你的方法輸入的所有數(shù)據(jù)，一方面是為了安全性，另一方面也是為了可用性。用戶隨時隨地都會輸入錯誤的數(shù)據(jù)。這不是因?yàn)樗麄兇溃且驗(yàn)樗麄兒苊?，并且思考的方式跟你不同。用typeof方法來檢測你的function接受的輸入是否合法。
//如果members的類型不是數(shù)組，那么下面的代碼會拋出一個錯誤
function buildMemberList(members){
var all = members.length;
var ul = document.createElement('ul');
for(var i=0;i
//良好的習(xí)慣是檢查參數(shù)是否是一個數(shù)組
function buildMemberList(members){
//數(shù)組的typeof是object，所以如果要判斷是否為數(shù)組的話，可以測試它是否擁有數(shù)組才有的function：slice
if(typeof members === 'object' &&
typeof members.slice === 'function'){
var all = members.length;
var ul = document.createElement('ul');
for(var i=0;i
另一個安全隱患是直接從DOM中取出數(shù)據(jù)使用。比如說你的function從用戶名輸入框中取得用戶名做某項(xiàng)操作，但用戶名中的單引號或者雙引號可能會導(dǎo)致你的代碼崩潰。
避免全局變量
全局變量和全局函數(shù)是非常糟糕的。因?yàn)樵谝粋€頁面中包含的所有JavaScript都在同一個域中運(yùn)行。所以如果你的代碼中聲明了全局變量或者全局函數(shù)的話，后面的代碼中載入的腳本文件中的同名變量和函數(shù)會覆蓋掉（overwrite）你的。
//糟糕的全局變量和全局函數(shù)
var current = null;
function init(){...}
function change(){...}
function verify(){...}
解決辦法有很多，Christian Heilmann建議的方法是：
//如果變量和函數(shù)不需要在“外面”引用，那么就可以使用一個沒有名字的方法將他們?nèi)及饋怼?
(function(){
var current = null;
function init(){...}
function change(){...}
function verify(){...}
})();
//如果變量和函數(shù)需要在“外面”引用，需要把你的變量和函數(shù)放在一個“命名空間”中
//我們這里用一個function做命名空間而不是一個var，因?yàn)樵谇罢咧新暶鱢unction更簡單，而且能保護(hù)隱私數(shù)據(jù)
myNameSpace = function(){
var current = null;
function init(){...}
function change(){...}
function verify(){...}
//所有需要在命名空間外調(diào)用的函數(shù)和屬性都要寫在return里面
return{
init:init,
//甚至你可以為函數(shù)和屬性命名一個別名
set:change
}
}();
聲明變量的話，總是用var
JavaScript中的變量可能是全局域或者局部域，用var聲明的話會更加直觀。
//在function中不用var引起的迷惑性問題
var i=0; // This is good - creates a global variable
function test() {
for (i=0; i<10; i++) {
alert("Hello World!");
}
}
test();
alert(i); // The global variable i is now 10!
//解決方法是在function中聲明變量也用var
function test() {
for (var i=0; i<10; i++) {
alert("Hello World!");
}
}
使用前置+號來把字符串轉(zhuǎn)化為數(shù)字
JavaScript中，“+”操作符即被用來作為數(shù)字加，也被用來連接字符串。如果需要求表單中幾個值的和，那么用+可能會出現(xiàn)問題。
//會出現(xiàn)問題的代碼
<form name="myform" action="[url]">
<input type="text" name="val1" value="1">
<input type="text" name="val2" value="2">
</form>
function total() {
var theform = document.forms["myform"];
var total = theform.elements["val1"].value + theform.elements["val2"].value;
alert(total); // This will alert "12", but what you wanted was 3!
}
//在字符串前面加上“+”，這是給JavaScript的一個暗示：這是一個數(shù)字而不是字符串
function total() {
var theform = document.forms["myform"];
var total = (+theform.elements["val1"].value) + (+theform.elements["val2"].value);
alert(total); // This will alert 3
}
避免使用eval()方法
JavaScript中的eval()方法是在運(yùn)行時把任何代碼當(dāng)作對象來計算/運(yùn)行的方法。實(shí)際上由于安全性的緣故，大部分情況下都不應(yīng)該用eval()，總是有一種更“正確”的方法來完成同樣的工作的。基本原則是，eval is evil，在任何時候都不要用它，除非你是一個老手，并且知道你不得不這樣做。
for in語句
遍歷一個對象中的所有條目的時候，用for in語句是非常方便的。但有時候我們不需要遍歷對象中的方法，如果不需要的話，可以加上一條filter。
//加上了一個過濾器的for in語句
for(key in object) {
if(object.hasOwnProperty(key) {
...then do something...
}
}
不要偷懶省略”和{}
從技術(shù)上說，你可以忽略很多花括號和分號。
//雖然看上去很不對頭，大部分瀏覽器都能正確解析這段代碼
if(someVariableExists)
x = false
//這個代碼看上去更不對頭了，咋眼一看似乎下面的句都被執(zhí)行了
//實(shí)際上只有x=false在if中
if(someVariableExists)
x = false
anotherFunctionCall();
所以，要記住的原則是：1.永遠(yuǎn)不要省略分號；2.不要省略花括號，除非在同一行中。
//這樣是OK的
if(2 + 2 === 4) return 'nicely done';
獲取對象屬性的時候用方括號而不是點(diǎn)號
在JavaScript中取得某對象的屬性有兩種方法：
//點(diǎn)號標(biāo)記
MyObject.property
//方括號標(biāo)記
MyObject["property"]
如果是用點(diǎn)號標(biāo)記取得對象的屬性，屬性名稱是硬編碼，無法在運(yùn)行時更改；而用方括號的話，JavaScript會求得方括號內(nèi)值然后通過計算結(jié)果來求得屬性名。也就是說用方括號標(biāo)記的方式，屬性名稱可以是硬編碼的，也可以是變量或者函數(shù)返回值。
//這樣是不行的
MyObject.value+i
//這樣就沒有問題
MyObject["value"+i]
假設(shè)JavaScript會被禁用
我知道這樣的假設(shè)會傷害JavaScript開發(fā)者的感情，可是在目前數(shù)據(jù)不明朗的情況下我們?yōu)榱税踩鹨姂?yīng)該做這樣的假設(shè)。這是漸進(jìn)增強(qiáng)中很重要的一部分。
使用JavaScript庫
現(xiàn)在有很多非常流行的JavaScript庫，比如YUI和jQuery、Dojo。它們的缺點(diǎn)是需要下載一個額外的文件，優(yōu)點(diǎn)卻更多：兼容性更強(qiáng)；代碼更簡單易懂。好的庫有很多，但你不應(yīng)該在一個項(xiàng)目中把它們都用上，因?yàn)榭赡艽嬖诩嫒菪詥栴}。選擇一個自己習(xí)慣的就好。
不要忘記的一點(diǎn)是，原生的JavaScript毫無疑問更快，如果是小規(guī)模的使用，最好還是用原生的。
把外部JavaScript文件放在HTML底部
我們的目標(biāo)是相同的：為用戶盡可能快地顯示內(nèi)容。當(dāng)載入一個腳本文件的時候，HTML會停止解析，直到腳本載入完畢。因此，用戶可能會長時間對著一個空白的屏幕，看上去什么都沒有發(fā)生。如果你的JavaScript代碼只是增加一些功能（比如按鈕的點(diǎn)擊動作），那么盡管大膽地把文件引用放在HTML底部吧（就在</body>之前），你會看到明顯的速度提升。如果是用于其他目的的腳本文件，則需要慎重地考慮。但無論如何，這毫無疑問是一個非常值得考慮的地方。
優(yōu)化循環(huán)
循環(huán)遍歷一個數(shù)組
復(fù)制代碼 代碼如下:
//這段糟糕的代碼會在每次進(jìn)入循環(huán)的時候都計算一次數(shù)組的長度
var names = ['George','Ringo','Paul','John'];
for(var i=0;i<names.length;i++){
doSomeThingWith(names[i]);
}
復(fù)制代碼 代碼如下:
//這樣的話，就只會計算一次了
var names = ['George','Ringo','Paul','John'];
var all = names.length;
for(var i=0;i<all;i++){
doSomeThingWith(names[i]);
}
復(fù)制代碼 代碼如下:
//這樣就更加簡短了
var names = ['George','Ringo','Paul','John'];
for(var i=0,j=names.length;i<j;i++){
doSomeThingWith(names[i]);
}
復(fù)制代碼 代碼如下:
//這段代碼的糟糕之處在于，它把變量聲明放在循環(huán)體內(nèi)了，每次循環(huán)都會創(chuàng)建變量
for(var i = 0; i < someArray.length; i++) {
var container = document.getElementById('container');
container.innerHtml += 'my number: ' + i;
console.log(i);
}
復(fù)制代碼 代碼如下:
//在循環(huán)體外聲明變量，變量只會創(chuàng)建一次
var container = document.getElementById('container');
for(var i = 0, len = someArray.length; i < len; i++) {
container.innerHtml += 'my number: ' + i;
console.log(i);
}
用盡量簡短的代碼
如果可以增加可讀性的話，那么使用代碼的簡短格式是有意義的，下面是一份不完全的列表：
復(fù)制代碼 代碼如下:
//對于條件判斷只有兩次的，這是一種冗長的寫法
var direction;
if(x > 100){
direction = 1;
} else {
direction = -1;
}
復(fù)制代碼 代碼如下:
//更好的代碼
var direction = (x > 100) ? 1 : -1;
復(fù)制代碼 代碼如下:
//判斷一個 變量是否定義，如果否，就賦予一個值，糟糕的代碼
if(v){
var x = v;
} else {
var x = 10;
}
復(fù)制代碼 代碼如下:
//更好的代碼
var x = v || 10;
復(fù)制代碼 代碼如下:
//重復(fù)了變量名很多次
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';
復(fù)制代碼 代碼如下:
//更好的寫法是這樣
var cow = {
colour:'brown',
commonQuestion:'What now?',
moo:function(){
console.log('moo);
},
feet:4,
accordingToLarson:'will take over the world'
};
復(fù)制代碼 代碼如下:
//重復(fù)了很多次數(shù)組名
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';
復(fù)制代碼 代碼如下:
//更好的代碼
var aweSomeBands = [
'Bad Religion',
'Dropkick Murphys',
'Flogging Molly',
'Red Hot Chili Peppers',
'Pornophonique'
];
單引號和雙引號
為了避免混亂，我們建議在HTML中使用雙引號，在JavaScript中使用單引號。
復(fù)制代碼 代碼如下:
//html
<img src="picture.gif" />
復(fù)制代碼 代碼如下:
//JavaScript
<script type="text/javascript">
document.write('<p>');
</script>
復(fù)制代碼 代碼如下:
//一段混用的jQuery代碼
$('h1').after('<div id="content"><h2>目錄</h2><ol></ol></div>');
避免混入其他技術(shù)
CSS:假設(shè)我們的頁面上有必須填入的輸入框（擁有class“mandatory”），如果它沒有被輸入數(shù)據(jù)，周圍就會加上紅色邊框。
復(fù)制代碼 代碼如下:
//一段混合了其他技術(shù)的代碼會這樣做：
var f = document.getElementById('mainform');
var inputs = f.getElementsByTagName('input');
for(var i=0,j=inputs.length;i<j;i++){
if(inputs[i].className === 'mandatory' &&
inputs[i].value === ''){
inputs[i].style.borderColor = '#f00';
inputs[i].style.borderStyle = 'solid';
inputs[i].style.borderWidth = '1px';
}
}
復(fù)制代碼 代碼如下:
//一段良好的代碼會這么做：將風(fēng)格化的事情交給CSS吧
var f = document.getElementById('mainform');
var inputs = f.getElementsByTagName('input');
for(var i=0,j=inputs.length;i<j;i++){
if(inputs[i].className === 'mandatory' &&
inputs[i].value === ''){
inputs[i].className += ' error';
}
}
HTML:假設(shè)我們有內(nèi)多HTML內(nèi)容需要用JavaScript來載入，那么使用Ajax載入單獨(dú)的文件，而不是通過JavaScript處理DOM，后者會讓代碼難以處理，并且出現(xiàn)難以維護(hù)的兼容性問題。
驗(yàn)證JavaScript代碼
瀏覽器處理JavaScript代碼可能會非常寬容，但我建議你不要依賴瀏覽器的解析能力，因此養(yǎng)成了懶散的編碼習(xí)慣。
最簡單的檢測你的代碼質(zhì)量的方法是通過一個在線JavaScript驗(yàn)證工具JSLint。
“JSLint takes a JavaScript source and scans it. If it finds a problem, it returns a message describing the problem and an approximate location within the source. The problem is not necessarily a syntax error, although it often is. JSLint looks at some style conventions as well as structural problems. It does not prove that your program is correct. It just provides another set of eyes to help spot problems.”
– JSLint Documentation
使用更簡單的格式來寫innerscript
復(fù)制代碼 代碼如下:
//早期的代碼可能是這樣的
<script type="text/javascript" language="javascript">
...
</script>
復(fù)制代碼 代碼如下:
//現(xiàn)在不用language屬性了
<script type="text/javascript">
...
</script>
總是檢查數(shù)據(jù)
要檢查你的方法輸入的所有數(shù)據(jù)，一方面是為了安全性，另一方面也是為了可用性。用戶隨時隨地都會輸入錯誤的數(shù)據(jù)。這不是因?yàn)樗麄兇溃且驗(yàn)樗麄兒苊?，并且思考的方式跟你不同。用typeof方法來檢測你的function接受的輸入是否合法。
復(fù)制代碼 代碼如下:
//如果members的類型不是數(shù)組，那么下面的代碼會拋出一個錯誤
function buildMemberList(members){
var all = members.length;
var ul = document.createElement('ul');
for(var i=0;i
復(fù)制代碼 代碼如下:
//良好的習(xí)慣是檢查參數(shù)是否是一個數(shù)組
function buildMemberList(members){
//數(shù)組的typeof是object，所以如果要判斷是否為數(shù)組的話，可以測試它是否擁有數(shù)組才有的function：slice
if(typeof members === 'object' &&
typeof members.slice === 'function'){
var all = members.length;
var ul = document.createElement('ul');
for(var i=0;i
另一個安全隱患是直接從DOM中取出數(shù)據(jù)使用。比如說你的function從用戶名輸入框中取得用戶名做某項(xiàng)操作，但用戶名中的單引號或者雙引號可能會導(dǎo)致你的代碼崩潰。
避免全局變量
全局變量和全局函數(shù)是非常糟糕的。因?yàn)樵谝粋€頁面中包含的所有JavaScript都在同一個域中運(yùn)行。所以如果你的代碼中聲明了全局變量或者全局函數(shù)的話，后面的代碼中載入的腳本文件中的同名變量和函數(shù)會覆蓋掉（overwrite）你的。
復(fù)制代碼 代碼如下:
//糟糕的全局變量和全局函數(shù)
var current = null;
function init(){...}
function change(){...}
function verify(){...}
解決辦法有很多，Christian Heilmann建議的方法是：
復(fù)制代碼 代碼如下:
//如果變量和函數(shù)不需要在“外面”引用，那么就可以使用一個沒有名字的方法將他們?nèi)及饋怼?
(function(){
var current = null;
function init(){...}
function change(){...}
function verify(){...}
})();
復(fù)制代碼 代碼如下:
//如果變量和函數(shù)需要在“外面”引用，需要把你的變量和函數(shù)放在一個“命名空間”中
//我們這里用一個function做命名空間而不是一個var，因?yàn)樵谇罢咧新暶鱢unction更簡單，而且能保護(hù)隱私數(shù)據(jù)
myNameSpace = function(){
var current = null;
function init(){...}
function change(){...}
function verify(){...}
//所有需要在命名空間外調(diào)用的函數(shù)和屬性都要寫在return里面
return{
init:init,
//甚至你可以為函數(shù)和屬性命名一個別名
set:change
}
}();
聲明變量的話，總是用var
JavaScript中的變量可能是全局域或者局部域，用var聲明的話會更加直觀。
復(fù)制代碼 代碼如下:
//在function中不用var引起的迷惑性問題
var i=0; // This is good - creates a global variable
function test() {
for (i=0; i<10; i++) {
alert("Hello World!");
}
}
test();
alert(i); // The global variable i is now 10!
復(fù)制代碼 代碼如下:
//解決方法是在function中聲明變量也用var
function test() {
for (var i=0; i<10; i++) {
alert("Hello World!");
}
}
使用前置+號來把字符串轉(zhuǎn)化為數(shù)字
JavaScript中，“+”操作符即被用來作為數(shù)字加，也被用來連接字符串。如果需要求表單中幾個值的和，那么用+可能會出現(xiàn)問題。
復(fù)制代碼 代碼如下:
//會出現(xiàn)問題的代碼
<form name="myform" action="[url]">
<input type="text" name="val1" value="1">
<input type="text" name="val2" value="2">
</form>
function total() {
var theform = document.forms["myform"];
var total = theform.elements["val1"].value + theform.elements["val2"].value;
alert(total); // This will alert "12", but what you wanted was 3!
}
復(fù)制代碼 代碼如下:
//在字符串前面加上“+”，這是給JavaScript的一個暗示：這是一個數(shù)字而不是字符串
function total() {
var theform = document.forms["myform"];
var total = (+theform.elements["val1"].value) + (+theform.elements["val2"].value);
alert(total); // This will alert 3
}
避免使用eval()方法
JavaScript中的eval()方法是在運(yùn)行時把任何代碼當(dāng)作對象來計算/運(yùn)行的方法。實(shí)際上由于安全性的緣故，大部分情況下都不應(yīng)該用eval()，總是有一種更“正確”的方法來完成同樣的工作的。基本原則是，eval is evil，在任何時候都不要用它，除非你是一個老手，并且知道你不得不這樣做。
for in語句
遍歷一個對象中的所有條目的時候，用for in語句是非常方便的。但有時候我們不需要遍歷對象中的方法，如果不需要的話，可以加上一條filter。
復(fù)制代碼 代碼如下:
//加上了一個過濾器的for in語句
for(key in object) {
if(object.hasOwnProperty(key) {
...then do something...
}
}
不要偷懶省略”和{}
從技術(shù)上說，你可以忽略很多花括號和分號。
復(fù)制代碼 代碼如下:
//雖然看上去很不對頭，大部分瀏覽器都能正確解析這段代碼
if(someVariableExists)
x = false
復(fù)制代碼 代碼如下:
//這個代碼看上去更不對頭了，咋眼一看似乎下面的句都被執(zhí)行了
//實(shí)際上只有x=false在if中
if(someVariableExists)
x = false
anotherFunctionCall();
所以，要記住的原則是：1.永遠(yuǎn)不要省略分號；2.不要省略花括號，除非在同一行中。
復(fù)制代碼 代碼如下:
//這樣是OK的
if(2 + 2 === 4) return 'nicely done';
獲取對象屬性的時候用方括號而不是點(diǎn)號
在JavaScript中取得某對象的屬性有兩種方法：
復(fù)制代碼 代碼如下:
//點(diǎn)號標(biāo)記
MyObject.property
復(fù)制代碼 代碼如下:
//方括號標(biāo)記
MyObject["property"]
如果是用點(diǎn)號標(biāo)記取得對象的屬性，屬性名稱是硬編碼，無法在運(yùn)行時更改；而用方括號的話，JavaScript會求得方括號內(nèi)值然后通過計算結(jié)果來求得屬性名。也就是說用方括號標(biāo)記的方式，屬性名稱可以是硬編碼的，也可以是變量或者函數(shù)返回值。
復(fù)制代碼 代碼如下:
//這樣是不行的
MyObject.value+i
復(fù)制代碼 代碼如下:
//這樣就沒有問題
MyObject["value"+i]
假設(shè)JavaScript會被禁用
我知道這樣的假設(shè)會傷害JavaScript開發(fā)者的感情，可是在目前數(shù)據(jù)不明朗的情況下我們?yōu)榱税踩鹨姂?yīng)該做這樣的假設(shè)。這是漸進(jìn)增強(qiáng)中很重要的一部分。
使用JavaScript庫
現(xiàn)在有很多非常流行的JavaScript庫，比如YUI和jQuery、Dojo。它們的缺點(diǎn)是需要下載一個額外的文件，優(yōu)點(diǎn)卻更多：兼容性更強(qiáng)；代碼更簡單易懂。好的庫有很多，但你不應(yīng)該在一個項(xiàng)目中把它們都用上，因?yàn)榭赡艽嬖诩嫒菪詥栴}。選擇一個自己習(xí)慣的就好。
不要忘記的一點(diǎn)是，原生的JavaScript毫無疑問更快，如果是小規(guī)模的使用，最好還是用原生的。
相關(guān)文章
獲取時間間隔在日常使用還是比價頻繁的，下面是具體的實(shí)現(xiàn)代碼，需要的朋友可以參考下2014-05-05
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)拍照功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家詳細(xì)介紹了Bootstrap 警告框（Alert）插件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)點(diǎn)擊動畫效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
非常好用的JsonToString 方法 簡單實(shí)例
這篇文章介紹了非常好用的JsonToString簡單實(shí)例，有需要的朋友可以參考一下2013-07-07
本篇文章主要是對window.open打開頁面居中顯示的示例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要介紹了js簡單判斷flash是否加載完成的方法,通過PercentLoaded方法對flash的加載進(jìn)行判斷,具有一定參考借鑒價值,需要的朋友可以參考下2016-06-06
javascript下有關(guān)dom以及xml節(jié)點(diǎn)訪問兼容問題
javascript下有關(guān)dom以及xml節(jié)點(diǎn)訪問兼容問題...2007-11-11
JavaScript垃圾回收機(jī)制(引用計數(shù),標(biāo)記清除,性能優(yōu)化)
這篇文章主要介紹了JavaScript垃圾回收機(jī)制(引用計數(shù),標(biāo)記清除,性能優(yōu)化),垃圾回收是JavaScript的隱藏機(jī)制，我們通常無需為垃圾回收勞心費(fèi)力，只需要專注功能的開發(fā)就好了2022-07-07
這篇文章主要給大家介紹了ES6中Class和Module的相關(guān)資料，文中介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-05-05