文:阿蜜果/2011-11-3
转载请注明出处
变量名使用大写字母开头是个坏习惯,只有“构造器”(JS的类)才用大写字母开头。好多VB、C#等微软平台下的程序员都喜欢将变量的第一个字母大写,但像Java这些编程语言的编程规范里要求变量名以小写字母开头,这种camel写法在笔者认为更好。
若没有用var声明变量,则会在其使用后当成全局变量来处理,全局变量有很多“坏味道”,请看如下代码:
第一个alert提示“2”,第二个alert因为str被定义为局部变量,所以出现JavaScript错误:str未定义。
首先是使用工具来增加可读性(document.getElementsByClassName vs $())。其次是不能因为简洁而破坏可读性,比如不要使用太复杂的三目运算符(三目运算符里还包括另外一个三目运算符什么的最讨厌了……)。提高可读性的方法很多,有时候需要创建必要的变量。例如如下长长的语句:
可替换为如下两句容易理解的语句:
《JavaScript: Bad Practices》一文中有很好的实例,可读性不够好的语句段如下:
因为其设置的border值都一样,可以使用如下简短而可读性更好的语句:
良好的代码是最好的注释。如果你觉得你的代码太复杂,不用注释说不清楚,那可能你的代码写得不够清晰。只提供关键代码的注释,其余的代码应该是能够自注释的。
在代码中拼接长长的HTML字符串,非常不便理解,如果拼接的字符串需要使用innerHTML添加到document的某个元素中,可以采用别的办法(例如使用appendChild()方法添加元素):
指的是当父元素里要创建很多子元素时,直接一个一个使用appendChild()方法拼接的速度不是很理想,应该先用document.createDocumentFragment创建一个fragment对象,用这个对象来appendChild(),再将这个fragment添加到父元素。另外作者还提到innerHTML还会更快。
如下是带着“坏味道”的实例:
改造后的代码如下所示:
例如如下代码中,使用了“javascript:”伪协议和“#”记号:
这样做的缺点很明显,首先它在HTML中混杂了JavaScript代码,没有遵循“分离JavaScript”的原则,可以在独立的js文件中为对应的链接添加处理事件,例如:
例如在如下代码中,当JavaScript被禁用时,因为href被设置为“#”,当JavaScript功能被禁用后,点击但不会引起任何动作:
如果JavaScript方法只是为了做一些炫目或更理想化的用户体验,而后还是要跳转到某个地址,那么可以为这个href设置语句的地址,使得它能在JavaScript被禁用时,也能完成基本功能,而在对应的JavaScript处理方法中,只要返回false,href中的链接就不会被执行跳转。
例如在如下代码中,使用<script>将一串JS代码写入到了html文件中:
其实这段代码完全可以写入js文件中,例如example.js中,再使用如下语句引入:
很多JS在代码编写时,使用getElementById()方法取得某个元素后马上就对元素进行一些属性设置等操作,在这种情况下,他是做了假设的,即假设这个元素已经存在的。若这个元素不一样存在,程序员要尽量避免这种假设,而检查该元素是否存在。
例如在如下代码中,就进行了过多的假设:
可将这段代码改造成:
(1)《JavaScript: Bad Practices》:
http://james.padolsey.com/javascript/javascript-bad-practices/
(2)《写JavaScript时要注意避免的坏习惯》:
http://hi.baidu.com/chrisyue/blog/item/ccea6060ce14cb49eaf8f867.html