如何阅读框架源代码

不管对于那个段位的 Developer 来说,读源码都是一件好处颇多的事情,特别于初学者而言,这能迅速的吸纳优秀框架精华代码营养,迅速成长。不巧的是,晦涩难懂的源码,很容易让人心生怯意。今天分享就来谈一谈读源码的方法,希望能帮到一些有心读源码的朋友。

一、了解框架解决了什么问题

这不光对读源码有帮助,对整个学习都很有帮助。思考一个问题:你学习 Vue\React 的原因,除了它们如日中天,再不学习都不好意思找工作了,还掺杂了一些它们的某些优秀特性能给我带来某某好处的思考么? 新潮的框架,开发者需要而且也应该去了解,用人单位需要当然是本能的驱动力,什么火学什么也无可厚非,但是在闷声学习之前,需要加上一层思考,相比之前的技术体系,这个框架到底解决了什么问题,优势在哪,怀着目的去学习才不至于迷茫,例如 Vue\React 最大的优点是什么呢?组件化吧,带着框架是如何解决这个问题的疑问去学习,定能事半功倍 对于读源码来说,这一步就更关键了,如果都不了解代码是要干什么的,怎么会清楚它为什么这么写呢?再细分一下,在仔细阅读某个模块的文件的时候,也应当对模块的功能有个整体的把握

二、了解框架的设计思想

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

//这个方法可以获得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 顶角的弧度值,如果不告诉你这使用了运用三角形的余弦定理,恐怕你看半天也看不出来这是怎么算出来的 那么我们可以通过什么渠道去了解框架的设计思想:

到框架的官网看文档,开源的框架,甭管详不详细,这肯定是第一手权威资料

到网上搜别人的分析总结(源码分析也不会少),大多数情况下,都会有大神已经研究过了,站在巨人的肩膀上,能省不少事

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

三、搭建调试环境,摸清执行主脉络

第一节我们提到,细分到每个模块,要对模块功能有个整体的把握,如何去做到这个“把握”?除了官方文档和网上查阅的资料,最好的办法就是写一个简单的 Demo,搭建好测试环境,增加一些调试信息,自然能理清除框架的生命周期中,每一步需要调用那个模块(对于目录结构很清晰的优秀框架,有时候也可以凭直觉猜测,打印日志确认)

四、分清主次

框架源码就是一颗枝繁叶茂的参天大树,而你要做的事情是从根部网上爬。树要这么多分支,时间又是这么昂贵,阅读的策略很重要。我们的阅读路径,要以主要流程为主(也就是树的主驱赶,这样才能尽可能快的到达顶点),对于一些细枝末节,再这之后再来慢慢啃(或者有必要的时候) 例如,要去阅读 Vue 的源码,有个目录是解析模板,生成语法树 AST 从而最终生成 Render Function 的, 其实这一步最关键的是这个 Render Function 的生成结果,对于如何去解析模板、生成语法树,可以先放一放,回头需要的时候再回头看。否则你很容易卡死在某个点上出不来,从而产生放弃的念头

五、坚持不放弃

技术策略得当,遇到棘手过不去的问题也很正常,这个时候考验的就是毅力了,继续调试、搜索资料、或者找个大神来问一问都行,只要不放弃就好~~

原文发布于微信公众号 - 顶级程序员(TopCoding)

原文发表时间:2017-09-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java架构师进阶

Java程序员:从菜鸟码农到架构师六步走

在外人眼里,程序员这个职业总是被打上高薪、高大上的标签。可是鬼知道我们经历了什么,付出了多少。但是付出终会有收获的,IT这个行业,多数都是从程序员开始,小编也是...

14630
来自专栏FreeBuf

怎么用Python爬虫煎蛋妹纸海量图片?

我们的目标是用爬虫来干一件略污事情。 最近听说煎蛋上有好多可爱的妹子,而且爬虫从妹子图抓起练手最好,毕竟动力大嘛。而且现在网络上的妹子很黄很暴力,一下接受太多容...

30280
来自专栏.NET技术

整理自己的.net工具库

  今天我会把自己平日整理的工具库给开放出来,提供给有需要的朋友,如果有朋友平常也在积累欢迎提意见,我会乐意采纳并补充完整。按照惯例在文章结尾给出地址^_^。

9220
来自专栏FreeBuf

解密千万密码:透过密码看人性

对于密码,我们已经知道了不少。比如,多数密码短小、简单、且容易破解。但我们对一个人选择某个密码的心理原因却所知甚少。在本文中,我们分析了包括企业CEO、科学家...

18960
来自专栏华仔的技术笔记

iOS应用架构谈 view层的组织和调用方案 pragma mark - life cyclepragma mark - life cyclepragma mark - getters and set

36280
来自专栏互联网杂技

史上最明了的编程语言琅琊榜介绍:JavaScript是剪刀?

小时候经常看局座的节目,得知局座掌握中、英、日、阿拉伯等多门语言 时羡慕不已,当时就许下一个心愿「我一定要成为掌握多门语言的男人」。今天,我的梦想终于实现了,我...

37650
来自专栏Miguel三先生

尼尔森交互原则

19850
来自专栏FreeBuf

一张GIF引发的微信崩溃

今早,朋友发了一个表情给我,看下面,就是这个。。 ? 这不是天线宝宝卖萌系列表情包么,正当我看着俩宝宝撞屁股的GIF图寻开心的时候,微信突然卡死闪退了。。然后我...

35990
来自专栏非著名程序员

微信团队的又一开源力作,让设计师和开发者更佳高效的使用 Sketch

最近国内大的互联网公司在开源的世界磨刀霍霍,一时间江湖上传言四起,大家要在开源的世界中华山论剑,看看哪家的互联网公司技术更加强大。我们大家作为IT江湖中的一份子...

29470
来自专栏编舟记

架构整洁之道导读(三)

上回说到组件聚合,反映的是组件内部的“基本元素”的选择标准。第14章介绍的组件耦合则是指组件和组件之间的关系,这些依赖关系有些是好的,有些是不好的,我们即将看到...

16030

扫码关注云+社区

领取腾讯云代金券