給JavaScript新手的24條實用建議

爲JavaScript做一點性能小提升吧!

本文列出了24條能讓你的代碼編寫過程更爲輕鬆高效的建議。也許您還是JavaScript初學者,剛剛寫完自己的Hello World,那這裏有很多對您的工作將十分有用的小貼士;也許有些技巧您已經知道,那就試試快速瀏覽一下,看能不能發現一點新東西吧!

注:本文多次用到Firebug的console對象,請參考 Firebug Console API 。關於firebug的更詳細介紹,請猛擊這裏

1. 用 === 代替 ==JavaScript裏有兩種不同的相等運算符:===|!== 和==|!=。相比之下,前者更值得推薦。請儘量使用前者。

“如果兩個比較對象有着同樣的類型和值,===返回true,!==返回false。”
– JavaScript: The Good Parts

不過,如果使用==和!=,在操作不同數據類型時, 你可能會遇到一些意想不到的問題。在進行相等判斷前,JavaScript會試圖將它們轉換爲字符串、數字或 Boolean量。

2. 避免使用Eval函數

Eval函數把一個字串作爲參數,並把字串作爲JavaScript語句執行,返回結果(參考)。

此函數不僅會降低你腳本的執行效率,而且還大大增加了安全風險,因爲它賦予了作爲文本的參數太大的權利。千萬別用!

3. 不要使用快速寫法

技術上說,你可以省略掉大部分花括弧和句尾分號,絕大多數瀏覽器都能正確執行以下語句:

.if(someVariableExists) 
   x = false

不過,如果是這樣的呢:

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

你可能會認爲它和下面的語句相等:

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

不幸的是,事實並非如此。現實情況是它等價於:

 

如您注意到的,再漂亮的縮進也不能代替這華麗的花括弧。在所有情況下都請寫清楚花括號和句尾分號。在只有一行語句的時候能偶爾省略掉,雖然下這麼做也是極度不被推薦的:

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

多考慮下將來吧,孩子
假設,在將來的開發過程中,你需要爲這個 if 語句添加更多的命令呢?到時候你還不是得把括號給加上?

4. 好好利用JS Lint

JSLint 是由 Douglas Crockford 編寫的一個調試器。你只需要貼上你的代碼,它就能快速爲您掃描出任何明顯的錯誤和問題。

“JSLint 掃描接收的代碼。發現問題,描述問題,並給出其在源碼中的大概位置。可發現的問題包括但不限於語法錯誤,雖然語法錯誤確實是最常見的。JSLint也會用約定俗成的習慣檢查代碼的格式化風格,以及結構錯誤。通過JSLint的掃描並不能保證你的程序就完全正確。它只是爲您提供了額外一雙發現錯誤的眼睛。”
– JSLint 文檔

完成代碼之前,把它放到JSLint裏檢查一下,快速消滅你的無心之過。

5. 在頁面底部加載腳本

正如下圖所示:


點擊放大

請記住—— 我們要千方百計保證客戶端的頁面載入速度儘可能的快。而腳本沒載入完成,瀏覽器就沒法加載頁面的剩餘部分。

如果你的JS文件只是添加一些額外功能——例如,爲點擊某鏈接綁定事件——那大可以等頁面加載基本完成後再做。把JS文件放到頁面最後,body的結束標籤之前,這樣做最好了。

更好的寫法是:

<p>超哥是世界上最帥的人。benhuoer.com是世界上最好看的博客。</p>
<script type="text/javascript" src="path/to/file.js"></script>
<script type="text/javascript" src="path/to/anotherFile.js"></script>
</body>
</html>

6. 在 For 語句外部聲明變量

當需要執行冗長的for語句時,不要讓JavaScript引擎每次都重複那些沒有必要的操作。例如:

這樣不好:

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

這段代碼每次都重新定義數組長度,每次都在遍歷DOM尋找container元素 —— 太傻了!

這樣好多了:

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

我要給留言改進這段代碼的人額外驚喜!歡迎大家留言討論!

7. 快速構建字串

要對一個數組或對象做循環操作時,不要老惦記着一表人才的for語句,拿點創意出來嘛!明明就還有很多更快的辦法:

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

“沒那麼多繁文縟節來煩你;你就信我一次好了(或者你也可以自己試一試)—— 這真的是迄今能找到的最快辦法了!
用點土辦法,也別管它背後究竟發生了什麼抽象的東西,通常土辦法都比那些優雅的辦法要快捷得多!”– James Padolsey, james.padolsey.com

8. 減少全局變量

“把你踩在全局的那些亂七八糟的腳印都歸於一人名下,能顯著降低與其他應用、小工具或JS庫衝突的可能性。” – Douglas Crockford

var name = 'Jeffrey';  
var lastName = 'Way';  
 
function doSomething() {...}  
 
console.log(name); // Jeffrey -- or window.name 

更好的寫法:

var DudeNameSpace = {  
   name : 'Jeffrey',  
   lastName : 'Way',  
   doSomething : function() {...}  
}  
console.log(DudeNameSpace.name); // Jeffrey

注意看,我們是如何戲劇化地把“亂七八糟的腳印”都歸到“DudeNameSpace”這對象之下的。

9. 寫好註釋

可能一開始你會覺得並無必要,但相信我,你將來會主動想要儘可能寫好代碼的註釋的。當你幾個月後再回看某項目時,結果卻發現很難想起當時寫某句東西時腦子在想的什麼了,是不是很讓人沮喪呢?或者,如果有同事要修訂你的代碼呢?一定,一定要爲你代碼裏的重要部分加上註釋。

// Cycle through array and echo out each name.   
for(var i = 0, len = array.length; i < len; i++) {  
   console.log(array[i]);  
}

10. 試試漸進增強

一定要記得爲未啓用JavaScript的情況提供替代方案。大家可能會認爲,“大部分我的訪客都啓用了JavaScript的,我纔不用擔心”。這樣的話,你可就大錯特錯了!

你有沒有試過看看禁用JavaScript後你那漂亮的滑動器都成啥樣了?(你可以下載 Web Developer ToolBar 輕鬆完成這項任務。)禁用之後你的網站可能就徹底失去了可用性!經驗之談:開發初期總是按照沒有JavaScript來設計你的網站,之後再進行漸進地功能增強,小心翼翼地改變你地佈局。

11. 不要傳遞字串給 “setInterval” 或 “setTimeout”

看看下面的代碼:

setInterval(  
"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; 

不幸的是,測試表明,若你要爲對象插入新成員,with的表現非常糟糕,它的執行速度非常緩慢。替代方案是聲明一個變量:

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.someFunction = function() {  
   console.log(this.name);  
}

不過,這一方法讀起來卻比較糟糕。我強烈建議你採用下面這種在文字樣式上更爲強健的寫法:

更好的寫法:

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

注意,如果你想新建一個空對象,用 {} 就能行:

var o = {};

“對象字面符(Objects literals)幫助我們寫出支持很多特性,同時又關聯性強、簡明直接的代碼。沒必要直接調用新建語句,然後再費心維護聲明變量和傳遞變量的語句之間的正確順序,等等。” – dyn-web.com

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

新建數組時的同類型運用。

行得通的寫法:

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

更好的寫法:

var a = ['Joe','Plumber'];

“在JavaScript編程中經常遇到的一個錯誤是,該用數組時卻用了對象,該用對象時卻用了數組。規則其實很簡單:當屬性名是小的連續整數時,你應該使用數組。其他情況,使用對象。” – Douglas Crockford

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';

…不言自明。我不知道這樣做能否提升代碼執行速度,但是確實讓你的代碼乾淨許多。

17. 千萬千萬記得寫分號

大部分瀏覽器都允許你不寫句尾分號:

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...  
   }  
}

引自 Douglas Crockford 所作: JavaScript: The Good Parts

19. 使用Firebug的“Timer”功能優化你的代碼

想要輕鬆地快速瞭解某項操作的用時嗎?使用Firebug的timer功能來記錄結果好了。

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

20. 讀,讀,讀……Read, Read, Read…

雖然我是Web開發博客(就像這個!)的超級粉絲,但吃飯和睡覺前除了看書好像也別無選擇~ 在你的牀頭櫃上擺一本Web開發的好書吧!下列書單都是我的最愛:

Object-Oriented JavaScript(暫無中文版)
JavaScript: The Good Parts(中文版)
Learning jQuery 1.3(暫無中文版,但你可以看看老版本的中文版
Learning JavaScript(中文版)
閱讀他們…… 反覆閱讀很多次!我現在都還在讀。

21. 自決的函數

相比於調用函數,讓函數在頁面載入或者某一父函數被調用時自動執行,是十分簡單方便的做法。你只需要把你的函數包在父輩之內,然後添上一個額外的括號,本質上這括號就觸發了你定義的函數(瞭解更多)。

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

22. 原生 JavaScript 總是會比使用代碼庫來的快

諸如jQuery和Mootools這樣的JavaScript庫,能爲你寫代碼的過程省下不少時間——尤其是當需要 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 += '<li>' + response[i].name + ' : ' + response[i].email + '</li>';
}

關於JSON,請查看更多介紹

24. 移去“Language”

很多年前,language還是每段script標籤必備屬性:

<script type="text/javascript" language="javascript">  
...  
</script>

不過現在,這屬性已經沒啥用很久了…… 所以,刪掉算啦!

就這些了,朋友們~
就是這些了,這就是我給JavaScript初學者的24條小建議。各位親愛的朋友,你們的看法呢?你們有什麼快速小貼士嗎?感謝你的耐心閱讀。

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

發佈了1 篇原創文章 · 獲贊 4 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章