黑匣子思维之向bug学习

一、黑匣子思维

“当我们的信仰受到挑战的时候，人的本能更倾向于纂改证据，以维护我们原本的信仰。我们会创造新的借口 ，以维护我们所认可的事实。”这个是“闭路循环”导致的“认知失调”，在很多事情上，进步取决于我们从失败中学习的意愿，如果忽视失败，掩饰错误，我们就毁掉了宝贵的学习机会。所以，我们需要有一种记录和审视失败并从中吸取经验的积极态度，让失败变得有意义，这种从错误中学习的思维称之为黑匣子思维。

作为一个工程师（程序员），我们所面对的错误最常见的就是代码bug，那么，我们如何利用黑匣子思维向bugs学习呢？最近在思考这个，写下了记录一下。

二、向bug学习四部曲

1、收集——整理、收集有价值的bug（让你费神、容易出错的bug）

2、分享——向团队分享bug（错误原因、修复方案）

3、归纳——归纳大部分问题出现的原因和解决问题的思路

4、自省——正视并接受自己犯的错误或者代码写的不好的地方，加以改正

三、分享一些之前收集的常见的容易出错的bug（你可能需要像上学时有个错题本一样建立一个收集bugs的文件）

1、小心null和undefined
let someValue = obj.attr + "";   => (obj.name ||"") + ""

2、小心0的情况
let someId = someId || 1; =>let someId = (!someId && someId !==0) ? 1 : someId;

3、小心浮点数
let result  = 0.1+ 0.2  =>let result = +(0.1+0.2).toFixed(2)

4、小心对象为空
let someAttr = obj.attr.name    =>let someAttr = obj && obj.attr && obj.attr.name

5、forEach里面用了return当成了函数的return =>函数外return
function fun(){
    arr.forEach((item)=>{
if(1){
    return;
}
    })
}

6、在数组for循环里面改变数组长度
arr.forEach((item,index)=>{
    arr.splice(index,1)
})

7、在条件判断里面定义函数
if(flag){
function fun(){
}
}

8、日期相关
1、兼容：let date = new Date("2017-07-07")  => date = date.replace(/\-/g,"/")
2、月份减1：let date = new Date(2017,6,7)

9、监听input输入框blur事件，如果输入错误，在input后面插入一个显示错误信息的dom节点;
   监听input输入框focus事件，把错误信息隐藏
====> 当光标在第一个输入框并且输入内容是错误时，把鼠标聚焦到第二个输入框；这时候依次触发第一个输入框的blur事件、插入节点显示错误、触发第二个输入框的focus事件...
正常来讲是这样的，但是有个bug会偶现，就是第二个输入框的foucs事件会偶尔触发不了；猜测原因是插入节点的时候打断了focus事件的触发（浏览器渲染机制），尝试setTimeout后执行插入节点，解决了问题。

10、switch case时忘记break
switch(flag){
case 1:
    name="aa";
case 2:
    name = "bb";
break;
}

11、boom发布的时候 一直报node-sass加载失败 =》  当初intall这些node_modules的node或者npm的版本要和当前的一致，服务器的node版本发生变化， 就需要删掉之前的模块重新install
解决办法是加一个RUN npm uninstall的命令

12、react按需加载，按照网上教程一步步写完却不生效，折腾一阵反应过来是react-router版本不一样，我本地的是最新版本，教程是早期版本。
解决办法：用最新版本按需加载的方式来做，生效了。

13、a标签的herf属性写了#    <a href="#">action</>    => <a href="javascript:;">action</>   注意javascript千万不要拼写错误了

14、iphone浏览器下数字的样式异常 =》因为iphone默认把数字当成了电话，并设置了特殊的样式，需要设置一下meta头部
<meta name="format-detection" content="telephone=no" />

四、问题记录多了，你需要归纳引发问题常见的原因，这样有助于我们快速找到问题的症结点

1、模块、依赖包、app、浏览器的版本号不一致
2、特殊的操作方式，比如先填这个再单击那个等等
3、浏览器、手机系统不同
4、ajax请求失败：接口是否正常、路径及host是否正确、端口是匹配、入参是否正确、请求头（contentType、cookie等）是否匹配
5、浏览器是否放大缩小了
6、是否是代码压缩的问题
7、网络问题（wifi、4G、局域网）
8、本地host问题
9、极限值、特殊字符、生僻字
10、文件编码（utf-8 、不带BOM的UTF-8、ANSI）
11、特定帐号或者特定产品的问题

五、当发现问题后，如何解决问题呢？结合几位有多年解决问题经验的同学反馈，有如下解决思路，可以参考下。

1、查看问题的现象——报什么错？？
2、问题出现的条件——什么浏览器、什么系统、什么产品、什么网络？？
3、问题出现的操作轨迹——如何操作、操作顺序、操作内容？？
4、根据条件和轨迹找出重现问题的步骤——必现路径？？
5、不断重复出错的步骤思考可能的原因
6、用排除法排除明显的干扰项
7、不断试错逐渐缩小问题原因的范围
8、找到问题原因后寻找解决的办法
8.1——好解决，一键修复
8.2——不好解决，但问题比较严重，影响进度或者用户体验，采用折中或者临时解决方案（不要引发其他问题），先让用户先能用，然后后续的时间用完善的方案继续解决；

8.3——难以解决，时间不紧急的话，可以休息放松下第二天再解决。
8.4——基本无法解决，在出错的条件下隐藏相关功能，或者使用替代方案

9、问题修复后自测是否影响其他模块，确保杜绝因修复引发的问题
10、写注释，标明出错原因及修复记录；
11、寻找方法预防该类错误再次发生，比如在源头解决问题等
12、查看其它地方相似模块是否有同样问题，有，修复之。
13、记录问题，完善bug库
14、分享问题，询问团队成员是否遇到同样问题，提醒修复，并告知相关解决方案。

六、我的代码到底哪里出错了？针对这个问题，这里总结了一些查错的方法。

1、看错误现象和错误提示——找关联性、关键词
2、猜测可能出问题的地方去试错——试错
3、对比当前文件和之前正常文件，查看修改了哪些点——对比
4、打印关键信息——通过日志整理思路
5、断点——一步步走下去，看哪里卡住了
6、删代码，一行行或一段段删除代码，看哪些代码删除后不报错了就找到地方了——放大招，慎用。