posts - 297,  comments - 1618,  trackbacks - 0

文:阿蜜果/2011-11-3

转载请注明出处

1、 JavaScript编程坏习惯

1.1 变量名以大小字母开头

         变量名使用大写字母开头是个坏习惯,只有“构造器”(JS的类)才用大写字母开头。好多VBC#等微软平台下的程序员都喜欢将变量的第一个字母大写,但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>
        
<script type="text/javascript">
            
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:”伪协议和“#”记号:

<href="javascript:void doSomething();">Click</a>
<!--OR-->
<href="#" onclick="return doSomething();">Click</a>

       这样做的缺点很明显,首先它在HTML中混杂了JavaScript代码,没有遵循“分离JavaScript”的原则,可以在独立的js文件中为对应的链接添加处理事件,例如:

link[i].onclick = function() {
    ……
}

 

1.8 JavaScript功能被禁用时,没有预留后路

         例如在如下代码中,当JavaScript被禁用时,因为href被设置为“#”,当JavaScript功能被禁用后,点击但不会引起任何动作:

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

      如果JavaScript方法只是为了做一些炫目或更理想化的用户体验,而后还是要跳转到某个地址,那么可以为这个href设置语句的地址,使得它能在JavaScript被禁用时,也能完成基本功能,而在对应的JavaScript处理方法中,只要返回falsehref中的链接就不会被执行跳转。

1.9 JS代码写入html/xhtml文件中

         例如在如下代码中,使用<script>将一串JS代码写入到了html文件中:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    
<head>
        
<title>nodeName测试</title>
        
<script type="text/javascript">
            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>
        
<id="description">测试</p>
        
<ul>
           
<li><href="test1.jpg">图片1</a></li>
           
<li><href="test2.jpg">图片2</a></li>
           
<li><href="test3.jpg">图片3</a></li>
        
</ul>
    
</body>
<html>

        其实这段代码完全可以写入js文件中,例如example.js中,再使用如下语句引入:

<script type="text/javascript" src="innerHtmlExample.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 阿蜜果 阅读(2397) 评论(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
从我写的文章的上下文很明显看出是笔误。呵呵  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航:
 
<2011年11月>
303112345
6789101112
13141516171819
20212223242526
27282930123
45678910

      生活将我们磨圆,是为了让我们滚得更远——“圆”来如此。
      我的作品:
      玩转Axure RP  (2015年12月出版)
      

      Power Designer系统分析与建模实战  (2015年7月出版)
      
     Struts2+Hibernate3+Spring2   (2010年5月出版)
     

留言簿(262)

随笔分类

随笔档案

文章分类

相册

关注blog

积分与排名

  • 积分 - 2279107
  • 排名 - 3

最新评论

阅读排行榜

评论排行榜