android前端框架uml,UML 类图的前端实现
UML 很香, 可以使用代码来画各种图, 类图, 时序图, 流程图, 食用方式也很简单, 在 VSCode中通过 markdown语法以及plantuml插件实现快速编辑, 实时查看的功能. 相比于在一些软件上, 甚至在线的网站如 processOn都有一个修改, 截图, 粘贴的过程, 修改起来着实麻烦.
UML上手也还有一些难度, 我也是用点学点, 把我用到的跟大家分享下.总体来说会了就是一个可以陪伴终身的工具. 投出产出比很高.
注意安装完成后需要到 vscode 的 setting.json 中进行 umlserver 的配置
{
"plantuml.render": "PlantUMLServer",
"plantuml.server": "http://www.plantuml.com/plantuml",
}
复制代码
首先来说说面向对象的几种类图的图例
泛化Generalization
就是常说的继承关系.用一个空心箭头从继承者指向被继承者, 这是一种超级强的关系.
class Parent {}
class Child {}
Child -|> Parent
复制代码
聚合Aggregation
聚合表示一个整体 包含 一个部分的关系, 这个部分可以不仅存在于这个整体中, 还可能存在于其他地方. 用一个空心菱形箭头从部分指向整体.
class Part{}
class Whole{}
Part -d-o Whole
复制代码
-d-o: d 表示 down, 同理有 l: left, r:right, u:up, 可以适当调节类图的位置关系. o 就表示菱形, 也就是聚合关系的图例.
组合Composition
组合关系表示一种比聚合还要强的关系, 整体需要维护部分的所有生命周期, 也就是说这个部分除了在整体中存在, 不会存在于其他任何地方. 是一种很强的关联. 用一个实心菱形箭头从部分指向整体
class Hand{}
class Head{}
class Person{}
Hand "2" -d-* "1" Person
Head "1" -d-* "1" Person
复制代码
这里有字符串 1,2 的出现, 表示数量关系,(注意必须使用双引号) 一般来说可以一个或多个部分对应一个整体. 下图图例就表示一个人有两只手一个头
关联Association
关联是一种比较弱的关系, 表示一个类A如果知道另一个类B的方法或属性, 则表明类 A 关联类 B, 关联关系可以单向, 双向, 甚至自身关联(自己调用自己)的情况.
class Customer{}
class Product{}
Product "*"--"*" Customer
Customer : products : Product[]
Product : belongTo : Customer
复制代码
: 表示类中包含的属性或方法, 注意一定在冒号两端加空格.
下图表示消费者会拥有很多个商品, 商品也可以关联消费者, 这就是双向的关系, 没有箭头表默认, 默认双向
class Customer{}
class Address{}
Customer : address:Address
Customer "1"
复制代码
消费者会有一个邮寄地址, 这是一个单项关联的关系
class NodeArray {}
NodeArray : next:NodeArray
NodeArray
复制代码
这是在前端没有链表的数据结构会被用来模拟链表的简略结构, 表示下一个节点. 这就是自身关联
依赖Dependency
依赖跟关联有一些相似, 也表示类之间的联结, 但是通常为单向的(应尽可能的去避免双向的依赖)
我用到的一般都是作为参数来使用的.关联性会比关联更低一些, 用虚线表示
class Driver {}
class Car{}
Driver : drive(car : Car)
Driver <.r. car>
复制代码
司机开车, 会用到 car 的实例.
实现Implementation
实现就很好理解了, 就是具体类对接口的关系. 用虚线三角箭头从具体类指向接口
interface IDog {}
IDog : bark(){}
IDog : name:string
class Dog {
bark() {}
name: string
}
Dog .r.|> IDog
复制代码
上述表示类型的意义都可以通过 typescript 实现.比如 interface 可以class A implement IA {}等.
总结
通过上述类图的分类, 可以看出在面向对象中的对象间的联系紧密程度.
组合>聚合>关联>依赖 实现因为属于接口的范畴, 不在比较范围类, 可以类比到聚合的优先级, 接口可以被多个类实现, 但在 typescript 一个类还只能实现一个接口.
之后还会持续更新流程图和时序图. 可以很方便的表示软件的设计模式.敬请关注~