如何阅读前端代码
踩过的坑
在之前的笔记《D3Charts-给legend实现动画分页效果》中，已经提过了自己了解项目时踩过的一些坑：
没理解数据结构
比如Group，之前都忽略了，直接导致方案设计有误，试图控制每一个LegendItem去实现动画。
没有理清楚类的继承关系和调用流程
在代码中绕来绕去，花了很久。最后自己画了一个关系图，瞬间就清晰了好多。
调试手段低效
一开始没有采用debugger，直接在代码里面埋点，效率太低了。
而且因为JS的弱类型语言特性，很多地方无法通过ctrl+鼠标点击，跟进代码内部，这又进一步增加了理解成本。
陷入代码细节
跟代码很容易陷入细节，而忽视全局的设计思路。
就比如动画，稍一思考，肯定能想到这是view层的，应该从view相关的代码中通过渲染、事件去找到实现原理。结果我调代码时将注意力都放在了代码细节上，被代码牵着走了。
另外，如果调试了一定时间(比如半小时或者1小时)仍然没有任何头绪，得赶紧停一下，要么问下其他同事，要么换个别的思路进行尝试。
一些套路
业务需求
(如果能找到人的话)，先找之前的开发人员，详细给你讲一下业务需求以及他的程序设计思路。
这相当于路灯，如果没有这个路灯，你就很可能会瞎折腾，浪费时间。
数据、事件、视图、流程
前端四剑客，把项目中的这三块搞清楚，就能基本掌握项目原理了。
debugger
如果说上一步是对项目进行宏观上的了解，那么这一步就是微观了解了。
通过debugger走一遍，把上面的四剑客串起来，把每个部分是怎么关联起来的弄清楚。
代码调用栈可视化分析
已经有人写了，详见github。
看了这个开源组件，才知道，原来babel居然可以借助AST在每个函数的逻辑前后植入自己的逻辑，这个很棒，可以通过这个功能，做很多有意思的事情，比如性能统计、调用栈分析等等。
关于Babel的原理和插件的编写，详见这个文章。