文：阿蜜果/2011-11-3

轉載請注明出處

1、 JavaScript編程壞習慣

1.1 變量名以大小字母開頭

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

1.2 不用var關鍵字定義一個新變量

若沒有用var聲明變量，則會在其使用后當成全局變量來處理，全局變量有很多“壞味道”，請看如下代碼：

<!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變成了一個全局變量

var str = "Amigo";

}

foo();

alert("bar=" + bar);

alert("str=" + str);

</script>

</head>

</html>

第一個alert提示“2”，第二個alert因為str被定義為局部變量，所以出現JavaScript錯誤：str未定義。

1.3 忽略可讀性

首先是使用工具來增加可讀性（document.getElementsByClassName vs $()）。其次是不能因為簡潔而破壞可讀性，比如不要使用太復雜的三目運算符（三目運算符里還包括另外一個三目運算符什么的最討厭了……）。提高可讀性的方法很多，有時候需要創建必要的變量。例如如下長長的語句：

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

可替換為如下兩句容易理解的語句：

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

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

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

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';

因為其設置的border值都一樣，可以使用如下簡短而可讀性更好的語句：

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

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

1.4 過多的注釋

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

1.5 使用JavaScript拼接長長的HTML字符串

在代碼中拼接長長的HTML字符串，非常不便理解，如果拼接的字符串需要使用innerHTML添加到document的某個元素中，可以采用別的辦法（例如使用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 在循環中創建DOM元素

指的是當父元素里要創建很多子元素時，直接一個一個使用appendChild()方法拼接的速度不是很理想，應該先用document.createDocumentFragment創建一個fragment對象，用這個對象來appendChild()，再將這個fragment添加到父元素。另外作者還提到innerHTML還會更快。

如下是帶著“壞味道”的實例：

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 使用行內事件

例如如下代碼中，使用了“javascript:”偽協議和“#”記號：

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

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

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

link[i].onclick = function() {

……

}

1.8 JavaScript功能被禁用時，沒有預留后路

例如在如下代碼中，當JavaScript被禁用時，因為href被設置為“#”，當JavaScript功能被禁用后，點擊但不會引起任何動作：

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

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

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

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

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

<html>

<head>

<title>nodeName測試</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>

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

</script>

1.10 為JS代碼做過多的假設

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

例如在如下代碼中，就進行了過多的假設：

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時要注意避免的壞習慣》：

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

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

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

FeedBack:

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

2011-11-04 08:23 | tb

恩不錯學習了回復更多評論

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

2011-11-06 01:19 | allenny

Java要求變量名大寫開頭？樓主沒寫過Java吧回復更多評論

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

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

@allenny
從我寫的文章的上下文很明顯看出是筆誤。呵呵回復更多評論

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




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

2011年11月

日

一

二

三

四

五

六

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

Power Designer系統分析與建模實戰（2015年7月出版）

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

1、 JavaScript編程壞習慣

1.1 變量名以大小字母開頭

1.2 不用var關鍵字定義一個新變量

1.3 忽略可讀性

1.4 過多的注釋

1.5 使用JavaScript拼接長長的HTML字符串

1.6 在循環中創建DOM元素

1.7 使用行內事件

1.8 JavaScript功能被禁用時，沒有預留后路

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

1.10 為JS代碼做過多的假設

1.11 使用某些瀏覽器的特性

2、參考文檔

留言簿(263)

隨筆分類

隨筆檔案

文章分類

相冊

關注blog

積分與排名

最新評論

閱讀排行榜

評論排行榜

1、 JavaScript編程壞習慣

1.1 變量名以大小字母開頭

1.2 不用var關鍵字定義一個新變量

1.3 忽略可讀性

1.4 過多的注釋

1.5 使用JavaScript拼接長長的HTML字符串

1.6 在循環中創建DOM元素

1.7 使用行內事件

1.8 JavaScript功能被禁用時，沒有預留后路

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

1.10 為JS代碼做過多的假設

1.11 使用某些瀏覽器的特性

2、 參考文檔

留言簿(263)

隨筆分類

隨筆檔案

文章分類

相冊

關注blog

積分與排名

最新評論

閱讀排行榜

評論排行榜

2、參考文檔