使用序列图快速了解新代码的工作原理

您可能听说过或体验过序列图的价值。在本文中，我将介绍序列图并描述其优势。我还将带您了解序列图的功能，并解释如何使用每个功能来解释代码的行为。然后，我将展示 AppMap 如何通过 (a) 从正在运行的代码生成序列图以及 (b) 使序列图具有完全的交互性，从而进一步完善序列图。

什么是序列图？

序列图是一种统一建模语言(UML) 图，用于显示系统中不同组件或对象随时间变化的交互。它们显示消息流及其交换顺序。序列图非常适合理解代码的工作原理，因为它们不仅提供了足够的细节来传达代码行为的关键元素，而且足够紧凑，可以将大量信息放在一页纸上。

序列图的用途

序列图对于设计和测试涉及多个组件、异步事件或复杂控制流的软件系统特别有用。以下是一些序列图的常见用例：

1. 了解系统行为：序列图可以帮助您了解系统的不同部分如何相互作用，以及系统如何响应不同的输入。
2. 设计新系统：序列图可以用作设计新系统的工具，帮助识别所需的组件以及它们如何交互。
3. 沟通：序列图可以用作视觉辅助工具，向利益相关者（例如开发人员、项目经理和客户）传达系统行为和设计。
4. 文档：序列图可用于记录系统的设计和行为，提供系统如何工作的清晰简洁的描述。

如何解读序列图

我们来谈谈序列图的基本特性。这些特性存在于任何序列图中；我们将在后面的部分讨论交互式 AppMap 功能。

1. 生命线：一条垂直线，表示系统中的对象或组件。生命线显示了对象/组件的生命周期及其随时间的变化。
2. 对象头：附加在生命线顶部的矩形框，其中包含生命线所代表的组件（包、类等）的名称。
3. 激活条：一条水平线，表示对象执行操作或处理消息的持续时间。它显示为生命线上方的一条实线。
4. 消息：表示对象或组件之间通信的水平箭头。它显示为一条带有箭头的线，箭头从发送者指向接收者。消息可以是同步的、异步的或自引用的。
5. 返回消息：带有虚线的水平箭头，表示从接收方到发送方的返回消息。
6. 自我消息：对象向其自身发送的消息。
7. 组合片段：表示特定控制流的图表片段。它显示为一个带有标签的框，标签指示其执行的条件。

这个特定的序列图可以告诉我们有关它所建模的代码的信息。第一条消息从图外部开始，表明它源自被绘制系统外部的源。在此图中，外部源是发出请求的任何实体。下一条消息是包中的POST函数调用，然后“激活”生命线，从生命线从虚线变为矩形框（即激活条）可以看出。这意味着包现在在系统中处于“活动”状态。接下来，作为消息的一部分，我们看到一个循环，其中两次调用包中的函数。循环被描绘成一个组合片段，如标有“循环”的灰色框所示。在这个循环框中，我们看到了第一个返回消息的示例，即上面的虚线箭头，表示返回类型。这表明函数执行并返回后，我们再继续下一个函数调用。如果我们跳过几个函数调用，我们会看到一个自消息的示例，其中包从自身的一个部分调用另一个部分，这由一个消息箭头表示，该箭头从生命线出发，然后返回到同一条生命线。您可以看到，这会暂时增加激活条的宽度。之后还有更多函数调用，但这些已经涵盖了基础知识。process_actionactionpackactionpack process_actionwriteactivesupportintegerwriteupdateactionpackactionpack

使序列图具有交互性

序列图虽然实用，但还可以进一步完善。AppMap是一款为序列图添加了两项强大功能的工具——自动图表生成和交互功能。

让我们直接看一个例子。这是一个通过运行类似 Twitter 的应用程序的测试用例生成的序列图。AppMap 的名称是：

Following should unfollow a user with Ajax

☝️ 点击此处打开实时图表！☝️

当您单击此图表时，您会立即看到该图表是“活的”。您可以展开、折叠、优化和向下钻取以获取详细的跟踪信息。

如何与 AppMap 序列图交互

以下是充分利用 AppMap 序列图的几个技巧：

• 显示事件参数、返回值和源代码链接：如果您单击消息箭头的名称，则会选择该事件，并且您可以在侧边栏中看到有关它的更多信息。

• 隐藏生命线：点击对象标题右上角的小 x 图标，即可隐藏该生命线。如果序列图过大，且包含与当前任务无关的代码，此功能会非常有用。例如，您可能怀疑代码中存在错误，并且假设该logger包与代码无关。在这种情况下，您可以隐藏生命线，logger以便更轻松地在序列图中找到相关信息。

• 折叠序列图的某个部分：您可以点击[-]函数名称旁边的消息箭头上的按钮，即可折叠该部分。此功能的实用性与隐藏生命线类似。有时，图中会包含与您当前任务无关的无关信息。暂时隐藏这些信息是快速找到所需内容的好方法。

• 将包展开为类：如果对象头是一个包，并且包含两个或多个类，则可以点击对象头左上角的图标展开包。这可以让您更详细地了解系统中对象之间的交互，并帮助您更好地理解代码。

交互式序列图的威力

序列图是软件工程中一个非常有价值的工具，用于对系统中对象之间的复杂交互进行建模和可视化。交互式序列图将其提升到一个新的水平，使您能够：

• 选择特定事件以获取更多详细信息。
• 展开和折叠对象标题。
• 隐藏生命线以消除混乱并集中于最相关的信息。
• 折叠各部分以集中查看高级信息。

序列图如何帮助您（或伤害您）？

你在项目中使用过序列图吗？欢迎在评论区分享你的个人经验。

链接

⬇️ 获取适用于 VSCode 和 JetBrains 的 AppMap：https://appmap.io/get-appmap
⭐ 在 GitHub 上为 AppMap 加星标：https://github.com/getappmap
🐦 在 Twitter 上关注：https://twitter.com/getappmap
💬 加入 AppMap Slack：https://appmap.io/slack
ℹ️ 阅读 AppMap 文档：https://appmap.io/docs

致谢

感谢 Adam Trotta 提供这篇文章的初稿以及图片。