13518219792
本篇內容介紹了“JavaScript初學者的技巧有哪些”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
寧江網站建設公司創新互聯,寧江網站設計制作，有大型網站制作公司豐富經驗。已為寧江上1000家提供企業網站建設服務。企業網站搭建\外貿網站制作要多少錢，請找那個售后服務好的寧江做網站的公司定做！
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>現在你知道我最喜歡的玉米是哪種了。< /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 -- 也有可能是 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[i]); }10. 試試漸進增強
一定要記得為未啟用JavaScript的情況提供替代方案。大家可能會認為，“大部分我的訪客都啟用了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); } };注意，如果你想新建一個空對象，用 {} 就能行：
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) { ...這里做點什么... } }引自 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. 讀，讀，讀……
雖然我是Web開發博客的超級粉絲，但吃飯和睡覺前除了看書好像也別無選擇~ 在你的床頭柜上擺一本Web開發的好書吧！
21. 自決的函數
相比于調用函數，讓函數在頁面載入或者某一父函數被調用時自動執行，是十分簡單方便的做法。你只需要把你的函數包在父輩之內，然后添上一個額外的括號，本質上這括號就觸發了你定義的函數（了解更多）。
(function doSomething() { return { name: 'jeff', lastName: 'way' }; })();22. 原生 JavaScript 總是會比使用代碼庫來的快
諸如jQuery和Mootools這樣的JavaScript庫，能為你寫代碼的過程省下不少時間——尤其是當需要 AJAX 操作時。不過你可得記住，只要你的代碼寫得恰當，原生JavaScript總是會比利用代碼庫的寫法執行得快一些。
jQuery的“each” 方法對于循環操作十分便利，但是使用原生態的for語句總歸會快很多。
23. Crockford 的 JSON.Parse
導入這段代碼，你就能新建 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>'; }24. 移去“Language”
很多年前，language還是每段script標簽必備屬性：
< script type="text/javascript" language="javascript"> ... < /script>
“JavaScript初學者的技巧有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注創新互聯網站，小編將為大家輸出更多高質量的實用文章！
