欧美激情网,国产欧美亚洲高清,欧美屁股xxxxx,欧美群妇大交群,欧美人与物ⅴideos另类,区二区三区在线 | 欧洲

知識(shí)學(xué)堂
  • ·聯(lián)系電話:+86.023-75585550
  • ·聯(lián)系傳真:+86.023-75585550
  • ·24小時(shí)手機(jī):13896886023
  • ·QQ 咨 詢:361652718 513960520
當(dāng)前位置 > 首頁(yè) > 知識(shí)學(xué)堂 > 網(wǎng)站建設(shè)知識(shí)
JavaScript技巧:24條JavaScript實(shí)用建議
更新時(shí)間:2011-10-13 | 發(fā)布人:本站 | 點(diǎn)擊率:564

為JavaScript做一點(diǎn)性能小提升吧!
本文列出了24條能讓你的代碼編寫過(guò)程更為輕松高效的建議。也許您還是JavaScript初學(xué)者,剛剛寫完自己的Hello World,那這里有很多對(duì)您的工作將十分有用的小貼士;也許有些技巧您已經(jīng)知道,那就試試快速瀏覽一下,看能不能發(fā)現(xiàn)一點(diǎn)新東西吧!
注:本文多次用到Firebug的console對(duì)象,請(qǐng)參考 Firebug Console API 。關(guān)于firebug的更詳細(xì)介紹,請(qǐng)猛擊這里。
1. 用 === 代替 ==JavaScript里有兩種不同的相等運(yùn)算符:===|!== 和==|!=。相比之下,前者更值得推薦。請(qǐng)盡量使用前者。
“如果兩個(gè)比較對(duì)象有著同樣的類型和值,===返回true,!==返回false!
– JavaScript: The Good Parts
不過(guò),如果使用==和!=,在操作不同數(shù)據(jù)類型時(shí), 你可能會(huì)遇到一些意想不到的問(wèn)題。在進(jìn)行相等判斷前,JavaScript會(huì)試圖將它們轉(zhuǎn)換為字符串、數(shù)字或 Boolean量。
2. 避免使用Eval函數(shù)
Eval函數(shù)把一個(gè)字串作為參數(shù),并把字串作為JavaScript語(yǔ)句執(zhí)行,返回結(jié)果(參考)。
此函數(shù)不僅會(huì)降低你腳本的執(zhí)行效率,而且還大大增加了安全風(fēng)險(xiǎn),因?yàn)樗x予了作為文本的參數(shù)太大的權(quán)利。千萬(wàn)別用!
3. 不要使用快速寫法
技術(shù)上說(shuō),你可以省略掉大部分花括弧和句尾分號(hào),絕大多數(shù)瀏覽器都能正確執(zhí)行以下語(yǔ)句:
.if(someVariableExists)
x = false
不過(guò),如果是這樣的呢:
.if(someVariableExists)
x = false
anotherFunctionCall();
你可能會(huì)認(rèn)為它和下面的語(yǔ)句相等:
if(someVariableExists) {
x = false;
anotherFunctionCall();
}
不幸的是,事實(shí)并非如此,F(xiàn)實(shí)情況是它等價(jià)于:
if(someVariableExists) {
x = false;
}
anotherFunctionCall();


如您注意到的,再漂亮的縮進(jìn)也不能代替這華麗的花括弧。在所有情況下都請(qǐng)寫清楚花括號(hào)和句尾分號(hào)。在只有一行語(yǔ)句的時(shí)候能偶爾省略掉,雖然下這么做也是極度不被推薦的:
if(2 + 2 === 4) return 'nicely done';
多考慮下將來(lái)吧,孩子
假設(shè),在將來(lái)的開(kāi)發(fā)過(guò)程中,你需要為這個(gè) if 語(yǔ)句添加更多的命令呢?到時(shí)候你還不是得把括號(hào)給加上?
4. 好好利用JS Lint
JSLint 是由 Douglas Crockford 編寫的一個(gè)調(diào)試器。你只需要貼上你的代碼,它就能快速為您掃描出任何明顯的錯(cuò)誤和問(wèn)題。
“JSLint 掃描接收的代碼。發(fā)現(xiàn)問(wèn)題,描述問(wèn)題,并給出其在源碼中的大概位置?砂l(fā)現(xiàn)的問(wèn)題包括但不限于語(yǔ)法錯(cuò)誤,雖然語(yǔ)法錯(cuò)誤確實(shí)是最常見(jiàn)的。JSLint也會(huì)用約定俗成的習(xí)慣檢查代碼的格式化風(fēng)格,以及結(jié)構(gòu)錯(cuò)誤。通過(guò)JSLint的掃描并不能保證你的程序就完全正確。它只是為您提供了額外一雙發(fā)現(xiàn)錯(cuò)誤的眼睛!
– JSLint 文檔
完成代碼之前,把它放到JSLint里檢查一下,快速消滅你的無(wú)心之過(guò)。
5. 在頁(yè)面底部加載腳本
正如下圖所示:

請(qǐng)記住—— 我們要千方百計(jì)保證客戶端的頁(yè)面載入速度盡可能的快。而腳本沒(méi)載入完成,瀏覽器就沒(méi)法加載頁(yè)面的剩余部分。
如果你的JS文件只是添加一些額外功能——例如,為點(diǎn)擊某鏈接綁定事件——那大可以等頁(yè)面加載基本完成后再做。把JS文件放到頁(yè)面最后,body的結(jié)束標(biāo)簽之前,這樣做最好了。
更好的寫法是:

超哥是世界上最帥的人。benhuoer.com是世界上最好看的博客。

 

 


6. 在 For 語(yǔ)句外部聲明變量
當(dāng)需要執(zhí)行冗長(zhǎng)的for語(yǔ)句時(shí),不要讓JavaScript引擎每次都重復(fù)那些沒(méi)有必要的操作。例如:
這樣不好:
for(var i = 0; i < someArray.length; i++) {
var container = document.getElementById('container');
container.innerHtml += 'my number: ' + i;
console.log(i);
}
這段代碼每次都重新定義數(shù)組長(zhǎng)度,每次都在遍歷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語(yǔ)句,拿點(diǎn)創(chuàng)意出來(lái)嘛!明明就還有很多更快的辦法:
var arr = ['item 1', 'item 2', 'item 3', ...];
var list = '
' + arr.join('
') + '
';
“沒(méi)那么多繁文縟節(jié)來(lái)煩你;你就信我一次好了(或者你也可以自己試一試)—— 這真的是迄今能找到的最快辦法了!
用點(diǎn)土辦法,也別管它背后究竟發(fā)生了什么抽象的東西,通常土辦法都比那些優(yōu)雅的辦法要快捷得多!”– James Padolsey, james.padolsey.com
8. 減少全局變量
“把你踩在全局的那些亂七八糟的腳印都?xì)w于一人名下,能顯著降低與其他應(yīng)用、小工具或JS庫(kù)沖突的可能性! – 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
注意看,我們是如何戲劇化地把“亂七八糟的腳印”都?xì)w到“DudeNameSpace”這對(duì)象之下的。
9. 寫好注釋
可能一開(kāi)始你會(huì)覺(jué)得并無(wú)必要,但相信我,你將來(lái)會(huì)主動(dòng)想要盡可能寫好代碼的注釋的。當(dāng)你幾個(gè)月后再回看某項(xiàng)目時(shí),結(jié)果卻發(fā)現(xiàn)很難想起當(dāng)時(shí)寫某句東西時(shí)腦子在想的什么了,是不是很讓人沮喪呢?或者,如果有同事要修訂你的代碼呢?一定,一定要為你代碼里的重要部分加上注釋。
// Cycle through array and echo out each name.
for(var i = 0, len = array.length; i < len; i++) {
console.log(array[i]);
}
10. 試試漸進(jìn)增強(qiáng)