JavaScript编程坏习惯

最新推荐文章于 2024-11-13 17:27:29 发布

iteye_19613

最新推荐文章于 2024-11-13 17:27:29 发布

阅读量143

点赞数

分类专栏： javascript 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/iteye_19613/article/details/82198334

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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="#" οnclick="return doSomething();">Click</a>

这样做的缺点很明显，首先它在HTML中混杂了JavaScript代码，没有遵循“分离JavaScript”的原则，可以在独立的js文件中为对应的链接添加处理事件，例如：
link[i].onclick = function() {
……
}

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

例如在如下代码中，当JavaScript被禁用时，因为href被设置为“#”，当JavaScript功能被禁用后，点击但不会引起任何动作：
<a href="#" οnclick="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