likes
comments
collection
share

效率提升 | UML时序图

作者站长头像
站长
· 阅读数 10

前言

前一篇文章我们介绍了UML中类图的使用,虽然刚开始还不熟悉,但是在平时使用多了,会发现还是很好记忆的,尤其对一些不太熟悉的、比较复杂的、继承关系较多的代码来说,简直是神兵利器。

本篇文章来介绍UML时序图,时序图在表示和描述复杂的方法调用链时有很大的帮助,可以让我们快速地在多个模块之间构建关系,是熟悉代码和梳理逻辑的必备之选

正文

UML时序图介绍

下面是一个典型的时序图,表示着小程序和服务器的关系:

小程序服务器微信服务器wx.login()获取codewx.request()发送codecode+appid+sercretopenid根据openid生成tokentoken小程序服务器微信服务器

通过时序图,我们可以很方便地显示模块之间的关系,下面我们就来逐一介绍其组成和含义。

参与者

参与者就是上面的小程序、服务器和微信服务器这些3个部分,表示3个参与逻辑流程的主体,用矩形表示,其竖线从上往下就表示时间的流向

Mermaid中使用participant关键字来定义参与者,或者不使用关键字隐式定义,代码如下:

效率提升 | UML时序图

也可以不使用participant关键字:

效率提升 | UML时序图

对于比较复杂的参与者名字,可以为其起别名

效率提升 | UML时序图

上述3种定义参与者的效果都是下面这样:

AliceJohnHello JohnHelloAliceJohn

消息

消息就是俩个参与者之间的交互,比如代码调用,使用实线或者虚线加箭头来表示。

标准格式如下:[Actor][Arrow][Actor]:Message Text,即从一个参与者指向另一个参与者,根据消息的类型,这里一共有4种消息类型,如下表:

类型Mermaid描述含义效果
同步消息/调用消息使用实心箭头和实线: Alice ->> John表示发送者发送完消息,然后停止活动等待消息接收者返回消息或者放弃。效率提升 | UML时序图
异步消息使用箭头和实线Alice -) John消息发送者发送消息到接收者,然后继续自己的活动,不等待接收者的返回。效率提升 | UML时序图
返回消息使用虚线和箭头John --) Alice表示接收者返回消息给发送者效率提升 | UML时序图
自关联消息使用实心箭头和实线: Alice ->> Alice:自关联消息表示方法的自身调用或者一个对象的一个方法调用另外一个方法效率提升 | UML时序图

上述的几种关系其实非常好记忆和理解,首先是实线和虚线的区别实线表示发送方主动发出消息,而虚线表示返回消息,其中对于同步消息用实心的箭头标记,为了强调,而异步消息,则用普通箭头标记。

激活框

这是针对参与者来说的,当收到一个消息时,可以表示对消息处理的时间间隔,在Mermaid中使用activatedeactivate激活和停用,比如代码如下:

效率提升 | UML时序图 效果如下:

APP服务器查询数据查询到数据APP服务器

这里会发现使用activate/deactivate关键字比较麻烦,可以使用+/-符号来代替,比如下面代码:

效率提升 | UML时序图

效果和上面是一样的。

对于激活框来说,它是可以反复多次被激活的,来表示不同的耗时间隔,比如下面效果:

APP服务器查询数据1查询数据2查询到数据2查询到数据1APP服务器

注释

在我们的时序图中,我们可以使用Note关键字来定义注释,该关键字的使用格式是 "Note left/rigth of 参与者",还可以使用over来跨域多个参与者,测试代码如下:

效率提升 | UML时序图

效果如图:

AliceBob这是Alice这是Bob共同TextHelloAliceBob

组合部分

在时序图中前面我们介绍的场景都是按时间流向一个一个执行,但是对这其中的执行操作我们可以根据实际逻辑进行组合,比如循环、if-else等情况,下面我们就来看几个常见的场景。

Loop循环

循环在我们代码中非常常见,而在UML时序图中的循环就相当于代码中的While关键字,使用loop关键字,使用格式如下:

loop 循环的文字
    内容
end    

比如下面测试代码:

sequenceDiagram
老板 ->> 程序员:开发个支付宝
loop 开发未结束
程序员 ->> 产品经理:这功能抄哪个APP
产品经理 --) 程序员:抄这个APP
end

效果如图:

老板程序员产品经理loop[开发未结束]开发个支付宝这功能抄哪个APP抄这个APP老板程序员产品经理

Alt抉择

抉择也就是在俩个或者多个互斥的消息序列中选择一个进行执行,相当于代码中的if-else,使用Alt关键字,使用格式如下:

alt 抉择的信息
    内容1
else
    内容2
else
    内容3
end    

比如下面测试代码:

sequenceDiagram
土豪 ->> ATM:查询余额
alt >5000
    ATM --) 土豪:取出5000
else >0
    ATM --) 土豪:都取了
else 0
    ATM --) 土豪:这是公交卡!
end

效果如图:

土豪ATMalt[>5000][>0][0]查询余额取出5000都取了这是公交卡!土豪ATM

Opt选项

从字面意思上来理解就是选项,是选择或者非选择,所以它包含一个可能发送或者不发生的序列,相当于上面没有elseAlt,使用opt关键字,测试代码如下:

sequenceDiagram
土豪 ->> ATM:查询余额
opt >0
    ATM --) 土豪:都取出来
end
ATM --) 土豪:退卡

效果如图:

土豪ATMopt[>0]查询余额都取出来退卡土豪ATM

Par并行

这个很好理解,就是多个任务同时进行,在代码中就是并发的意思,使用Par关键字,测试代码如下:

sequenceDiagram
老板 ->> 员工:开发个APP
par
员工 ->> 员工:和产品经理battle
员工 ->> 员工:和测试battle
end
员工 --) 老板:终于可以上线了

效果如图:

老板员工par开发个APP和产品经理battle和测试battle终于搞完了老板员工

UML时序图中常用的组合就是上面几个,其实只需要记住一个关键字即可,使用起来非常方便。

背景高亮

这里说一下Mermaid的功能,就是可以给某一块的序列操作设置背景,这样可以更加明显地看出某块的流程组合,使用如下:

rect rgb()
    content
end    

比如测试代码:

sequenceDiagram
老板 ->> 员工:开发个APP
rect rgb(191,223,255)
par
员工 ->> 员工:和产品经理battle
员工 ->> 员工:和测试battle
end
end
rect rgb(200,250,255)
员工 --) 老板:终于可以上线了
end

效果如图:

老板员工par开发个APP和产品经理battle和测试battle终于可以上线了老板员工

到这里关于UML时序图的知识就介绍完了,其实内容不多,其逻辑都和我们代码控制块是一一对应的,比如while循环和if-else等,关于Mermaid的使用,多写几次也就熟悉了。

IDE插件

生成时序图的Android Studio插件,我在网上查了一些资料,推荐使用:SequenceDiagram,安装、重启完该插件后,直接点击我们需要生成时序图的方法,然后右键:

效率提升 | UML时序图

短暂的等待后就会生成一个时序图:

效率提升 | UML时序图

通过时序图我可以更方便地查看方法地调用链。

总结

关于UML时序图的使用,还要加强,可以快速让我们捋清楚逻辑,配合前面所说的UML类图一起使用,效果更好。