不管你现在的编程技能有多么的高超曾经你也是个亦步亦趋不断的学习的初学者在编程这条曲折的道路上我想你肯定犯过一些低级的错误遇见过一些普通的编码陷阱
不必要的DOM操作
例如下面这段代码
// antipattern
for （var i = ; i < ; i++）{
var li = $（<li>）html（This is list item # + （i+））
$（#someUL）append（li）
}
这段代码对DOM进行了次修改并且创建了个不必要的jQuery对象正确的做法是使用一个文档片段或者创建一个字符串把个<li>元素赋给该字符串然后附加到HTML中这样就只需运行DOM一次代码如下
var liststring = ;
for （var i = ; i > ; i）{
liststring += <li>This is list item # + （ i）
}
documentgetElementById（someUL）innerHTML（liststring）
正如上面所描述的一样下面再提供一个方式使用数组
var liststring = <li>
var lis = [];
for （var i = ; i > ; i）{
lispush（This is list item # + （ i））
}
liststring += lisjoin（</li><li>） + </li>;
documentgetElementById（someUL）innerHTML（liststring）
这是在JavaScript创建重复HTML最快最简单的方法无需使用模板库或框架
不一致的变量名和函数名
这个问题是非常重要的尤其当你在别人的代码上工作时一定要保持标识符（变量名和函数名）一致例如下面这段代码
var foo = bar;
var plant = green;
var car = red;
通常人们并不会设置变量名叫Something这涉及到命名规则问题命名应清晰明了一目了然很多编程语言地变量命名都使用大写
下面是对函数的命名
function subtractFive（number）{
return number ;
}
语法结构清晰并且能起到解释性功能
例如想要对给定的数字加仍采用上述命名模式比如
function addFive（number）{
return number + ;
}
有时你会根据返回值命名例如该函数要返回一个HTML字符串那么可以命名为getTweetHTML（）如果函数只是做一些操作无需返回值那么可以在前面加一个do前缀例如doFetchTweets（）
构造函数通常会遵循类原则大写第一个字母
function Dog（color）{
lor = color;
}
命名应带有描述性比如操作型的函数在前面加do另外要具备可读性和提示性
在for…Loops中使用hasOwnProperty（）方法
JavaScript数组是没有关联的可以把它当做哈希表使用循环来遍历对象属性
for （var prop in someObject） {
alert（someObject[prop]） // alerts value of property
}
然而存在的问题是for…in loop是在对象属性链上遍历每个枚举类型的属性如果你只想使用对象实际拥有的属性这可能有问题的那怎么解决呢？你可以使用hasOwnProperty（）方法代码如下
for （var prop in someObject） {
if （someObjecthasOwnProperty（prop）） {
alert（someObject[prop]） // alerts value of property
}
}
比较布尔值
把布尔值作为条件进行比较其实这是在浪费电脑的计算时间看下面这个例子吧
if （foo == true） {
// do something for true
} else {
// do something for false
}
其实foo==true这个比较完全是多余的因为foo已经是布尔类型直接这样写就行
if （foo） {
// do something for true
} else {
// do something for false
}
又或者这样写
if （！foo） {
// do something if foo is false
} else {
// do something if foo is true
}
事件绑定
在JavaScript中事件是个复杂的问题事件冒泡（event bubbling）和委托正在取代内联事件（inline onclick）操作（一些特殊的初始页除外）
假设你有一个图片网格需要启动一个modal lightbox窗口千万不要采取下面的做法示例采用的是jQuery如果你使用相似的库或者其他冒泡机制也同样适合传统的JavaScript
相关的HTML代码
<div id=gridcontainer>
<a ><img src=someimagethumbjpg></a>
<a ><img src=someimagethumbjpg></a>
<a ><img src=someimagethumbjpg></a>
…
</div>
不好的JavaScript写法
$（a）on（click function（） {
callLightbox（this）
}）
这段代码假设调用lightbox里面传递一个anchor元素并且引用全屏图片与其绑定每个anchor元素还不如直接使用#gridcontainer元素
$（#gridcontainer）on（click a function（event） {
callLightbox（eventtarget）
}）
在这段代码中this和eventtarget都表示anchor元素同样你也可以在任何父元素上使用只要保证所定义的元素是事件目标就行（events target）
避免三元冗余
在JavaScript和PHP中过度使用三元语句是很常见的事情
// javascript
return footoString（） !== ? true : false;
// php
return （something（）） ? true : false;
条件判断的返回值永远只有false和true言外之意就是你无需把true和false显示添加到三元运算中相反你只需简单的返回条件
// javascript
return footoString（） !== ;
// php
return something（）
