javascript
学习JavaScript的24条实用建议
JavaScript里有兩種不同的相等運(yùn)算符：===|!== 和==|!=。相比之下，前者更值得推薦。請(qǐng)盡量使用前者。
引用:
“如果兩個(gè)比較對(duì)象有著同樣的類型和值，===返回true，!==返回false。”– The Good Parts
不過，如果使用==和!=，在操作不同數(shù)據(jù)類型時(shí), 你可能會(huì)遇到一些意想不到的問題。在進(jìn)行相等判斷前，JavaScript會(huì)試圖將它們轉(zhuǎn)換為字符串、數(shù)字或 Boolean量。
2. 避免使用Eval函數(shù)
Eval函數(shù)把一個(gè)字串作為參數(shù)，并把字串作為JavaScript語句執(zhí)行，返回結(jié)果（參考）。
此函數(shù)不僅會(huì)降低你腳本的執(zhí)行效率，而且還大大增加了安全風(fēng)險(xiǎn)，因?yàn)樗x予了作為文本的參數(shù)太大的權(quán)利。千萬別用！
3. 不要使用快速寫法
技術(shù)上說，你可以省略掉大部分花括弧和句尾分號(hào)，絕大多數(shù)瀏覽器都能正確執(zhí)行以下語句：
代碼:
if(someVariableExists)? ?x = false
不過，如果是這樣的呢：
復(fù)制內(nèi)容到剪貼板代碼:
if(someVariableExists)? ?x = false
? ?anotherFunctionCall();
你可能會(huì)認(rèn)為它和下面的語句相等：
復(fù)制內(nèi)容到剪貼板代碼:
if(someVariableExists) {? ?x = false;
? ?anotherFunctionCall();
}
不幸的是，事實(shí)并非如此。現(xiàn)實(shí)情況是它等價(jià)于：
復(fù)制內(nèi)容到剪貼板代碼:
if(someVariableExists) {? ?x = false;
}
anotherFunctionCall();
如您注意到的，再漂亮的縮進(jìn)也不能代替這華麗的花括弧。在所有情況下都請(qǐng)寫清楚花括號(hào)和句尾分號(hào)。在只有一行語句的時(shí)候能偶爾省略掉，雖然下這么做也是極度不被推薦的：
復(fù)制內(nèi)容到剪貼板代碼:
if(2 + 2 === 4) return 'nicely done';多考慮下將來吧，孩子
假設(shè)，在將來的開發(fā)過程中，你需要為這個(gè) if 語句添加更多的命令呢？到時(shí)候你還不是得把括號(hào)給加上？
4. 好好利用JS Lint
JSLint 是由 Douglas Crockford 編寫的一個(gè)調(diào)試器。你只需要貼上你的代碼，它就能快速為您掃描出任何明顯的錯(cuò)誤和問題。
引用:
“JSLint掃描接收的代碼。發(fā)現(xiàn)問題，描述問題，并給出其在源碼中的大概位置。可發(fā)現(xiàn)的問題包括但不限于語法錯(cuò)誤，雖然語法錯(cuò)誤確實(shí)是最常見的。JSLint也會(huì)用約定俗成的習(xí)慣檢查代碼的格式化風(fēng)格，以及結(jié)構(gòu)錯(cuò)誤。通過JSLint的掃描并不能保證你的程序就完全正確。它只是為您提供了額外一雙發(fā)現(xiàn)錯(cuò)誤的眼睛。”
– JSLint 文檔
完成代碼之前，把它放到JSLint里檢查一下，快速消滅你的無心之過。
5. 在頁面底部加載腳本
正如下圖所示：
請(qǐng)記住—— 我們要千方百計(jì)保證客戶端的頁面載入速度盡可能的快。而腳本沒載入完成，瀏覽器就沒法加載頁面的剩余部分。
如果你的JS文件只是添加一些額外功能——例如，為點(diǎn)擊某鏈接綁定事件——那大可以等頁面加載基本完成后再做。把JS文件放到頁面最后，body的結(jié)束標(biāo)簽之前，這樣做最好了。
更好的寫法是
代碼:
<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> <!--mce:0--><!--mce:1-->
6. 在 For 語句外部聲明變量
當(dāng)需要執(zhí)行冗長的for語句時(shí)，不要讓JavaScript引擎每次都重復(fù)那些沒有必要的操作。例如：
這樣不好
代碼:
for(var i = 0; i < someArray.length; i++) {? ?var container = document.getElementById('container');
? ?container.innerHtml += 'my number: ' + i;
? ?console.log(i);
}
這段代碼每次都重新定義數(shù)組長度，每次都在遍歷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);
}
我要給留言改進(jìn)這段代碼的人額外驚喜！歡迎大家留言討論！
7. 快速構(gòu)建字串
要對(duì)一個(gè)數(shù)組或?qū)ο笞鲅h(huán)操作時(shí)，不要老惦記著一表人才的for語句，拿點(diǎn)創(chuàng)意出來嘛！明明就還有很多更快的辦法：
代碼:
var arr = ['item 1', 'item 2', 'item 3', ...];var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';
引用:
“沒那么多繁文縟節(jié)來煩你；你就信我一次好了（或者你也可以自己試一試）—— 這真的是迄今能找到的最快辦法了！用點(diǎn)土辦法，也別管它背后究竟發(fā)生了什么抽象的東西，通常土辦法都比那些優(yōu)雅的辦法要快捷得多！”
– James Padolsey, james.padolsey.com
8. 減少全局變量
引用:
“把你踩在全局的那些亂七八糟的腳印都?xì)w于一人名下，能顯著降低與其他應(yīng)用、小工具或JS庫沖突的可能性。”– Douglas Crockford 復(fù)制內(nèi)容到剪貼板
代碼:
var name = 'Jeffrey';var lastName = 'Way';
function doSomething() {...}
console.log(name); // Jeffrey -- or window.name
更好的寫法
復(fù)制內(nèi)容到剪貼板代碼:
var DudeNameSpace = {? ?name : 'Jeffrey',
? ?lastName : 'Way',
? ?doSomething : function() {...}
}
console.log(DudeNameSpace.name); // Jeffrey
注意看，我們是如何戲劇化地把“亂七八糟的腳印”都?xì)w到“DudeNameSpace”這對(duì)象之下的。
9. 寫好注釋
可能一開始你會(huì)覺得并無必要，但相信我，你將來會(huì)主動(dòng)想要盡可能寫好代碼的注釋的。當(dāng)你幾個(gè)月后再回看某項(xiàng)目時(shí)，結(jié)果卻發(fā)現(xiàn)很難想起當(dāng)時(shí)寫某句東西時(shí)腦子在想的什么了，是不是很讓人沮喪呢？或者，如果有同事要修訂你的代碼呢？一定，一定要為你代碼里的重要部分加上注釋。
代碼:
// 遍歷數(shù)組，輸出各自名稱for(var i = 0, len = array.length; i < len; i++) {
? ?console.log(array);
}
10. 試試漸進(jìn)增強(qiáng)
一定要記得為未啟用JavaScript的情況提供替代方案。大家可能會(huì)認(rèn)為，“大部分我的訪客都啟用了JavaScript的，我才不用擔(dān)心”。這樣的話，你可就大錯(cuò)特錯(cuò)了！
你有沒有試過看看禁用JavaScript后你那漂亮的滑動(dòng)器都成啥樣了？（你可以下載 Web Developer ToolBar 輕松完成這項(xiàng)任務(wù)。）禁用之后你的網(wǎng)站可能就徹底失去了可用性！經(jīng)驗(yàn)之談：開發(fā)初期總是按照沒有JavaScript來設(shè)計(jì)你的網(wǎng)站，之后再進(jìn)行漸進(jìn)地功能增強(qiáng)，小心翼翼地改變你地布局。
11. 不要傳遞字串給 “setInterval” 或 “setTimeout”
看看下面的代碼：
代碼:
setInterval("document.getElementById('container').innerHTML += 'My new number: ' + i", 3000
);
不僅執(zhí)行不高效，而且和 eval 函數(shù)有著同樣的高風(fēng)險(xiǎn)。千萬不要把字串傳遞給 setInterval 和 setTimeout。恰當(dāng)?shù)淖龇ㄊ?#xff0c;傳遞一個(gè)函數(shù)名：
復(fù)制內(nèi)容到剪貼板代碼:
setInterval(someFunction, 3000);12. 不要使用with語句
初識(shí)之下，“with”語句似乎還挺好用的。它用于設(shè)置代碼在特定對(duì)象中的作用域。其基本用法是提供深入到對(duì)象中處理元素的快速寫法。例如：
代碼:
with (being.person.man.bodyparts) {? ?arms = true;
? ?legs = true;
}
– 等價(jià)于 —
復(fù)制內(nèi)容到剪貼板代碼:
being.person.man.bodyparts.arms = true;being.person.man.bodyparts.legs= true;
不幸的是，測試表明，若你要為對(duì)象插入新成員，with的表現(xiàn)非常糟糕，它的執(zhí)行速度非常緩慢。替代方案是聲明一個(gè)變量：
復(fù)制內(nèi)容到剪貼板代碼:
var o = being.person.man.bodyparts;o.arms = true;
o.legs = true;
13. 使用 {}，而不用New Object()
在JavaScript有多種方式能新建對(duì)象。最傳統(tǒng)的方法是 new 語句，如下：
代碼:
var o = new Object();o.name = 'Benhuoer';
o.lastName = 'Yang';
o.someFunction = function() {
? ?console.log(this.name);
}
不過，這一方法讀起來卻比較糟糕。我強(qiáng)烈建議你采用下面這種在文字樣式上更為強(qiáng)健的寫法：
更好的寫法
代碼:
var o = {? ?name: 'Jeffrey',
? ?lastName = 'Way',
? ?someFunction : function() {
? ?? ?console.log(this.name);
? ?}
};
注意，如果你想新建一個(gè)空對(duì)象，用 {} 就能行：
復(fù)制內(nèi)容到剪貼板代碼:
var o = {};引用:
“對(duì)象字面符(Objects literals)幫助我們寫出支持很多特性，同時(shí)又關(guān)聯(lián)性強(qiáng)、簡明直接的代碼。沒必要直接調(diào)用新建語句，然后再費(fèi)心維護(hù)聲明變量和傳遞變量的語句之間的正確順序，等等。” – dyn-web.com14. 使用[]，而不用New Array()
新建數(shù)組時(shí)的同類型運(yùn)用。
行得通的寫法
代碼:
var a = new Array();a[0] = "Joe";
a[1] = 'Plumber';
更好的寫法
復(fù)制內(nèi)容到剪貼板代碼:
var a = ['Joe','Plumber'];引用:
“在JavaScript編程中經(jīng)常遇到的一個(gè)錯(cuò)誤是，該用數(shù)組時(shí)卻用了對(duì)象，該用對(duì)象時(shí)卻用了數(shù)組。規(guī)則其實(shí)很簡單：當(dāng)屬性名是小的連續(xù)整數(shù)時(shí)，你應(yīng)該使用數(shù)組。其他情況，使用對(duì)象。” – Douglas Crockford15. 一長列變量聲明？別寫那么多var，用逗號(hào)吧
復(fù)制內(nèi)容到剪貼板代碼:
var someItem = 'some string';var anotherItem = 'another string';
var oneMoreItem = 'one more string';
更好的寫法
復(fù)制內(nèi)容到剪貼板代碼:
var someItem = 'some string',? ? anotherItem = 'another string',
? ? oneMoreItem = 'one more string';
…不言自明。我不知道這樣做能否提升代碼執(zhí)行速度，但是確實(shí)讓你的代碼干凈許多。
17. 千萬千萬記得寫分號(hào)
大部分瀏覽器都允許你不寫句尾分號(hào)：
代碼:
var someItem = 'some string'function doSomething() {
??return 'something'
}
之前已經(jīng)說過，這樣做會(huì)造成潛在的更大、更難以發(fā)現(xiàn)的問題：
更好的寫法
代碼:
var someItem = 'some string';function doSomething() {
??return 'something';
}
18. “For in” 語句
遍歷對(duì)象時(shí)，你可能會(huì)發(fā)現(xiàn)你還需要獲取方法函數(shù)。所以遇到這種情況時(shí)，請(qǐng)一定記得給你的代碼包一層 if 語句，用以過濾信息。
代碼:
for(key in object) {? ?if(object.hasOwnProperty(key) {
? ?? ?...then do something...
? ?}
}
引自[/i] Douglas Crockford 所作：[i] The Good Parts
19. 使用Firebug的“Timer”功能優(yōu)化你的代碼
想要輕松地快速了解某項(xiàng)操作的用時(shí)嗎？使用Firebug的timer功能來記錄結(jié)果好了。
代碼:
function TimeTracker(){console.time("MyTimer");
for(x=5000; x > 0; x--){}
console.timeEnd("MyTimer");
}
20. 讀，讀，讀……Read, Read, Read…
雖然我是Web開發(fā)博客（就像這個(gè)！）的超級(jí)粉絲，但吃飯和睡覺前除了看書好像也別無選擇~ 在你的床頭柜上擺一本W(wǎng)eb開發(fā)的好書吧！下列書單都是我的最愛：
- Object-Oriented JavaScript（暫無中文版）
- The Good Parts（中文版）
- Learning jQuery 1.3（暫無中文版，但你可以看看老版本的中文版）
- Learning JavaScript（中文版）
閱讀他們…… 反復(fù)閱讀很多次！我現(xiàn)在都還在讀。
21. 自決的函數(shù)
相比于調(diào)用函數(shù)，讓函數(shù)在頁面載入或者某一父函數(shù)被調(diào)用時(shí)自動(dòng)執(zhí)行，是十分簡單方便的做法。你只需要把你的函數(shù)包在父輩之內(nèi)，然后添上一個(gè)額外的括號(hào)，本質(zhì)上這括號(hào)就觸發(fā)了你定義的函數(shù)（了解更多）。
代碼:
(function doSomething() {? ?return {
? ?? ?name: 'jeff',
? ?? ?lastName: 'way'
? ?};
})();
22. 原生 JavaScript 總是會(huì)比使用代碼庫來的快
諸如jQuery和Mootools這樣的JavaScript庫，能為你寫代碼的過程省下不少時(shí)間——尤其是當(dāng)需要 AJAX 操作時(shí)。不過你可得記住，只要你的代碼寫得恰當(dāng)，原生JavaScript總是會(huì)比利用代碼庫的寫法執(zhí)行得快一些。
jQuery的“each” 方法對(duì)于循環(huán)操作十分便利，但是使用原生態(tài)的for語句總歸會(huì)快很多。
23. Crockford 的 JSON.Parse
盡管 JavaScript 2會(huì)內(nèi)建JSON處理器，但寫這篇文章之時(shí)，我們還是需要自己實(shí)現(xiàn)。Douglas Crockford，JSON的創(chuàng)建者，已經(jīng)為我們創(chuàng)作出能直接使用的處理器了。您可以在這里下載。
導(dǎo)入這段代碼，你就能新建 JSON 全局對(duì)象，然后處理你的 .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>';
}
關(guān)于JSON，請(qǐng)查看更多介紹。
24. 移去“Language”
很多年前，language還是每段script標(biāo)簽必備屬性：
代碼:
<script type="text/javascript" language="javascript">...
</script>
不過現(xiàn)在，這屬性已經(jīng)沒啥用很久了…… 所以，刪掉算啦！
轉(zhuǎn)載于:https://www.cnblogs.com/guoqiao/archive/2009/07/23/1529136.html
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的学习JavaScript的24条实用建议的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 不去杭州
- 下一篇： 实验-网页动画(js版)