---
typora-root-url:/home/labile/envoy-insider/docs/source
to-be-english: true
---
# 阅读互动图书
## 互动图书
人类发展到现在，我想，图书应该扩展一下定义了。随着技术知识的复杂化，互动的、电子化的展示方法可能更适合于复杂技术知识的深入学习。或者这么说，入门时，更希望抽象和简化，深入后，更希望理清内部的联系。
这本不是一本《深入 xyz 源码》类型的书。甚至可以说，我尽了最大的努力少在书中直接贴源码。看源码是掌握实现细节必须的一步，但在书中浏览源码的体验一般非常糟糕。反而，一个源码的导航图可能更来得实用。
可以这样说，我写作的大部时间不是花在文字上，是在绘图上。所以用电脑去读图，才是本书的正确打开方法。手机，只是个引流的阳谋。
这里的图大多比较复杂，不是 PPT 大饼图。所以，基本也不适合打印出纸质书。但我会让图与读者互动：
- 原创的图，多数是用 Draw.io 制作的 SVG 图片：`*.drawio.svg`。
复杂的图，建议 `用 draw.io 打开` ：
- 有的图片提供了 `用 draw.io 打开` 的链接，可以在浏览器用互动性更强的方式浏览:
- 带下划线的文字 或带 🔗 图标，链接到相关文档和代码行。
- 带 💡 或 🛈 图标，鼠标放上去，会弹出 `hover` 窗口，提示更多的信息。如配置文件内容。
如果不喜欢 draw.io 那么直接看 SVG:
- 浏览 SVG 图片的正确姿势是浏览器中图片处右键，选择 `新 Tab 中打开图片` 。大的 SVG 图片，按下鼠标中键，自由滚动/拖动。
- SVG 图片可以点击链接，直接跳转到相应源码网页(或相关文档)，有时会精确到源码行。
- SVG 有时有排版问题，特别是图中内嵌的代码段，这时，只能用 drawio 打开了。
```{hint}
- 大图用 Draw.io 打开。图中包含大量的链接，链接到每一个组件、配置项、指标的文档。有时链接到 github 代码行。
- 双屏，一屏看图，一屏看文档，是本书的正确阅读姿势。如果你在用手机看，那么，忽略我吧 🤦
```
## 语言风格
由于本文不打算打印出版。也不是什么官方文档。所以语言上我是口语化的。如果读者的期望是阅读一本非常严肃的书，那么可能会失望。但不严肃不代表不严谨。
因为这是我写的第一本书，没多少经验。也没专人和我做校对和勘误，所以如果有错，读者可以提 Github Issue。
## 画图风格
软件工程业界使用的图如架构图、流程图、等等，按风格来划分，可以有两种：
- 整齐漂亮工整、甚至注意美学与配色等因素；并限制每张图的复杂度，能抽象的，就不要一下深入。这种风格更多见于 PPT 和 纸质书。
- 工程师图，事无巨细，只在复杂度实在超过人可以在一个平面中理解的最大限度时，才进行抽象。这种图通常规整度有限，比较工程师文化。这种风格更多见于技术电子文档。
本书同时使用这两种风格的图。不过后者更常用。
## 如何参透书中复杂的 UML 图
:::{figure-md} 如何参透书中复杂的 UML 图
*如何参透书中复杂的 UML 图*
:::
*[用 Draw.io 打开](https://app.diagrams.net/?ui=sketch#Uhttps%3A%2F%2Fenvoy-insider.mygraphql.com%2Fzh_CN%2Flatest%2F_images%2Fabstract-event-model.drawio.svg)*
由于本书有的图比较复杂。我花了大量时间研究的结果都以各种方式记录在各个图中了。以上图为例，要读出图中的信息，就算我自己放下图一年后，也得花很多心思。所以，这种图得用 “参透” 这个词。但也有一些方法：
1. 阅读图例
2. 设计期静态结构与关系
1. 浏览图中各组件（class），尝试记住它们的名字。浏览各组件（class）的属性。通过上面信息，尝试解读组件的职责。
2. 对于 UML 图，浏览组件（class） 之间的继承/实现/组合(Composition)/聚合(Aggregation)
3. 浏览运行期流程与关系。包括控制流与数据流