如何阅读框架源代码

为了解决一些特定问题，我们常常需要去阅读一些框架的源代码（例如为了写一个自定义的webpack插件，我们需要阅读webpack的源代码），或者有时候我们只是单纯的想学习一下优秀框架的设计方法（想必很多前端的同学们都去读过jquery的源码）。好的技巧能让我们的阅读工作更加顺畅，甚至事半功倍

了解框架的设计思想

这一步尤为关键，我们看不懂源码（或者看起来举步维艰），并不是因为不懂某一句语法，而是不明白作者的思路。举一个简单的例子：

    //这个方法可以获得point2顶角的弧度值
    function getAngle(point1, point2, point3) {
        var bb = (point2.y - point1.y)*(point2.y - point1.y) + (point2.x - point1.x)*(point2.x - point1.x);
        var aa = (point3.y - point1.y)*(point3.y - point1.y) + (point3.x - point1.x)*(point3.x - point1.x);
        var cc = (point3.y - point2.y)*(point3.y - point2.y) + (point3.x - point2.x)*(point3.x - point2.x);
        var cosa = (bb + cc - aa)/(2*Math.sqrt(bb)*Math.sqrt(cc));
        return Math.acos(cosa);
    }

getAngle方法接收三个坐标参数，可以计算出point2顶角的弧度值，如果不告诉你这使用了运用三角形的余弦定理，恐怕你看半天也看不出来这是怎么算出来的

那么我们可以通过什么渠道去了解框架的设计思想：

• 到框架的官网看文档，开源的框架，甭管详不详细，这肯定是第一手权威资料
• 到网上搜别人的分析总结，大多数情况下，都会有大神已经研究过了，站在巨人的肩膀上，能省不少事

另外，设计思想是整个框架层面的，对于每一个实现细节，又会使用不少设计模式，例如单例模式、代理模式、工厂模式等等，这就需要平时的积累了。有一定代码量的积累之后，建议阅读一些设计模式类的书籍，对自己的代码设计，以及阅读别人的源码，都很有益处。

先摸清主脉络

了解了代码的设计思想的另外一个作用就是，我们可以先摸清框架代码的主脉络，暂时忽略一些细节。例如webpack使用了Tapable的插件架构，我们只需要知道Tapable的使用方式，而不需要去搞清楚Tapable是怎么实现的。也就是说，有些模块，我们一开始只需要知道它是干什么的，把它当做一个黑盒子，有必要的时候再去阅读。

具体的做法：

• 找到框架入口，循着入口去读
• 遇到分支，判断可否略过？
  +是否关键？否：略过
  +是否复杂？是：略过，回头再来收拾它
  +是否功能明确？是：略过，必要的时候再来阅读

有的放矢

了解了框架的设计思想，如果你还带着一个确定的目标去阅读，也能提高阅读的效率。例如，为了去实现一个处理多个html模板的webpack插件（插件），我找了一个类似的框架，然后对插件涉及到的部分，具体的到webpack源码中去重点阅读。

搭建调试环境，打印调试信息

在阅读的过程中，我们常常会遇到部分代码让人摸不着头脑、百思不得其解的情况，老是卡在这种问题上，容易让人心生退却。此时最好的办法就是，将调试环境搭建起来，试着去修改某一行代码，或者增加几行打印信息，灵感自来。

总结

技巧的使用也是要建立在过硬的基础上的，这唯有平时多写多读了~~

欢迎关注，共同学习，有问题请评论或发简信，如果你觉得文章对你有所帮助，请不要吝惜你的喜欢，当然，给我打赏我也不会客气的~~

更多精彩，邀您关注：