问题杀手初级修炼

为什么雨人能够记住阅读过的每个日期发生的事情？为什么世界扑克牌记忆记录的保持者直到30岁才发现自己的天赋？为什么有人心算能力或者空间能力那么强？

每个人的大脑都受到先天因素或后天因素的影响而展现出不同的能力，这种能力的认知可能来自于个人感受或者外界评价，这种能力是可以训练和培养的。

中科院神经科学研究所神经生物学家蒲慕明在《脑科学如何助力AI》主题演讲里分享，围棋国手的大脑经过长期的对围棋谋略的训练和我们非围棋选手的大脑活跃区域有着很大的差别。这一主题演讲启发了我，结合日常的开发体验，我想分享一下这个主题《问题杀手初级修炼》。

开发中我们难免会遇到各式各样的问题。为什么有的人解决问题的速度要更快，为什么有的人会遇到各种看似奇怪的问题，这个看似很泛的话题，追究原因，我认为是解决问题技巧和熟练度，以及发展成的系统的方法和思路。

我们努力做一个更好的开发工程师，却少有时间总结技术以外的东西。这篇文章用来交流解决问题的思路，希望可以和读者共同思考成长。

心法一：避免先入为主，用直觉排除答案

我们每时每刻都在做判断，依据是我们的经验和思维方式。

在webpack的使用中，chunk会让你想到什么呢？

Alt text

搜索引擎展示给我们最常用的功能。重复依赖，commons，对于使用层面的开发者，容易想到chunk的本意是块吗。当我在面临一个优化需求拆分一个大的CSS文件时，尝试了许多方法，CommonsChunkPlugin最早就被排除了，原因是commons，捂脸。直到其他人提醒我说映象中有chunks: []这样的数组用法，才终于拜托对chunk的联想，解决了问题。

尝试不要先入为主，把不确定的事情作为依据，这样容易使我们的判断偏离正确的方向。

心法二：避免思路分散，逻辑混乱

本来想揪出一个线头，却拆了一件毛衣。随机填写的选择题可能还不如都选C。面对一个复杂的情况，怎么保持清晰的思路和有条理的逻辑呢？

这里举一个例子。

背景：在包含全选逻辑的购物车页面，我发现

点了全选按钮，单个checkbox并没有改变
选中全部商品，全选按钮并没有选中
是处理过程中发生了数值的深拷贝？是compute过程依赖计算有问题？还是人性的扭曲？
Alt text
项目急着上线呢，要不要使用一些hack的方式呢，比如.click()人工点击,Objeck.assign强制刷新？经过一番折腾，终于~陷入了互相触发的死循环。要不在hack下加个是否需要更新的flag?

终于有一天，有空坐下来盲目分析一下了。
这个问题首先是要发现：

点了全选按钮，单个checkbox并没有改变，而商品的data符合预期
选中全部商品，全选按钮并没有选中，而全选按钮的data符合预期
Alt text
诶呦，数据没问题，逻辑杠杠的，所以问题在于数据与表现不一致？

进一步调试代码

Alt text

Alt text
诶呦“基因突变”，还有这种操作？

最终定位了问题：原因是vue 里的checkbox对象依赖input的时间驱动，对于传入的value不感冒。啊嚏。

Alt text

Alt text
找到问题啦~怎么解决呢？hack或者开发自定义插件吧。

hack的原理是手动点击或者触发商品重新渲染，这样做的缺陷在于，要写充分的逻辑避免循环触发

Alt text

Alt text

至于开发自定义插件，怎么拓展一个支持响应数据变化的“checkbox”呢？这里胡乱买个伏笔，因为自定义插件的栗子下面还会提到。

尝试把各种可能性列出来，把有依赖关系的可能性用图表表示，这样容易使我们保持思路清晰，有逻辑的解决问题。

心法三：抽象问题，缩小排查范围

这点好理解直接上栗子~

背景是项目中使用 vue-resourse

Alt text
哎呀，这个vue-resourse怎么回事呢，第一个参数有时候要传递params,有时候要传递{params}

翻POST的api文档，翻参数列表，翻拦截器文档，无解。

直到在网上找到“POST传params怎么不好使啊”的众多无关文档中，发现原来是node中的this.$http规定的。

Alt text

相信我们大家都有体会，日常开发中的问题，找到问题就解决了一半的问题，能把他描述出来就离解决不远啦。

心法四：通过demo实践，通过交流启发

诶呦购物车问题中提出了怎么拓展一个支持响应数据变化的“checkbox”呢？

辛辛苦苦一顿上手，终于从简单看到了原理

Alt text
出来吧，皮卡丘~皮，卡，丘。

一下午的盲目分析，我是谁，来自哪儿？

问问男神

Alt text
deadline逼近，问问fe朋友

Alt text

嗯，问别人是个好的方法，对于我个人，总是能重振旗鼓，思维也清新脱俗起来。这里特别感谢下一路上给我帮助的朋友们。

心法五：控制变量法

这个方法在各个领域百试不爽。

举个栗子watch能监听到那些数据类型的变更呢？

控制变量的做法就是改变数据类型，测试watch有没有监听到。

一切都很美好，直到发现文档里有写，卒。

Alt text

皮卡丘问题中，开发一个插件并用到项目中是正常的逻辑。但也因为步子有点大花费了大量时间来排查，所以在做试探性的事情的时候，不妨由易到难，循序渐进~

心法六：用好搜索引擎，google or 百度， 怎么用英文去描述问题

怎么说呢，有中国特色的使用百度，中文社区完善的都可以，尖酸刻薄的问题翻译成英语单词用google

上面的例子中皮卡丘没有出现的问题

Alt text
虽然这个问题下面没有什么有效的回答，但他让我觉得不！孤！单！

心法七：分类总结

总结过vue通信，总结过JS下载，总结过富文本换行。

这里只放下对网上资料有所补充的富文本换行demo啦https://blog.csdn.net/wangning_elsa/article/details/80140680。

想要更好更有效率的解决问题，就开始有意识的注意自己的心法，训练自己的大脑，早日修炼为问题杀手吧。

由于个人开发经验有限，有些想法可能比较片面浅薄。欢迎多交流指正互动。