`
zTreeAPI
  • 浏览: 345651 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

 
阅读更多

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


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


    闲言少叙,直接看正文:


    No.1  大小写不一致

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

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

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


    No.2  输入错误

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

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

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


 

//两行放在一起对比,是不是一眼就能看出来错误的地方呢?
var children = function() { var _this = this; var iCounter = 0;  iCounter++;}
var children = funtcion() { var _this = this; var iCounter = 0;  icounter++;}
  

 

    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 的等式结果吧:


 

var a = 0;
var b = "0";

if (a) {console.log(1);}              // false
if (!!a) {console.log(2);}           //  false
if (b) {console.log(3);}             //  true
if (!!b) {console.log(4);}           //  true
if (a == false) {console.log(5);}    // true
if (!!a == false) {console.log(6);} //  true
if (b == false) {console.log(7);}    //  true
if (!!b == true) {console.log(8);}  //  true
  

 

    错误描述:对于 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 的错误呢?

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

    举例:

 

// a.js 文件
function a() {return "a";}

// b.js 文件
alert(a());
  

 

    避免办法:牢记先要定义对象,然后才能使用对象,确保 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 出错时,就会出现一些很难理解的错误现象。

    举例:

 

//这段代码简单的实现避免同时多个 ajax 执行的代码,只有当 ajax 完成后才能重新 ajax
//一旦ajax过程出现错误后,这段代码将导致 goAjax 永远不会再进行 ajax 调用
var a = true;

function goAjax() {
  if (a) {
    a = false;
    //这里用 jQuery 的 ajax 调用举例
    $.ajax({
       success: function(msg) {
           a = true;
       }

    });
  }
}
  

 

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

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

    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!");}



    临时起草,不会很全面,以后可能也会慢慢补充进来更多弱智错误的。 

分享到:
评论
12 楼 vvv_110 2013-12-04  
var a = 0;  
var b = "0";  
 
if (b) {console.log(3);}             //  true  
if (!!b) {console.log(4);}           //  true 
if (b == false) {console.log(7);}    //  true  
if (!!b == true) {console.log(8);}  //  true 

不太明白这里的第三个if,b是一个字符串,一个字符串和一个布尔的false比较,根据第一个if应该得到非空字符串算是true,那这里b==false的结果为什么是true呢?
另外b==false 和!!b==true是不是矛盾了?两个叹号,负负得正 而他们结果却都是tue?
11 楼 vvv_110 2013-12-04  

var a = 0;  
var b = "0";  
 
if (b) {console.log(3);}             //  true  
if (!!b) {console.log(4);}           //  true 
if (b == false) {console.log(7);}    //  true  
if (!!b == true) {console.log(8);}  //  true 

不太明白这里的第三个if,b是一个字符串,一个字符串和一个布尔的false比较,根据第一个if应该得到非空字符串算是true,那这里b==false的结果为什么是true呢?
另外b==false 和!!b==true是不是矛盾了?两个叹号,负负得正 而他们结果却都是tue?
10 楼 zTreeAPI 2012-07-10  
沙舟狼客 写道
沙舟狼客 写道
zTreeAPI 写道
沙舟狼客 写道
树结构能不能缓存下来,在打开新页面时,把cookie中的结构读取出来?

不好意思,一直没有制作 客户端缓存的扩展功能。 你可以自己把已展开的节点id保存在 cookie 中,刷新页面后使用

我也是这样做的,但是有麻烦,比如把一个节点的id缓存下来,打开新页面时,该节点如果是第二级或者更深一级,ajax是没有加载的该节点的,如果加载父节点很麻烦,有什么建议吗?

应该是加载父级同级节点,而不仅仅是只有父级一个节点

你可以参考 最新的Demo,如果异步加载自动加载全部节点,修改一下,只按照你记录的 轨迹加载全部节点即可。 当然如果你总的节点数并不多,那就可以直接使用了
9 楼 沙舟狼客 2012-07-10  
沙舟狼客 写道
zTreeAPI 写道
沙舟狼客 写道
树结构能不能缓存下来,在打开新页面时,把cookie中的结构读取出来?

不好意思,一直没有制作 客户端缓存的扩展功能。 你可以自己把已展开的节点id保存在 cookie 中,刷新页面后使用

我也是这样做的,但是有麻烦,比如把一个节点的id缓存下来,打开新页面时,该节点如果是第二级或者更深一级,ajax是没有加载的该节点的,如果加载父节点很麻烦,有什么建议吗?

应该是加载父级同级节点,而不仅仅是只有父级一个节点
8 楼 沙舟狼客 2012-07-10  
zTreeAPI 写道
沙舟狼客 写道
树结构能不能缓存下来,在打开新页面时,把cookie中的结构读取出来?

不好意思,一直没有制作 客户端缓存的扩展功能。 你可以自己把已展开的节点id保存在 cookie 中,刷新页面后使用

我也是这样做的,但是有麻烦,比如把一个节点的id缓存下来,打开新页面时,该节点如果是第二级或者更深一级,ajax是没有加载的该节点的,如果加载父节点很麻烦,有什么建议吗?
7 楼 zTreeAPI 2012-07-10  
沙舟狼客 写道
树结构能不能缓存下来,在打开新页面时,把cookie中的结构读取出来?

不好意思,一直没有制作 客户端缓存的扩展功能。 你可以自己把已展开的节点id保存在 cookie 中,刷新页面后使用
6 楼 沙舟狼客 2012-07-10  
树结构能不能缓存下来,在打开新页面时,把cookie中的结构读取出来?
5 楼 mfkwfc 2012-03-13  
zTreeAPI 写道
mfkwfc 写道
刚刚用到的时候遇到一个问题。树异步加载时成功时没问题。当失败的时候的那个文件小图标会换成选择框   困为.ztree li button.ico_close  这个样式没了。这算是BUG?还是我设置问题?

补充一下,在我没有发布补丁的时候,你可以利用 onAsyncError 回调updateNode 更新即可。

我已经知道原因, treeNode.isAjaxing 属性 在 ajax 触发前设置为 true; 当异常时,先恢复图标 后设置 isAjaxing = null; 因此会导致图标显示错误了。 非常抱歉。

zTreeAPI 写道
mfkwfc 写道
刚刚用到的时候遇到一个问题。树异步加载时成功时没问题。当失败的时候的那个文件小图标会换成选择框   困为.ztree li button.ico_close  这个样式没了。这算是BUG?还是我设置问题?

补充一下,在我没有发布补丁的时候,你可以利用 onAsyncError 回调updateNode 更新即可。

我已经知道原因, treeNode.isAjaxing 属性 在 ajax 触发前设置为 true; 当异常时,先恢复图标 后设置 isAjaxing = null; 因此会导致图标显示错误了。 非常抱歉。



呵呵。没事。因为我在后台取List<String> 等于空的时候会造成这种情况。我判断了一下当等于空的直接直接new一下就好啦。感觉作者给我们这么好用的插件。。
4 楼 zTreeAPI 2012-03-09  
mfkwfc 写道
刚刚用到的时候遇到一个问题。树异步加载时成功时没问题。当失败的时候的那个文件小图标会换成选择框   困为.ztree li button.ico_close  这个样式没了。这算是BUG?还是我设置问题?

补充一下,在我没有发布补丁的时候,你可以利用 onAsyncError 回调updateNode 更新即可。

我已经知道原因, treeNode.isAjaxing 属性 在 ajax 触发前设置为 true; 当异常时,先恢复图标 后设置 isAjaxing = null; 因此会导致图标显示错误了。 非常抱歉。
3 楼 zTreeAPI 2012-03-09  
mfkwfc 写道
刚刚用到的时候遇到一个问题。树异步加载时成功时没问题。当失败的时候的那个文件小图标会换成选择框   困为.ztree li button.ico_close  这个样式没了。这算是BUG?还是我设置问题?

恭喜你! 这就是一个bug!! 我会修复它,并跟随 zTree v3.2 一起发布。 非常感谢你的细心!
2 楼 mfkwfc 2012-03-09  
刚刚用到的时候遇到一个问题。树异步加载时成功时没问题。当失败的时候的那个文件小图标会换成选择框   困为.ztree li button.ico_close  这个样式没了。这算是BUG?还是我设置问题?
1 楼 wenzhixin 2012-02-28  
   确实有时会遇到这些小问题,总结的挺全面的,学习了~

相关推荐

    ChatGPT进入百度“弱智吧”后,疯了

    标题中的“ChatGPT进入百度‘弱智吧’后,疯了”可能是指ChatGPT这一先进的人工智能对话模型在与百度“弱智吧”(可能是贴吧的一个论坛,名称可能存在戏谑或调侃成分)的用户互动时,由于其算法和设定无法完全理解或...

    ChatGPT进入百度“弱智吧”后,疯了.pdf

    "ChatGPT与弱智吧的碰撞:探索AI与人类智慧的边界" ChatGPT是一种基于人工智能的聊天机器人,它能够与人类进行自然语言交流,并具有高度的智能化和自适应能力。最近,ChatGPT进入了百度的“弱智吧”,引发了一场...

    教师如何对待弱智学生.doc

    在教育领域,教师面对的学生群体多样化,其中包括智力发展存在障碍的弱智学生。处理这类特殊学生的情况,教师需要具备特殊教育的专业知识与人文关怀。本文将深入探讨教师如何正确对待弱智学生,挖掘他们的潜能。 ...

    简单且弱智的高精度公式计算器0.2

    《简单且弱智的高精度公式计算器0.2》是一个专为用户提供高精度数学计算功能的软件工具。这款计算器在前一版本的基础上进行了优化,解决了减法和除法计算的准确性问题,使得用户在处理复杂的数学运算时能够得到更为...

    实例14---不准+弱智的生物钟

    标题“实例14---不准+弱智的生物钟”似乎是指一个编程实例,可能是关于某个程序或算法的设计,其中“不准”和“弱智的生物钟”可能是在形容该实例在时间管理或计时功能上的缺陷。由于描述部分为空,并没有提供更多的...

    猜大小弱智小游戏学习用

    猜大小弱智小游戏学习

    一款N多年前弱智计算器

    一款N多年前弱智计算器,也算是我曾经折腾计算器的结果吧. 非常弱智,请自行参考. 另: 经virscan.org检查了一下,总共50个杀读引擎,2个报有问题,其中包含X60,所以: 要不要下载和执行,自己看着办吧.

    C#抓乌龟 弱智纸牌游戏

    【C# 抓乌龟 弱智纸牌游戏】 抓乌龟,又称“弱智纸牌游戏”,是一种简单而有趣的单人纸牌游戏。在这个游戏中,玩家的目标是通过策略和运气来清除桌面的所有纸牌。在C#编程环境中实现这个游戏,可以让我们深入了解...

    弱智生成器

    通过"弱智生成器",开发者可以快速构建数据访问层,专注于业务逻辑的实现,提升开发效率,同时减少因手动编写SQL和实体类可能导致的错误。这种自动化工具对于大型项目尤其有用,可以有效地维护代码的一致性和可读性...

    用chatglm6B训练的弱智吧预训练模型

    标题中的“用chatglm6B训练的弱智吧预训练模型”指的是一个使用了ChatGLM(Chat Generative Language Model)框架,模型大小为6B参数量的预训练语言模型。这个模型是针对特定场景——“弱智吧”进行训练的,意味着它...

    弱智儿童的康复训练及效果评估.doc

    【弱智儿童康复训练概述】 弱智儿童,也被称为智力障碍儿童,是指在发育期由于各种原因导致智力显著低于同龄儿童平均水平,并伴有社会适应困难的一类群体。针对这类儿童的康复训练,旨在通过一系列科学的方法和技术...

    行业资料-交通装置-一种弱智儿童脚踏四轮车.zip

    行业资料-交通装置-一种弱智儿童脚踏四轮车.zip

    GPT-4发布后的第一道挑战,来自弱智吧

    标题中的“GPT-4发布后的第一道挑战,来自弱智吧”可能是指在GPT-4这一最新人工智能模型发布后,有人在“弱智吧”(可能是网络论坛或社区的名称)提出了一个挑战,旨在测试GPT-4的能力或者探讨其在某些方面的局限性...

    我自己用js写的一个超级弱智的网页小游戏

    最近学习了js,做事件处理和元素的动态移动的时候突发奇想自己做了一个超级简单的弱智网页游戏,拿出来让大家玩玩,如果有喜欢的人的话,我再优化一下,加入持续时间记录、游戏难度设置、路径多样这些新功能。...

    windows命令行工具,内置git.. 再也不必使用windows弱智cmd

    界面友好的windwos命令行工具,谁用谁知道, 再也不必使用自带弱智cmd

    超级弱智文件粉碎机.bat

    文件粉碎bat

    汇编程序——弱智的管道游戏

    无聊的时候想熟悉一下X86的指令集,是.ASM文件。具体的东西我也忘了,很久以前写的,没怎么仔细考虑。

Global site tag (gtag.js) - Google Analytics