初级前端的求生之路（遇到问题时的一些思路）

前言

---

一晃就快半年没写什么东西了，在这段时间里，我经历了妻子从孕晚期到临盆，孩子的满月，两代人的磨合…
好在，妻子是通情达理的妻子，长辈也是明辨是非的长辈，一家虽说不上其乐融融，相处也倒算得上融洽。

工作方面，托领导的福，知道我的情况后，一直没给我安排什么任务，所以也一直没什么值得让我专门抽时间坐下来记录记录的东西。

在家里情况趋于稳定的过程当中，我也开始陆陆续续接手一些项目。今天想说的事情，就是其中一个项目。

需求

---

同样的甲方，同样的套路。要做一个刮刮乐H5来发红包。但是不同于寻常的刮刮乐，要求刮出来的内容是实时请求到的结果，且不愿意用：刮完之后弹出一个弹层来展示结果这种方案。

思考

---

由于这个项目的后端是我的领导，所以在不考虑修改后台接口的情况下（假设从接口着手的话，应该会有不错的解决方案，比如分割接口，一个接口选奖品，一个接口发奖品，但这不在我的讨论范围内）现在的情况是这样的：

1. 如果要在刮之前知道用户的奖品，那么在进入当前页面的时候就应该请求了发奖品的接口，这样带来一个问题，如果用户没刮直接关闭了H5呢？
2. 如果在用户刮的过程当中请求接口，那么当高并发或者用户自身网络情况较差的时候，势必会出现：已经刮完了，但是没有显示东西。

看起来似乎是相悖的两种情况，当时让我一筹莫展，好在我加的有交流群，将问题描述了一下，群里的大佬很快给我找到了解决方案。

其实很简单，参考了蚂蚁金服：

上面加一个按钮，当点击了按钮之后，视为你刮过了，不管你是否真的去刮，奖品都已经发送给你了。相信很多人有其他的解决方案，但今天我想写的并不是如何去解决这个问题，而是：

该怎么问问题？

---

假设我在群里是这样问的：

用canvas做刮刮乐的时候怎么实时的去获得刮出来的东西?

甚至是这样问的：

刮刮乐怎么做？

那么我很可能被一群大佬直接怼回来，因为这样的问题：

• 答案太多
• 太简单
• 问法太笼统

我当时是这样问的

我在问之前思考了几个问题，我最多能做到哪一步？怎样能把问题和背景尽量描述清楚？怎样提问能让被提问者明白我实际上是想得到什么答案？

最初我也是个什么都不懂的小白，在看过张鑫旭大神的这篇文章后得到了一些启发：

纵然有很多人技术大牛都有乐于助人的品质，但就如文章所说，大牛们很可能也是在工作的碎片时间，甚至私人的休息时间，通过邮件、讨论群等等一些渠道去回答一些新手的疑问，那么这个时候，他肯定会优先回答那些有礼貌、条理清晰、带着自己思考的人发来的问题，如果你在高中数学课解一道几何大题，跑去问老师圆的面积怎么求，我想老师肯定会怼你一句：自己回去翻课本！（至少我是这样…）

1.对于太简单百度google随便能搜到的问题，请节省别人的时间，同时也节省你自己的时间，一次忘了就查第二次，两次忘了就查第三次，查的多了印象深刻你也就记住了。

2.对于有一些水平的问题，求人以鱼，不如求人以渔。自己完成了30%，别人给予你30%的指点，促使你把剩下的40%完成，这样下次再碰到类似的问题，或许你就可以自己思考到50%。循环往复，总有你可以独立解决的一天。如果你总是在0%就祈求别人帮你完成剩下的100%，那你永远也只能从0%开始。

3.对于一些复杂的问题，切忌笼统的提问。如果你直接去问尤大，vue是怎么开发的…尤大嘛，你们懂得。将问题细化，或者将背景、需求描述清楚，不要让被提问者有心帮你，却无从开口。

怎么自己去解决问题？

---

当然，这里的问题指的是项目中的bug。学会怎么提问，只是其中一种解决问题的方法。从长远来看，还是得培养自己去解决问题的能力。

相信很多同学的日常开发过程中，都遇到过之前没见过的bug，其中一大部分通过上网搜索可以直接解决，另一小部分在搜索到的内容中稍作变通也可以解决，还有极小一部分，怎么搜都找不到相关的内容，我就来分享一下对于这些问题我的经验。

1. 首先排除低级错误：诸如变量、类名拼写错误，资源引用路径错误等等。通常这种情况F12的报错可以轻松解决问题，况且，用再智能的IDE开发也会有拼写错误的时候，谁会专门把自己的一次拼写错误给记录下来？
2. 抓关键字、自己总结搜索：看到F12打印了一大串红色的Error，不要方，也不要整段copy下来去google，很可能一大段中只有一句是真正有用的信息。具体例子我一时也想不到，或许日后想到了再来补充。
3. 对于没有报错，功能却表现异常：这时候就很难受了，不过也有应对方法，寻找100%复现bug的方法，或者摸索bug的变化规律。还是文章开头提到的项目，使用canvas的globalCompositeOperationAPI做刮卡清除canvas画布内容的时候，发现鼠标触点的位置与实际canvas清除的起始位置并不在一起，后者在前者的右下方，通过反复比较发现，两者的位置关系类似于“斜投影”，而“光源”则位于两者连线的左上部分。而左上角正是HTML文档的左顶点——javascript获取点击事件的（0，0）原点。此时我恍然大悟，出现问题的原因正是因为我获取的触点位置并不是相对于canvas画布，而是相对于整个页面左上角的坐标。只要设置清除的起始位置时，横坐标减去canvas元素的offset().left值，纵坐标减去canvas元素的offset().top值即可。（实际上这个问题网上已经有了解决方法，只不过我这个时候已经习惯了遇到问题先自己先钻研，实在不行才会去别的地方去寻找答案）
4. 对于没有报错，同时bug规律也无迹可寻的情况（真的无迹可寻吗？），这个时候可能真的需要靠运气了。我之前曾写过一篇博客，有一个bug，只有在最小化或后台运行你的浏览器时才会发生，且不说在实际生产环境当中会不会有用户复现这个bug，单说这个复现条件，恐怕若不是我运气好，我也不会发现。总之，很多人都说计算机笨，你告诉它什么它才会做什么，在我看来，计算机同样也是聪明的，只要你写的代码有问题，它肯定会在同样的情况下，把bug呈现给你，差别无非是寻找这个规律的难易罢了。