文：阿蜜果/2011-11-3

轉(zhuǎn)載請(qǐng)注明出處

1、 JavaScript編程壞習(xí)慣

1.1 變量名以大小字母開頭

變量名使用大寫字母開頭是個(gè)壞習(xí)慣，只有“構(gòu)造器”（JS的類）才用大寫字母開頭。好多VB、C#等微軟平臺(tái)下的程序員都喜歡將變量的第一個(gè)字母大寫，但像Java這些編程語(yǔ)言的編程規(guī)范里要求變量名以小寫字母開頭，這種camel寫法在筆者認(rèn)為更好。

1.2 不用var關(guān)鍵字定義一個(gè)新變量

若沒有用var聲明變量，則會(huì)在其使用后當(dāng)成全局變量來(lái)處理，全局變量有很多“壞味道”，請(qǐng)看如下代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

function foo() {

bar = 2; // bar變成了一個(gè)全局變量

var str = "Amigo";

}

foo();

alert("bar=" + bar);

alert("str=" + str);

</script>

</head>

</html>

第一個(gè)alert提示“2”，第二個(gè)alert因?yàn)?/span>str被定義為局部變量，所以出現(xiàn)JavaScript錯(cuò)誤：str未定義。

1.3 忽略可讀性

首先是使用工具來(lái)增加可讀性（document.getElementsByClassName vs $()）。其次是不能因?yàn)楹?jiǎn)潔而破壞可讀性，比如不要使用太復(fù)雜的三目運(yùn)算符（三目運(yùn)算符里還包括另外一個(gè)三目運(yùn)算符什么的最討厭了……）。提高可讀性的方法很多，有時(shí)候需要?jiǎng)?chuàng)建必要的變量。例如如下長(zhǎng)長(zhǎng)的語(yǔ)句：

document.getElementById(“imagegallery”).getElementByTagName(“a”)

可替換為如下兩句容易理解的語(yǔ)句：

var gallery = document.getElementById(“imagegallery”);

var links = gallery. getElementByTagName(“a”);

《JavaScript: Bad Practices》一文中有很好的實(shí)例，可讀性不夠好的語(yǔ)句段如下：

document.getElementById('foo').style.border = '3px solid #FFF';

document.getElementById('foobar').style.border = '3px solid #FFF';

document.getElementById('foofoobar').style.border = '3px solid #FFF';

document.getElementById('foofoobarbar').style.border = '3px solid #FFF';

因?yàn)槠湓O(shè)置的border值都一樣，可以使用如下簡(jiǎn)短而可讀性更好的語(yǔ)句：

var allMyFoos = '#foo, #foobar, #foofoobar, #foofoobarbar';

jQuery(allMyFoos).css('border', '3px solid #FFF');

1.4 過多的注釋

良好的代碼是最好的注釋。如果你覺得你的代碼太復(fù)雜，不用注釋說不清楚，那可能你的代碼寫得不夠清晰。只提供關(guān)鍵代碼的注釋，其余的代碼應(yīng)該是能夠自注釋的。

1.5 使用JavaScript拼接長(zhǎng)長(zhǎng)的HTML字符串

在代碼中拼接長(zhǎng)長(zhǎng)的HTML字符串，非常不便理解，如果拼接的字符串需要使用innerHTML添加到document的某個(gè)元素中，可以采用別的辦法（例如使用appendChild()方法添加元素）：

var widgetStructure = '<div id=' + widgetID + '>' +

'<h2 id="' + widgetTitleID + '">' + widgetTitle + '</h2>' +

'<div id="' + widgetContentID + '" style="' + widgetContentStyles + '">' +

(function() {

var paras = '';

for (var i = 0; i < paraItems.length; ++i) {

paras += '<p>' + paraItems[i] + '</p>';

}

return paras;

})() +

'</div>' +

'</div>';

1.6 在循環(huán)中創(chuàng)建DOM元素

指的是當(dāng)父元素里要?jiǎng)?chuàng)建很多子元素時(shí)，直接一個(gè)一個(gè)使用appendChild()方法拼接的速度不是很理想，應(yīng)該先用document.createDocumentFragment創(chuàng)建一個(gè)fragment對(duì)象，用這個(gè)對(duì)象來(lái)appendChild()，再將這個(gè)fragment添加到父元素。另外作者還提到innerHTML還會(huì)更快。

如下是帶著“壞味道”的實(shí)例：

for (var i = 0; i < 100; ++i) {

elementInDocument.appendChild(document.createElement('div'));

}

改造后的代碼如下所示：

var fragment = document.createDocumentFragment();

for (var i = 0; i < 100; ++i) {

fragment.appendChild(document.createElement('div'));

}

elementInDocument.appendChild(fragment);

1.7 使用行內(nèi)事件

例如如下代碼中，使用了“javascript:”偽協(xié)議和“#”記號(hào)：

<a href="javascript:void doSomething();">Click</a>

<a href="#" onclick="return doSomething();">Click</a>

這樣做的缺點(diǎn)很明顯，首先它在HTML中混雜了JavaScript代碼，沒有遵循“分離JavaScript”的原則，可以在獨(dú)立的js文件中為對(duì)應(yīng)的鏈接添加處理事件，例如：

link[i].onclick = function() {

……

}

1.8 JavaScript功能被禁用時(shí)，沒有預(yù)留后路

例如在如下代碼中，當(dāng)JavaScript被禁用時(shí)，因?yàn)?/span>href被設(shè)置為“#”，當(dāng)JavaScript功能被禁用后，點(diǎn)擊但不會(huì)引起任何動(dòng)作：

<a href="#" onclick="return doSomething();">Click</a>

如果JavaScript方法只是為了做一些炫目或更理想化的用戶體驗(yàn)，而后還是要跳轉(zhuǎn)到某個(gè)地址，那么可以為這個(gè)href設(shè)置語(yǔ)句的地址，使得它能在JavaScript被禁用時(shí)，也能完成基本功能，而在對(duì)應(yīng)的JavaScript處理方法中，只要返回false，href中的鏈接就不會(huì)被執(zhí)行跳轉(zhuǎn)。

1.9 將JS代碼寫入html/xhtml文件中

例如在如下代碼中，使用<script>將一串JS代碼寫入到了html文件中：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>nodeName測(cè)試</title>

window.onload = printProperty;

function printProperty()

{

var bodyElement = document.getElementsByTagName("body")[0];

var items = bodyElement.childNodes;

for(var i = 0; i < items.length; i++) {

alert(items[i].nodeName);

}

</script>

</head>

<body>

<ul>

</ul>

</body>

<html>

其實(shí)這段代碼完全可以寫入js文件中，例如example.js中，再使用如下語(yǔ)句引入：

</script>

1.10 為JS代碼做過多的假設(shè)

很多JS在代碼編寫時(shí)，使用getElementById()方法取得某個(gè)元素后馬上就對(duì)元素進(jìn)行一些屬性設(shè)置等操作，在這種情況下，他是做了假設(shè)的，即假設(shè)這個(gè)元素已經(jīng)存在的。若這個(gè)元素不一樣存在，程序員要盡量避免這種假設(shè)，而檢查該元素是否存在。

例如在如下代碼中，就進(jìn)行了過多的假設(shè)：

function showPic(whichpic) {

var source = whichpic.getAttribute("href");

var placeholder = document.getElementById("placeholder");

placeholder.setAttribute("src", source);

var text = whichpic.getAttribute("title");

var description = document.getElementById("description");

description.firstChild.nodeValue = text;

}

可將這段代碼改造成：

function showPic(whichpic) {

if (!document.getElementById("placeholder")) return false;

var source = whichpic.getAttribute("href");

var placeholder = document.getElementById("placeholder");

placeholder.setAttribute("src", source);

var text = whichpic.getAttribute("title");

if (!document.getElementById("description")) return false;

var description = document.getElementById("description");

description.firstChild.nodeValue = text;

}

1.11 使用某些瀏覽器的特性

2、參考文檔

（1）《JavaScript: Bad Practices》：

http://james.padolsey.com/javascript/javascript-bad-practices/

（2）《寫JavaScript時(shí)要注意避免的壞習(xí)慣》：

http://hi.baidu.com/chrisyue/blog/item/ccea6060ce14cb49eaf8f867.html

（3）《JavaScript DOM編程藝術(shù)》 [英] Jeremy Keith 著，楊濤、王曉云等譯，人民郵電出版社出版

posted on 2011-11-03 11:28 阿蜜果閱讀(2429) 評(píng)論(3) 編輯收藏所屬分類: Javascript

FeedBack:

# re: 蜜果私塾：JavaScript代碼的壞味道【不斷補(bǔ)充】

2011-11-04 08:23 | tb

恩不錯(cuò) 學(xué)習(xí)了回復(fù) 更多評(píng)論

# re: 蜜果私塾：JavaScript代碼的壞味道【不斷補(bǔ)充】

2011-11-06 01:19 | allenny

Java要求變量名大寫開頭？樓主沒寫過Java吧回復(fù) 更多評(píng)論

# re: 蜜果私塾：JavaScript代碼的壞味道【不斷補(bǔ)充】

2011-11-06 13:13 | 阿蜜果

@allenny
從我寫的文章的上下文很明顯看出是筆誤。呵呵回復(fù) 更多評(píng)論

新用戶注冊(cè) 刷新評(píng)論列表


只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關(guān)文章: 蜜果私塾：在JavaScript中使用適配器模式蜜果私塾：在JavaScript中使用工廠模式蜜果私塾：在JavaScript中使用單例模式蜜果私塾：JavaScript代碼的壞味道【不斷補(bǔ)充】蜜果私塾：DOM，黑色藝術(shù)的終結(jié)者（3）蜜果私塾：DOM，黑色藝術(shù)的終結(jié)者（2）蜜果私塾：DOM，黑色藝術(shù)的終結(jié)者（1） js操作iframe的一些知識(shí) JavaScript學(xué)習(xí)筆記——繼承 JavaScript學(xué)習(xí)筆記——瀏覽器中的JavaScript

2011年11月

日

一

二

三

四

五

六

      生活將我們磨圓，是為了讓我們滾得更遠(yuǎn)——“圓”來(lái)如此。
      我的作品：
  玩轉(zhuǎn)Axure RP （2015年12月出版）

Power Designer系統(tǒng)分析與建模實(shí)戰(zhàn) （2015年7月出版）

Struts2+Hibernate3+Spring2 （2010年5月出版）

1、 JavaScript編程壞習(xí)慣

1.1 變量名以大小字母開頭

1.2 不用var關(guān)鍵字定義一個(gè)新變量

1.3 忽略可讀性

1.4 過多的注釋

1.5 使用JavaScript拼接長(zhǎng)長(zhǎng)的HTML字符串

1.6 在循環(huán)中創(chuàng)建DOM元素

1.7 使用行內(nèi)事件

1.8 JavaScript功能被禁用時(shí)，沒有預(yù)留后路

1.9 將JS代碼寫入html/xhtml文件中

1.10 為JS代碼做過多的假設(shè)

1.11 使用某些瀏覽器的特性

2、參考文檔

留言簿(263)

隨筆分類

隨筆檔案

文章分類

相冊(cè)

關(guān)注blog

積分與排名

最新評(píng)論

閱讀排行榜

評(píng)論排行榜

1、 JavaScript編程壞習(xí)慣

1.1 變量名以大小字母開頭

1.2 不用var關(guān)鍵字定義一個(gè)新變量

1.3 忽略可讀性

1.4 過多的注釋

1.5 使用JavaScript拼接長(zhǎng)長(zhǎng)的HTML字符串

1.6 在循環(huán)中創(chuàng)建DOM元素

1.7 使用行內(nèi)事件

1.8 JavaScript功能被禁用時(shí)，沒有預(yù)留后路

1.9 將JS代碼寫入html/xhtml文件中

1.10 為JS代碼做過多的假設(shè)

1.11 使用某些瀏覽器的特性

2、 參考文檔

留言簿(263)

隨筆分類

隨筆檔案

文章分類

相冊(cè)

關(guān)注blog

積分與排名

最新評(píng)論

閱讀排行榜

評(píng)論排行榜

2、參考文檔