JavaScript编程坏习惯 -

smallant7

浏览: 1313 次
性别:
来自: 湖南

最近访客更多访客>>

woodding2008

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JavaScript编程坏习惯

博客分类：

javascript

javascript

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>
        <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:”伪协议和“#”记号：
<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>
        <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>
        <p id="description">测试</p>
        <ul>
           <li><a href="test1.jpg">图片1</a></li>
           <li><a href="test2.jpg">图片2</a></li>
           <li><a 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 著，杨涛、王晓云等译，人民邮电出版社出版
------------------------------------------------------------------------------------------
                                                       转载自阿蜜果 http://www.blogjava.net/amigoxie

分享到：