JavaScript新手學習實用建議+學習整理文檔

在網上找到篇文章，非常適合學習JavaScript的新手，轉來和大家分享。

另外 整理了個JavaScript從入門到精通【完整版】doc文檔，希望大家喜歡。

Javascript教程 --從入門到精通【完整版】.rar

本文列出了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(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. 減少全域變數

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. 寫好注釋

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

// 遍曆數組，輸出各自名稱for(var i = 0, len = array.length; i < len; i++) {   console.log(array);}

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

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

更 好的寫法

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

注 意，如果你想建立一個Null 物件，用 {} 就能行：

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

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

16. 千萬千萬記得寫分號

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

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

之 前已經說過，這樣做會造成潛在的更大、更難以發現的問題：

更好的寫法

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

17. “For in” 語句

遍曆 對象時，你可能會發現你還需要擷取方法函數。所以遇到這種情況時，請一定記得給你的程式碼封裝一層 if 語句，用以過濾資訊。

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

18. 使用Firebug的“Timer”功能最佳化你的代碼

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

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

19. 讀，讀，讀……Read, Read, Read…

雖然我是Web開發部落格（就像這個！）的超級粉絲，但吃飯和睡覺前除了看書好像也別無選 擇~ 在你的床頭柜上擺一本Web開發的好書吧！下列書單都是我的最愛：

• Object-Oriented JavaScript（暫無中文版）
• JavaScript: The Good Parts（中文版）
• Learning jQuery 1.3（暫無中文版，但你可以看看老版本的中文版）
• Learning JavaScript（中文版）

閱 讀他們…… 反覆閱讀很多次！我現在都還在讀。

20. 自決的函數

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

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

21. 原生 JavaScript 總是會比使用程式碼程式庫來的快

諸如jQuery和Mootools這樣的JavaScript庫，能為你寫代碼的過程省下不少時間——尤其是 當需要 AJAX 操作時。不過你可得記住，只要你的代碼寫得恰當，原生JavaScript總是會比利用程式碼程式庫的寫法執行得快一些。

jQuery 的“each” 方法對於迴圈操作十分便利，但是使用原生態的for語句總歸會快很多。

22. 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.name + ' : ' + response.email + '</li>';}

關 於JSON，請查看更多介紹。

23. 移去“Language”

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

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

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

就這些了，朋友們~

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

英 文原文：24-javascript-best-practices-for-beginners

譯 文原文：給JavaScript新手的24條建議

請尊重著作權，若需轉載，務必保留連結。