阅读源码时 Excel 能帮你

2020-08-28 jude 更多博文 » 博客 » GitHub »

原文链接 http://judes.me/tech/2020/08/28/reading-source-code-with-excel.html
注:以下为加速网络访问所做的原文缓存,经过重新格式化,可能存在格式方面的问题,或偶有遗漏信息,请以原文为准。


前段时间要准备组内分享,跑去读 mobx 的源码。

作为一个成熟的状态管理库, mobx 的源码执行流程非常长,以致我经常在回看信息时发现自己离最初的位置有十几层堆栈了。

虽然 mobx 的命名非常好,代码结构也清晰,但流程实在有点长,每当我记不住某段代码的前后流程时,总希望能一边看代码,一边记录下代码执行的流程。

之前我以为只能用流程图记录代码执行,但是画流程图很麻烦,超过一半时间都在画画、调整样式。

这样完全没心思读源码了,因此一直没动手。

刚好那阵子刷推,看到有人说「很多 ToB 产品做到最后发现最大的竞争对手其实是 Excel」,我想 Excel 这么强大,能不能用它来记录代码执行呢?

经过一番实践,我发现 Excel 真的可以。

先说说自己的需求,读源码时我关注点大体只有三个:

  • 处在同一层级、按顺序执行的方法有哪些
  • 哪个方法调用了哪个方法
  • 哪个方法有点特别,需要备注一下

因此我按下面的方式用 Excel 记录代码执行:

  • 按「行」记录先后执行的方法,如果某个「单元格」上方有内容,表明程序先执行了上方的内容,再执行本单元格内容
  • 按「列」记录被调用的方法,如果某个「单元格」左侧有内容,表明本单元格被左侧调用
  • 「行」的优先级比「列」的高;如果某个「单元格」上方、左侧都有内容,忽略左侧内容
  • 在必要时加入空「单元格」解决「行」跟「列」的冲突
  • 在「单元格」上评论额外信息

举个例子,看下面的代码:

function func1 () {
  funcA();
  funcB();
  funcC();
}

function funcA() {
  funcAA();
  funcAB();
  funcAC();
}

function funcB() {
  funcBA();
  funcBB();
  funcBC();
}

按上面的方式可以记录成这样:

Excel recordExcel record

代码少不了逻辑判断,怎样处理逻辑分支呢?我暂时想到的办法是

  • 用不同的列记录不同的分支
  • 每个分支用相同背景色标注
  • 不同分支间隔一列

举例说明:

function func1 () {
  funcA();
  funcB();
}

function funcA() {
  funcAA();
  funcAB();
  funcAC();
}

function funcB() {
  if(Math.random() > 0.5) {
    funcBA();
  } else {
    funcBB();
  }
}

用 Excel 这样记录以上代码:

Excel record with conditionExcel record with condition

用 Excel 记录代码执行虽然简陋了点,也没有流程图直观,但非常省事,也容易读懂,我非常满意。