菜鸟必看:这些年我们爱犯的弱智错误

开发 前端
这篇文章肯定无法帮助你应付面试(面试一般不会考你“弱智错误”的),也肯定不会让你的技术水平得到深入的提高(弱智错误一般和你使用的技术深浅无关),但应该能让你在调试代码的过程中提高效率(更多是一种习惯 或者说还是“细节决定成败”),如果能对这些弱智错误牢记心间的话,当你遇到那些怎么改都改不对的时候,就要想想“是不是我犯了弱智错误??”,所以本篇文章主要献给菜鸟们,对于老手来说,欢迎多多提供自己的经验教训,让菜鸟们能够更快的成长起来。

做了开源以后,最大的感触就是:沟通增加了,信息来源增加了。提问的朋友很多,各种问题都会有,有时候在解答时也是很郁闷,这两天感觉适当总结一下自己以及周围朋友在制作 js 时爱犯的弱智错误,还是很有必要的。这些弱智错误经常会让我们抓狂——这么简单的东西怎么就是总出错呢?反复检查好几遍就是找不到错误,一旦你恍然大悟时,必然会惊呼:啊!太弱智了。。。。

这篇文章肯定无法帮助你应付面试(面试一般不会考你“弱智错误”的),也肯定不会让你的技术水平得到深入的提高(弱智错误一般和你使用的技术深浅无关),但应该能让你在调试代码的过程中提高效率(更多是一种习惯 或者说还是“细节决定成败”),如果能对这些弱智错误牢记心间的话,当你遇到那些怎么改都改不对的时候,就要想想“是不是我犯了弱智错误??”,所以本篇文章主要献给菜鸟们,对于老手来说,欢迎多多提供自己的经验教训,让菜鸟们能够更快的成长起来。

闲言少叙,直接看正文:

No.1 大小写不一致

把这个弱智错误名列榜首,可是当之无愧,从菜鸟到高手,能有几人逃得过?

错误描述:一会儿用 id、pid;一会儿又是 Id、pId。当然要乱套了。

避免办法:养成良好的命名习惯很重要。看着文档做功课时要仔细。

No.2 输入错误

其实这个错误和大小写不一致类似。

错误描述:输入变量时左右手指出现了节奏时差,变量名中某两个字母站错了位置,本来应该输入 function 结果一不小心输入了 fucntion,如果不仔细看怎么看怎么对。另外多个字母少个字母的情况也时有发生。

避免办法:敲代码时要尽量集中精神,避免三心二意。检查错误时可以把正常的代码和错误部分的代码粘贴到一起,对比查看,往往很容易能够发现这种错误。(推荐多玩玩儿“找不同”,也会不同程度的提升纠错能力)

  1. <span style="font-size: x-small;">//两行放在一起对比,是不是一眼就能看出来错误的地方呢?  
  2. var children = function() { var _this = this; var iCounter = 0;  iCounter++;}  
  3. var children = funtcion() { var _this = this; var iCounter = 0;  icounter++;}</span> 

No.3 多余的逗号

相信10个人中至少有8个人犯过这种错误。

错误描述:主要是对于 JSON 对象中,最后一个对象后面仍保留一个逗号。这种情况下对于 firefox、chrome 等浏览器来说运行起来一切正常,可是放到 ie 上就报错,再加上 ie 还很难调试,所以对于菜鸟来说往往很难找到源头。

举例: {"a":1, "b":2, "c":3,}

出现这种错误最常见的情况就是在 Server 端利用循环语句批量生成 JSON 数据字符串的时候。

避免办法:这个的确没有太好的办法彻底避免,只能是让你的脑子里多一根经,一旦批量制作 JSON 格式的内容时,就要小心最后面是不是会多一个逗号。

No.4 数组的长度

错误描述:关于数组的使用时,总会时不时的出现一些下标越界 或者 null 方面的错误。

举例:某个 function 中一段代码 a[0] = a[1]+1; 大部分时候正常,但偶尔会出现错误。

避免办法:产生这个错误一般来说是没有养成使用数组时要首先对 数组对象进行检查的习惯,例如首先判断 a!=null; 另外还要判断 a.length 是否满足你需要用到的 index 值。这个就是个习惯问题。

No.5 诡异的计数器

这是一个 zTree 中曾经犯下的弱智错误,但由于原先使用多棵树的用户并不多,所以很长时间都没有暴露出来。

错误描述:有一个全局变量用于计数,但有多个不同的地方都在使用这一个计数器,当其中某处忘记了其他地方还在使用这个计数器时,可能会对其进行清零重置。。OMG,这样可就糟糕了吧,别的地方因为计数器归零会容易导致某些值冲突。

避免办法:对于全局变量的使用要规范,对于改变全局变量的地方越少越好,或者封装成固定的方法,要清楚全局变量的作用,修改时一定要慎重。

No.6 难以理解的等式

写代码就少不了 if;你在使用 if 的时候是否总会出现莫名其妙的结果呢? 看看下面这段代码的结果,比较一下 a/b 的等式结果吧:

  1. <span style="font-size: x-small;">var a = 0;  
  2. var b = "0";  
  3.  
  4. if (a) {console.log(1);}              // false  
  5. if (!!a) {console.log(2);}           //  false  
  6. if (b) {console.log(3);}             //  true  
  7. if (!!b) {console.log(4);}           //  true  
  8. if (a == false) {console.log(5);}    // true  
  9. if (!!a == false) {console.log(6);} //  true  
  10. if (b == false) {console.log(7);}    //  true  
  11. if (!!b == true) {console.log(8);}  //  true</span> 

错误描述:对于 number 和 string 在 if 表达式中,如果值是 0 或 "0" 时总会让你措手不及。

避免办法:建议对于非 boolean 对象的在判定时采用 !! 进行标准的 boolean 转换,同时要记住 js 中对于 0 这个特殊情况的判定,再结合你的需求编写正确的判定表达式。

No.7 JSON 对象的理解

有的初学者对于 server 端的对象能够争取理解,但是放到 js 中时往往开始变得糊涂了。

错误描述:错误的认为只要 {}里面的内容相同,那么这两个对象就是一样的。

举例:认为 var a = {"id":1}; var b = {"id":1} 那么 a == b (正确答案: a != b)

避免办法:需要正确理解 JSON 对象的定义。 每次 {} 就相当于生成一个新的 JSON 对象。

No.8 js 文件加载顺序

你是不是出现过js 文件都加载了,可是还总报 undefined 的错误呢?

错误描述:由于先加载了使用某个对象的代码,后加载了定义该对象的代码,导致报错。

举例:

  1. <span style="font-size: x-small;">// a.js 文件  
  2. function a() {return "a";}  
  3.  
  4. // b.js 文件  
  5. alert(a());</span> 

避免办法:牢记先要定义对象,然后才能使用对象,确保 js 文件的加载顺序。

No.9 浏览器的兼容问题

前两天看到一句话,大概意思是:“作为一个 前端 程序员来说,很少有人能够如此幸运——只兼容一款浏览器”。

错误描述:在某个浏览器下调整的好好的,怎么换个浏览器就不好使了??

避免办法:如果让你完全牢记所有会出现兼容问题的代码,貌似不太现实。一般来说只能记住一些常用的,或者是利用 jQuery 等架构减轻遇到这些问题的可能性。再有就是要提高警惕,一旦出现此类情况,就要考虑一下是不是因为 js 的兼容问题造成的呢?(然后就去 google 一下,如果被墙了,那么就去百度吧!呵呵)

补充:在不少情况下,往往是 css 的兼容出现了错误,让你误以为是 js 的错误。

No.10 异步加载的疏忽(一)

对于一个菜鸟来说,对于异步加载的理解很关键,也是一个经常容易犯错误的地方。

错误描述:用 Ajax 去给某个对象赋值,紧接着 Ajax 的代码后面就执行了使用这个对象的代码。然后你就会发现明明 Ajax 返回的结果是正确的,为何还不能正常执行呢??

避免办法:对于需要确保 Ajax 执行完毕后才能执行的代码,一定要在 Ajax 的 success 和 error 这两个回调函数中进行。绝对不能紧跟在 Ajax 的代码后面立刻执行。 一定要深刻理解“异步加载”的含义,以及它最简单的工作原理。

No.11 异步加载的疏忽(二)

上面说了一定要在 Ajax 的 success 和 error 这两个回调函数中执行必要代码,success 不就可以了,为何还要在 error 中执行呢??

错误描述:对于某些在 Ajax 前设定的标识,只在 Ajax 的 success 中修改标识,会发现一旦 server 或 网络异常导致 Ajax 出错时,就会出现一些很难理解的错误现象。

举例:

  1. <span style="font-size: x-small;">//这段代码简单的实现避免同时多个 ajax 执行的代码,只有当 ajax 完成后才能重新 ajax  
  2. //一旦ajax过程出现错误后,这段代码将导致 goAjax 永远不会再进行 ajax 调用  
  3. var a = true;  
  4.  
  5. function goAjax() {  
  6.   if (a) {  
  7.     a = false;  
  8.     //这里用 jQuery 的 ajax 调用举例  
  9.     $.ajax({  
  10.        success: function(msg) {  
  11.            a = true;  
  12.        }  
  13.  
  14.     });  
  15.   }  
  16. }</span> 

避免办法:对于必要的标识,一定要在 error 中设置相应的数据恢复,避免由于 ajax 异常导致程序逻辑错误。

例如上面的代码需要增加:

  1. error: function() { a = true;} 

No.12 jQuery 搜索DOM对象是否存在的判定

这是一个刚使用 jQuery 时非常容易犯的错误。

错误描述:var a = $("#test"); if(!!a) {alert("ok!");} 运行这段代码你会发现,永远都会 alert,不管是否存在 id = "test" 的DOM

避免办法:jQuery 的 $ 方法查找对象,始终都会返回一个 jQuery 对象的,不管是否存在查找的结果。检查是否有结果请利用 length 属性,比如 if(a.length>0) {alert("ok!");}

原文:http://www.iteye.com/topic/1120928

【编辑推荐】

  1. 再谈JavaScript面向对象编程
  2. 使用jQuery和CSS3实现的超炫3D画廊特效
  3. 前端必备:jQuery 1.7.1API手册
  4. 写代码如坐禅:你是哪一类程序员?
  5. Node.js不是银弹 但它仍然是颗子弹
责任编辑:陈贻新 来源: iteye
相关推荐

2012-03-14 15:34:14

PaaS

2015-02-13 15:00:48

腾讯15年

2015-04-20 10:03:59

云计算业务部署

2019-09-20 16:44:19

人工智能AI

2013-07-26 15:29:56

项目管理

2014-08-06 14:13:30

Windows Pho

2017-11-02 15:42:32

开发错误代码

2022-08-23 12:21:50

Linux命令

2021-09-12 22:22:15

前端

2012-10-30 17:40:00

产品Minefold开发

2022-05-07 23:54:59

windows操作系统应用软件

2022-02-10 14:38:28

前端框架浏览器

2020-09-02 07:04:03

TS TypeScriptwindow

2014-11-03 10:49:43

程序员技术

2012-08-31 17:13:16

SuSE

2015-04-28 10:35:01

设计

2014-10-27 14:32:11

2019-11-11 22:37:35

Google收购失败

2015-10-09 11:24:16

苹果微软斗争

2011-10-17 13:06:00

点赞
收藏

51CTO技术栈公众号