文：阿蜜果/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 阿蜜果阅读(2405) 评论(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、参考文档

留言簿(262)

随笔分类

随笔档案

文章分类

相册

关注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、 参考文档

留言簿(262)

随笔分类

随笔档案

文章分类

相册

关注blog

积分与排名

最新评论

阅读排行榜

评论排行榜

2、参考文档