1. 最后一个逗号
如这段代码，注意最后一个逗号，按语言学角度来说应该是不错的（python的类似数据类型辞典dictionary就允许如此）。IE会报语法错误，但语义不详，你只能用人眼从几千行代码中扫描。
Js代码
<script>
var theObj = {
city : "ShenZhen",
state : "ok",
}
</script>
<script>var theObj = { city : "ShenZhen", state : "ok", } </script>
2. this的引用会改变
如这段代码：
Js代码
<input type="button" value="Gotcha!" id="MyButton" >
<script>
var MyObject = function () {
this.alertMessage = "Javascript rules"
this.ClickHandler = function() {
alert(this.alertMessage ) //行1
}
}()
document.getElementById("theText").onclick = MyObject.ClickHandler
</script>
<input type="button" value="Gotcha!" id="MyButton" ><script>var MyObject = function () { this.alertMessage = "Javascript rules"this.ClickHandler = function() { alert(this.alertMessage )//行1 } }()document.getElementById("theText").onclick = MyObject.ClickHandler</script>
并不如你所愿，答案并不是”JavaScript rules”。在执行MyObject.ClickHandler时，在行1中，this的引用实际上指向的是document.getElementById("theText")的引用。可以这么解决：
Js代码
<input type="button" value="Gotcha!" id="theText" >
<script>
var MyObject = function () {
var self = this
this.alertMessage = “Javascript rules”
this.OnClick = function() {
alert(self.value)
}
}()
document.getElementById(”theText”).onclick = MyObject.OnClick
</script>
<input type="button" value="Gotcha!" id="theText" ><script>var MyObject = function () { var self = thisthis.alertMessage = “Javascript rules”this.OnClick = function() { alert(self.value)} }()document.getElementById(”theText”).onclick = MyObject.OnClick </script>
实质上，这就是JavaScript作用域的问题。如果你看过，你会发现解决方案不止一种。
3. 标识盗贼
在JavaScript中不要使用跟HTML的id一样的变量名。如下代码：
Js代码
<input type="button" id="TheButton">
<script>
var TheButton = document.getElementById("TheButton")
</script>
<input type="button" id="TheButton"><script>var TheButton = document.getElementById("TheButton")</script>
IE会报对象未定义的错误。我只能说：IE 真烂.
4. 字符串只替换第一个匹配
如下代码：
Js代码
<script>
var fileName = "This is a title"
fileName=fileName.replace(" ","_")
</script>
<script>var fileName = "This is a title"fileName=fileName.replace(" ","_")</script>
而实际上，fileName结果是"This_is a title". 在JavaScript中，String.replace的第一个参数应该是正则表达式。所以，正确的做法是这样：
Js代码
var fileName = "This is a title".replace(/ /g,"_")
var fileName = "This is a title".replace(/ /g,"_")
5. mouseout意味着mousein
事实上，这是由于事件冒泡导致的。IE中有mouseenter和mouseleave，但不是标准的。作者在此建议大家使用js库来解决问题。
6. parseInt是基于进制体系的
这个是常识，可是很多人给忽略了parseInt还有第二个参数，用以指明进制。比如，parseInt("09")，如果你认为答案是9，那就错了。因为，在此，字符串以0开头，parseInt以八进制来处理它，在八进制中，09是非法，返回false，布尔值false转化成数值就是0. 因此，正确的做法是
Js代码
parseInt("09", 10).
parseInt("09", 10).
7. for...in...会遍历所有的东西
有一段这样的代码：
Js代码
var arr = [5,10,15]
var total = 1
for ( var x in arr) {
total = total * arr[x]
}
var arr = [5,10,15] var total = 1for ( var x in arr) { total = total * arr[x]}
运行得好好的，不是吗？但是有一天它不干了，给我返回的值变成了NaN, 晕。我只不过引入了一个库而已啊。原来是这个库改写了Array的prototype，这样，我们的arr平白无过多出了一个属性（方法），而for...in...会把它给遍历出来。
其实,就算没有引进库.它的结果也并不是数组所有元素的乘积,因为for...in...会遍历到数组的length属性.
所以这样做才是比较安全的：
Js代码
for ( var x = 0x <arr.lengthx++) {
total = total * arr[x]
}
for ( var x = 0x <arr.lengthx++) { total = total * arr[x]}
其实，这也是污染基本类的prototype会带来危害的一个例证。
8. 事件处理器的陷阱
这其实只会存在使用作为对象属性的事件处理器才会存在的问题。比如window.onclick = MyOnClickMethod这样的代码，这会复写掉之前的window.onclick事件，还可能导致IE的内容泄露（sucks again）。在IE还没有支持DOM 2的事件注册之前，作者建议使用库来解决问题，比如使用YUI:
YAHOO.util.Event.addListener(window, "click", MyOnClickMethod)
这应该也属于常识问题，但新手可能容易犯错。
9. focus() 出错
新建一个input文本元素，然后把焦点挪到它上面，按理说，这样的代码应该很自然：
Js代码
var newInput = document.createElement("input")
document.body.appendChild(newInput)
newInput.focus()
newInput.select()
var newInput = document.createElement("input")document.body.appendChild(newInput)newInput.focus()newInput.select()
但是IE会报错。这是因为当你执行fouce()的时候，元素尚未可用。因此，我们可以延迟执行：
Js代码
var newInput = document.createElement("input")
newInput.id = "TheNewInput"
document.body.appendChild(newInput)
//在0.01秒之后调用匿名函数获取焦点
setTimeout(function(){
document.getElementById('TheNewInput').focus()
document.getElementById('TheNewInput').select()}, 10)
var newInput = document.createElement("input")newInput.id = "TheNewInput"document.body.appendChild(newInput)//在0.01秒之后调用匿名函数获取焦点 setTimeout(function(){ document.getElementById('TheNewInput').focus()document.getElementById('TheNewInput').select()}, 10)
更详细的资料参见:http://realazy.org/blog/category/javascript-dom/
10.document.write()完全替换之前页面内容
有这样一段代码:
Js代码
<h3>开始</h3>
<script type="text/jscript">
function init() {
document.write("现在时间是:" + Date() )
}
window.onload = init
</script>
<h3>结束</h3>
<h3>开始</h3><script type="text/jscript">function init() { document.write("现在时间是:" + Date() )} window.onload = init</script><h3>结束</h3>
上面代码块中的"开始"和"结束"两块不会输出.
当onload事件结束之后,如果再一次调用document.write()方法写进一段HTML,这段HTML会完全替换掉之前页面的内容.整个页面的源代码就变为了document.write()所写的内容.把上面的改为:
Js代码
<h3>开始</h3>
<script type="text/jscript">
function init() {
document.write("现在时间是:" + new Date() )
}
init()
</script>
<h3>结束</h3>
<h3>开始</h3><script type="text/jscript">function init() { document.write("现在时间是:" + new Date() )} init() </script><h3>结束</h3>
"开始"和"结束"就会正常输出.
11.注意你name的值.
有这样一段代码:
Js代码
<form name="myForm" action="aa.htm">
<input type="text" name="action" />
</form>
<script>
//获取form的id
alert(document.forms[0].action)
</script>
<form name="myForm" action="aa.htm"><input type="text" name="action" /></form><script>//获取form的id alert(document.forms[0].action)</script>
可输出结果不是我们想要的"aa.htm",而是一个"[object]"字符串.因为它得到的是myForm中的name为"action"的input标签的值.更详细的内容请参考[url]https://bugzilla.mozilla.org/show_bug.cgi?id=322488
[/url]
12.后台数据传输不会影响到前台
也许你会说这是一非常低级的错误.但我还是想说下:
页面login.htm代码
Js代码
...
xmlHttp.open("GET","check.htm",false)
xmlHttp.send()
alert(xmlHttp.responseText)
...
... xmlHttp.open("GET","check.htm",false)xmlHttp.send()alert(xmlHttp.responseText)...
页面check.htm代码
Js代码
...
window.onload=checkLogin
function checkLogin(){
...
//如果验证失败,弹出错误
alert("登录失败")
...
}
...
... window.onload=checkLoginfunction checkLogin(){ ... //如果验证失败,弹出错误 alert("登录失败")... } ...
很多人习惯用这种方法来进行登录失败的提示.但是要注意:xmlHttp发送数据的时候是进行的后台发送,它所关心的,仅仅是send之后,得到所请求URL的响应.而check.htm页面所执行的一切,都是只在后台完成.不管它怎么跳转,或者alert(),或者close().都不会在界面中有任何显示.
-----------------------------------------------------------------------------------------
在实践中，JavaScript的陷阱还有很多很多，大多是由于解析器的实现不到位而引起。这些东西一般都不会在教科书中出现，只能靠开发者之间的经验分享。希望大家有更好的分享。
部分内容引用自:http://www.haoxiai.net/wangzhanzhizuo/JavaScript/48650.html
文章出处：DIY部落(http://www.diybl.com/course/1_web/javascript/jsjs/2008624/127762.html)
本人在开发工作中就曾与不按规范来开发的同事合作过，与他合作就不能用"愉快"来形容了。现在本人撰写此文的目的除了与大家分享一点点经验外，更多的是希望对未来的合作伙伴能够起到一定的借鉴作用。当然，如果我说的有不科学的地方还希望各路前辈多多指教。下面分条目列出各种规范要求，这些要求都是针对同事编码毛病提出来的，好些行业约定的其它规范可能不会再提及。1. 保证代码压缩后不出错对于大型的JavaScript项目，一般会在产品发布时对项目包含的所有JavaScript文件进行压缩处理，比如可以利用Google Closure Compiler Service对代码进行压缩，新版jQuery已改用这一工具对代码进行压缩，这一般会去掉开发时写的注释，除去所有空格和换行，甚至可以把原来较长的变量名替换成短且无意义的变量名，这样做的目的是加快文件的下载速度，同时也减小网站访问带来的额外数据流量，另外在代码保护上也起到了一点点作用，至少压缩后的代码即使被还原还是没那么容易一下读懂的。要想代码能正确通过压缩，一般要求语句都要以分号正常结束，大括号也要严格结束等，具体还要看压缩工具的要求。所以如果一开始没有按标准来做，等压缩出错后再回去找错误那是浪费时间。2. 保证代码能通过特定IDE的自动格式化功能一般较为完善的开发工具（比如Aptana Studio）都有代码"自动格式"化功能，这一功能帮助实现统一换行、缩进、空格等代码编排，你可以设置自己喜欢的格式标准，比如左大括号{是否另起一行。达到这个要求的目的在于方便你的开发团队成员拿你代码的一个副本用IDE自动格式化成他喜欢或熟悉的风格进行阅读。你同事需要阅读你的代码，可能是因为你写的是通用方法，他在其它模块开发过程中也要使用到，阅读你的代码能最深入了解方法调用和实现的细节，这是简单API文档不能达到的效果。3. 使用标准的文档注释这一要求算是最基本的，这有利于在方法调用处看到方法的具体传参提示，也可以利用配套文档工具生成html或其它格式的开发文档供其他团队成员阅读，你可以尝试使用jsdoc-toolkit。如果你自动生成的API是出自一个开放平台，就像facebook.com应用，那么你的文档是给天下所有开发者看的。另外编写完整注释，也更方便团队成员阅读你的代码，通过你的参数描述，团队成员可以很容易知道你编写的方法传参与实现细节。当然也方便日后代码维护，这样即使再大的项目，过了很长时间后，回去改点东西也就不至于自己都忘记了当时自己写的代码是怎么一回事了。4. 使用规范有意义的变量名使用规范有意义的变量名可以提高代码的可读性，作为大项目开发成员，自己写的代码不仅仅要让别人容易看懂。开发大项目，其实每个人写的代码量可能都比较大，规范命名，日后自己看回自己的代码也显的清晰易懂，比如日后系统升级或新增功能，修改起代码来也轻松多了。如果到头发现自己当初写的代码现在看不太懂了，那还真是天大的笑话了。当然，使用有意义的变量名也尽量使用标准的命名，比如像这里：var me = this也许没有var self = this好，因为self是Python中的关键字，在Python中self就是通常语言this的用法。再看下面一个例子，加s显然比没有加来的科学些，这样可以知道这个变量名存的是复数，可能是数组等： var li = document.getElementsByTagName('li') var lis = document.getElementsByTagName('li') 5. 不使用生偏语法JavaScript作为一门动态脚本语言，灵活性既是优点也是缺点，众所周知，动态语言不同层次开发人员对实现同样一个功能写出来的代码在规范或语法上会存在较大的差别。不管怎么样，规范编码少搞怪，不把简单问题复杂化，不违反代码易读性原则才是大家应该做的。比如这语句：typeof(b) == 'string' &&alert(b)应该改为：if (typeof(b) == 'string') alert(b)，像前面那种用法，利用了&&运算符解析机制：如果检测到&&前语句返回false就不再检测后面语句，在代码优化方面也有提到把最可能出现的情况首先判断，像这种写法如果条件少还好，如果条件较多而且语句也长，那代码可读性就相当差。又比如：+function(a){var p = a}( 'a')应该改为：(function(a){var p = a})( 'a')，其实function前面的+号与包含function的()括号作用是一样的，都是起运算优先作用，后者是常见且容易看明白的防止变量污染的做法，比如好些流行JavaScript框架就是采用后面这种方式。再说个降低代码可读性的例子，如：function getPostionTxt(type){return type == 2 ? "野外" : (type == 3 ? "商城" : (type == 4 ? "副本" : null))}应该改成：function getPostionTxt(type){var typeData={"2":"野外","3":"商城","4":"副本"}if (typeData[type]) return typeData[type]else return null}。如果type是从0开始不间断的整数，那么直接使用数组还更简单，这种结果看起来就清晰多了，看到前面那种多层三元表达式嵌套头不晕吗。6. 不在语句非赋值地方出生中文语句中不应该出现中文我想一般人都知道，虽然这样做不影响程序运行，但是显然有背行业标准要求，当然我们也不是在使用"易语言"做开发。关于这一个问题，我本来不想把它拿出来说的，但我确实遇到有人这样做的，也不知道是不是因为他的英语实在太烂了，至少还可以用拼音吧，另外寻求翻译工具帮忙也不错的选择。我举例如下，像以下写法出现在教学中倒还可以理解：this.user['名字'] = '张三' 或者 this.user.名字 = '张三'7. 明确定义函数固定数量的参数固定数量参数的函数内部不使用arguments去获取参数，因为这样，你定义的方法如果包含较多的脚本，就不能一眼看到这个方法接受些什么参数以及参数的个数是多少。比如像下面： var $ = function(){return document.getElementById(arguments[0])}应该改成：var $ = function(elemID){return document.getElementById(elemID)} 8. 不必热衷动态事件绑定虽然知道事件可以动态绑定，比如使用addEventListener或者使用jQuery的bind方法，也知道采用动态事件绑定可以让XHTML更干净，但是一般情况下我还是建议直接把事件写在DOM节点上，我认为这样可以使代码变得更容易维护，因为这样做，我们在查看源代码的时候就可以容易地知道什么Element绑定了什么方法，简单说这样更容易知道一个按钮或链接点击时调了什么方法脚本。9. 降低代码与XHTML的耦合性不要过于依赖DOM的一些内容特征来调用不同的脚本代码，而应该定义不同功能的方法，然后在DOM上调用，这样不管DOM是按钮还是链接，方法的调用都是一样的，比如像下面的实现显然会存在问题： function myBtnClick(obj) { if (/确定/.test(obj.innerHTML)) alert('OK')else if (/取消/.test(obj.innerHTML)) alert('Cancel')else alert('Other')} <a herf="javascript:" onclick="myBtnClick(this)">确定</a><a herf="javascript:" onclick="myBtnClick(this)">取消</a>上面例子其实在一个函数内处理了两件事情，应该分成两个函数，像上面的写法，如果把链接换成按钮，比如改成这样：<input type="button" onclick="myBtnClick(this)" value="确定" />，那么myBtnClick函数内部的obj.innerHTML就出问题了，因为此时应该obj.value才对，另外如果把按钮名称由中文改为英文也会出问题，所以这种做法问题太多了。10. 一个函数应该返回统一的数据类型因为JavaScrip是弱类型的，在编写函数的时候有些人对于返回类型的处理显得比较随便，我觉得应该像强类型语言那样返回，看看下面的两个例子： function getUserName(userID) { if (data[userID]) return data[userID]else return false} 应该改为： function getUserName(userID) { if (data[userID]) return data[userID]else return ""} 这个方法如果在C#中定义，我们知道它准备返回的数据类型应该是字符串，所以如果没有找到这个数据我们就应该返回空的字符串，而不是返回布尔值或其它不合适的类型。这并没有影响到函数将来的调用，因为返回的空字符串在逻辑判断上可被认作"非"，即与false一样，除非我们使用全等于"==="或typeof进行判断。11. 规范定义JSON对象，补全双引号使用标准肯定是有好处的，那么为什么还是有人不使用标准呢？我想这可能是懒或习惯问题。也许还会有人跟我说，少写引号可以减轻文件体积，我认为这有道理但不是重点。对于服务器返回的JSON数据，使用标准结构可以利用Firefox浏览器的JSONView插件方便查看（像查看XML那样树形显示），另外你如果使用jQuery做开发，最新版本jQuery1.4+是对JSON格式有更高要求的，具体的可以自己查阅jQuery更新文档。比如：{name:"Tom"}或{'name':'Tom'}都应该改成{"name":"Tom"}。12. 不在文件中留下未来确定不再使用的代码片段当代码调整或重构后，之前编写的不再使用的代码应该及时删除，如果认为这些代码还有一定利用价值可以把它们剪切到临时文件中。留在项目中不仅增加了文件体积，这对团队其它成员甚至自己都起到一定干扰作用，怕将来自己看回代码都搞不懂这方法是干什么的，是否有使用过。当然可以用文档注释标签@deprecated把这个方法标识为不推荐的。13. 不重复定义其他团队成员已经实现的方法对于大型项目，一般会有部分开发成员实现一些通用方法，而另外一些开发成员则要去熟悉这些通用方法，然后在自己编写模块遇到有调用的需要就直接调用，而不是像有些开发者喜欢"单干"，根本不会阅读这些通用方法文档，在自己代码中又写了一遍实现，这不仅产生多余的代码量，当然也是会影响团队开发效率的，这是没有团队合作精神的表现，是重复造轮子的悲剧。比如在通用类文件Common.js有定义function $(elemID){return document.getElementById(elemID)}那么就不应该在Mail.js中再次出现这一功能函数的重复定义，对于一些复杂的方法更应该如此。14. 调用合适的方法当有几个方法都可以实现同类功能的时候，我们还是要根据场景选择使用最合适的方法。下面拿jQuery框架的两个AJAX方法来说明。如果确定服务器返回的数据是JSON应该直接使用$.getJSON，而不是使用$.get得到数据再用eval函数转成JSON对象。如果因为本次请求要传输大量的数据而不得以使用$.post也应该采用指定返回数据类型（设置dataType参数）的做法。如果使用$.getJSON，在代码中我们一眼能看出本次请求服务器返回的是JSON。温馨提示：jQuery1.4后，如果服务器有设置数据输出的ContentType，比如ASP.NET C#设置 Response.ContentType = "application/json"，那么$.get将与$.getJSON的使用没有什么区别。15. 使用合适的控件存储合适的数据曾发现有人利用DIV来保存JSON数据，以待页面下载后将来使用，像这样：<div id="json">{ "name":"Tom"}</div>，显然这个DIV不是用来界面显示的，如果非要这样做，达到使用HTML文件进行数据缓存的作用，至少改成用隐藏域来存这数据更合理，比如改成：<input type="hidden" value=" { "name":"Tom"}" />。其实也可以利用window对象来保存一些数据，像上面的例子，我们可以在AJAX请求页直接包含这样的脚本块：<script>window.userData = { "name":"Tom"}</script>，当在AJAX请求回调函数中执行完$( "#MyDiv ").html(data)后，在window上就马上有了这一变量。如果采用第一种方法，将不可避免eval(document.getElementById("UserData").innerHTML)。如果在window对象存放大量数据的话，这些数据不用时要及时手动清理它们，它们是要等浏览器刷新或重启后才会消失的，这就会增加内存开销。16. 永远不要忽略代码优化工作代码最优化是每个程序员应该努力达到的目标，也应该成为程序员永远的追求。写代码的时候，不应该急着把功能实现出来，要想一下如何写代码，代码的执行效率才是较好的。举个例子：假设有定义getElementById的快捷方法functoin $(elemID){return document.getElementById(elemID)}，那么有人可能会写出这样的代码$("MyDiv").parentNode.removeChild($("MyDiv"))，其实这里执行了两次getElementById DOM查找，如果改成这样将更好：var myDiv = $("MyDiv")myDiv.parentNode.removeChild(myDiv)。还好getElementById的DOM查找算比较快，如果换成getElementsByTagName则更应该注重优化了。jQuery开发团队也有提醒大家要注意这方面的问题。当然，代码优化技巧也是需要个人不断积累的。曾有朋友跟我说他写网站后台代码从来不用考虑优化的，因为他们网站用的是至强四核服务器，我觉得这是很可笑的。17. 会分析策划文档，能用面向对象方法进行接口定义和代码组织这一能力对于每一个程序员来说都是非常重要的，这也是决定一个程序员水平高低的一个重要因素。能够把需求细化并抽象出不同的类，然后有条理地编写代码，使代码结构清晰，可读性高，代码易于维护，不至于太过程化而且杂乱无章，这样才算是一个优秀的程序员。React自诞生以来，一直以其渲染速度快著称，特别与AngularJS和EmberJS等相比更是如此。但也有人不同意这个观点，以色列软件开发公司500Tech的CEO Boris Dinkevich近日发表博文称，其实React并不真正比AngularJS快。
