99久热国产精品视频尤物不卡_ 給JavaScript新手的24條實(shí)用建議 - JavaScript

為JavaScript做一點(diǎn)性能小提升吧！

本文列出了24條能讓你的代碼編寫(xiě)過(guò)程更為輕松高效的建議。也許您還是JavaScript初學(xué)者，剛剛寫(xiě)完自己的Hello World，那這里有很多對您的工作將十分有用的小貼士；也許有些技巧您已經(jīng)知道，那就試試快速瀏覽一下，看能不能發(fā)現一點(diǎn)新東西吧！

注：本文多次用到Firebug的console對象，請參考Firebug Console API 。關(guān)于firebug的更詳細介紹，請猛擊這里。

1. 用 === 代替 ==

JavaScript里有兩種不同的相等運算符：===|!== 和==|!=。相比之下，前者更值得推薦。請盡量使用前者。

引用:

“如果兩個(gè)比較對象有著(zhù)同樣的類(lèi)型和值，===返回true，!==返回false?！?br>
– The Good Parts

不過(guò)，如果使用==和!=，在操作不同數據類(lèi)型時(shí), 你可能會(huì )遇到一些意想不到的問(wèn)題。在進(jìn)行相等判斷前，JavaScript會(huì )試圖將它們轉換為字符串、數字或 Boolean量。

2. 避免使用Eval函數

Eval函數把一個(gè)字串作為參數，并把字串作為JavaScript語(yǔ)句執行，返回結果（參考）。

此函數不僅會(huì )降低你腳本的執行效率，而且還大大增加了安全風(fēng)險，因為它賦予了作為文本的參數太大的權利。千萬(wàn)別用！

3. 不要使用快速寫(xiě)法

技術(shù)上說(shuō)，你可以省略掉大部分花括弧和句尾分號，絕大多數瀏覽器都能正確執行以下語(yǔ)句：

復制內容到剪貼板

代碼:

if(someVariableExists)
   x = false

不過(guò)，如果是這樣的呢：

復制內容到剪貼板

代碼:

if(someVariableExists)
   x = false
   anotherFunctionCall();

你可能會(huì )認為它和下面的語(yǔ)句相等：

復制內容到剪貼板

代碼:

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

不幸的是，事實(shí)并非如此?，F實(shí)情況是它等價(jià)于：

復制內容到剪貼板

代碼:

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

如您注意到的，再漂亮的縮進(jìn)也不能代替這華麗的花括弧。在所有情況下都請寫(xiě)清楚花括號和句尾分號。在只有一行語(yǔ)句的時(shí)候能偶爾省略掉，雖然下這么做也是極度不被推薦的：

復制內容到剪貼板

代碼:

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

多考慮下將來(lái)吧，孩子

假設，在將來(lái)的開(kāi)發(fā)過(guò)程中，你需要為這個(gè) if 語(yǔ)句添加更多的命令呢？到時(shí)候你還不是得把括號給加上？

4. 好好利用JS Lint

JSLint 是由 Douglas Crockford 編寫(xiě)的一個(gè)調試器。你只需要貼上你的代碼，它就能快速為您掃描出任何明顯的錯誤和問(wèn)題。

引用:

“JSLint掃描接收的代碼。發(fā)現問(wèn)題，描述問(wèn)題，并給出其在源碼中的大概位置?？砂l(fā)現的問(wèn)題包括但不限于語(yǔ)法錯誤，雖然語(yǔ)法錯誤確實(shí)是最常見(jiàn)的。JSLint也會(huì )用
約定俗成的習慣檢查代碼的格式化風(fēng)格，以及結構錯誤。通過(guò)JSLint的掃描并不能保證你的程序就完全正確。它只是為您提供了額外一雙發(fā)現錯誤的眼睛?！?br>

– JSLint 文檔

完成代碼之前，把它放到JSLint里檢查一下，快速消滅你的無(wú)心之過(guò)。

5. 在頁(yè)面底部加載腳本

正如下圖所示：

請記住—— 我們要千方百計保證客戶(hù)端的頁(yè)面載入速度盡可能的快。而腳本沒(méi)載入完成，瀏覽器就沒(méi)法加載頁(yè)面的剩余部分。

如果你的JS文件只是添加一些額外功能——例如，為點(diǎn)擊某鏈接綁定事件——那大可以等頁(yè)面加載基本完成后再做。把JS文件放到頁(yè)面最后，body的結束標簽之前，這樣做最好了。

更好的寫(xiě)法是

復制內容到剪貼板

代碼:

<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 語(yǔ)句外部聲明變量

當需要執行冗長(cháng)的for語(yǔ)句時(shí)，不要讓JavaScript引擎每次都重復那些沒(méi)有必要的操作。例如：

這樣不好

復制內容到剪貼板

代碼:

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

這段代碼每次都重新定義數組長(chá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è)數組或對象做循環(huán)操作時(shí)，不要老惦記著(zhù)一表人才的for語(yǔ)句，拿點(diǎn)創(chuàng )意出來(lái)嘛！明明就還有很多更快的辦法：

復制內容到剪貼板

代碼:

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

引用:

“沒(méi)那么多繁文縟節來(lái)煩你；你就信我一次好了（或者你也可以自己試一試）—— 這真的是迄今能找到的最快辦法了！

用點(diǎn)土辦法，也別管它背后究竟發(fā)生了什么抽象的東西，通常土辦法都比那些優(yōu)雅的辦法要快捷得多！”

– James Padolsey, james.padolsey.com

8. 減少全局變量

引用:

“把你踩在全局的那些亂七八糟的腳印都歸于一人名下，能顯著(zhù)降低與其他應用、小工具或JS庫沖突的可能性?！?

– Douglas Crockford

復制內容到剪貼板

代碼:

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

更好的寫(xiě)法

復制內容到剪貼板

代碼:

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

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

9. 寫(xiě)好注釋

可能一開(kāi)始你會(huì )覺(jué)得并無(wú)必要，但相信我，你將來(lái)會(huì )主動(dòng)想要盡可能寫(xiě)好代碼的注釋的。當你幾個(gè)月后再回看某項目時(shí)，結果卻發(fā)現很難想起當時(shí)寫(xiě)某句東西時(shí)腦子在想的什么了，是不是很讓人沮喪呢？或者，如果有同事要修訂你的代碼呢？一定，一定要為你代碼里的重要部分加上注釋。

復制內容到剪貼板

代碼:

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

10. 試試漸進(jìn)增強

一定要記得為未啟用JavaScript的情況提供替代方案。大家可能會(huì )認為，“大部分我的訪(fǎng)客都啟用了JavaScript的，我才不用擔心”。這樣的話(huà)，你可就大錯特錯了！

你有沒(méi)有試過(guò)看看禁用JavaScript后你那漂亮的滑動(dòng)器都成啥樣了？（你可以下載 Web Developer ToolBar 輕松完成這項任務(wù)。）禁用之后你的網(wǎng)站可能就徹底失去了可用性！經(jīng)驗之談：開(kāi)發(fā)初期總是按照沒(méi)有JavaScript來(lái)設計你的網(wǎng)站，之后再進(jìn)行漸進(jìn)地功能增強，小心翼翼地改變你地布局。

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

看看下面的代碼：

復制內容到剪貼板

代碼:

setInterval(
"document.getElementById('container').innerHTML += 'My new number: ' + i", 3000
);

不僅執行不高效，而且和 eval 函數有著(zhù)同樣的高風(fēng)險。千萬(wàn)不要把字串傳遞給 setInterval 和 setTimeout。恰當的做法是，傳遞一個(gè)函數名：

復制內容到剪貼板

代碼:

setInterval(someFunction, 3000);

12. 不要使用with語(yǔ)句

初識之下，“with”語(yǔ)句似乎還挺好用的。它用于設置代碼在特定對象中的作用域。其基本用法是提供深入到對象中處理元素的快速寫(xiě)法。例如：

復制內容到剪貼板

代碼:

with (being.person.man.bodyparts) {
   arms = true;
   legs = true;
}

– 等價(jià)于 —

復制內容到剪貼板

代碼:

being.person.man.bodyparts.arms = true;
being.person.man.bodyparts.legs= true;

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

復制內容到剪貼板

代碼:

var o = being.person.man.bodyparts;
o.arms = true;
o.legs = true;

13. 使用 {}，而不用New Object()

在JavaScript有多種方式能新建對象。最傳統的方法是 new 語(yǔ)句，如下：

復制內容到剪貼板

代碼:

var o = new Object();
o.name = 'Benhuoer';
o.lastName = 'Yang';
o.someFunction = function() {
   console.log(this.name);
}

不過(guò)，這一方法讀起來(lái)卻比較糟糕。我強烈建議你采用下面這種在文字樣式上更為強健的寫(xiě)法：

更好的寫(xiě)法

復制內容到剪貼板

代碼:

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

注意，如果你想新建一個(gè)空對象，用 {} 就能行：

復制內容到剪貼板

代碼:

var o = {};

引用:

“對象字面符(Objects literals)幫助我們寫(xiě)出支持很多特性，同時(shí)又關(guān)聯(lián)性強、簡(jiǎn)明直接的代碼。沒(méi)必要直接調用新建語(yǔ)句，然后再費心維護聲明變量和傳遞變量的語(yǔ)句之間的正確順序，等等?！?– dyn-web.com

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

新建數組時(shí)的同類(lèi)型運用。

行得通的寫(xiě)法

復制內容到剪貼板

代碼:

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

更好的寫(xiě)法

復制內容到剪貼板

代碼:

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

引用:

“在JavaScript編程中經(jīng)常遇到的一個(gè)錯誤是，該用數組時(shí)卻用了對象，該用對象時(shí)卻用了數組。規則其實(shí)很簡(jiǎn)單：當屬性名是小的連續整數時(shí)，你應該使用數組。其他情況，使用對象?！?– Douglas Crockford

15. 一長(cháng)列變量聲明？別寫(xiě)那么多var，用逗號吧

復制內容到剪貼板

代碼:

var someItem = 'some string';
var anotherItem = 'another string';
var oneMoreItem = 'one more string';

更好的寫(xiě)法

復制內容到剪貼板

代碼:

var someItem = 'some string',
    anotherItem = 'another string',
    oneMoreItem = 'one more string';

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

17. 千萬(wàn)千萬(wàn)記得寫(xiě)分號

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

復制內容到剪貼板

代碼:

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

之前已經(jīng)說(shuō)過(guò)，這樣做會(huì )造成潛在的更大、更難以發(fā)現的問(wèn)題：

更好的寫(xiě)法

復制內容到剪貼板

代碼:

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

18. “For in” 語(yǔ)句

遍歷對象時(shí)，你可能會(huì )發(fā)現你還需要獲取方法函數。所以遇到這種情況時(shí)，請一定記得給你的代碼包一層 if 語(yǔ)句，用以過(guò)濾信息。

復制內容到剪貼板

代碼:

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

引自[/i] Douglas Crockford 所作：[i] The Good Parts

19. 使用Firebug的“Timer”功能優(yōu)化你的代碼

想要輕松地快速了解某項操作的用時(shí)嗎？使用Firebug的timer功能來(lái)記錄結果好了。

復制內容到剪貼板

代碼:

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

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

雖然我是Web開(kāi)發(fā)博客（就像這個(gè)?。┑某壏劢z，但吃飯和睡覺(jué)前除了看書(shū)好像也別無(wú)選擇~ 在你的床頭柜上擺一本W(wǎng)eb開(kāi)發(fā)的好書(shū)吧！下列書(shū)單都是我的最?lèi)?ài)：

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

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

21. 自決的函數

相比于調用函數，讓函數在頁(yè)面載入或者某一父函數被調用時(shí)自動(dòng)執行，是十分簡(jiǎn)單方便的做法。你只需要把你的函數包在父輩之內，然后添上一個(gè)額外的括號，本質(zhì)上這括號就觸發(fā)了你定義的函數（了解更多）。

復制內容到剪貼板

代碼:

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

22. 原生 JavaScript 總是會(huì )比使用代碼庫來(lái)的快

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

jQuery的“each” 方法對于循環(huán)操作十分便利，但是使用原生態(tài)的for語(yǔ)句總歸會(huì )快很多。

23. Crockford 的 JSON.Parse

盡管 JavaScript 2會(huì )內建JSON處理器，但寫(xiě)這篇文章之時(shí)，我們還是需要自己實(shí)現。Douglas Crockford，JSON的創(chuàng )建者，已經(jīng)為我們創(chuàng )作出能直接使用的處理器了。您可以在這里下載。

導入這段代碼，你就能新建 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>';
}

關(guān)于JSON，請查看更多介紹。

24. 移去“Language”

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

復制內容到剪貼板

代碼:

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

不過(guò)現在，這屬性已經(jīng)沒(méi)啥用很久了…… 所以，刪掉算啦！

就這些了，朋友們~

本站僅提供存儲服務(wù)，所有內容均由用戶(hù)發(fā)布，如發(fā)現有害或侵權內容，請點(diǎn)擊舉報。

欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久

引用:

代碼:

代碼:

代碼:

代碼:

代碼:

引用:

代碼:

代碼:

代碼:

代碼:

引用:

引用:

代碼:

代碼:

代碼:

代碼:

代碼:

代碼:

代碼:

代碼:

代碼:

代碼:

代碼:

引用:

代碼:

代碼:

引用:

代碼:

代碼:

代碼:

代碼:

代碼:

代碼:

代碼:

代碼:

代碼: