前端设计模式之UML类图

1,237 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第7天,点击查看活动详情

UML 类图的作用

  • 需求指导设计,设计指导开发
  • 开发之前,写技术方案设计文档,并评审
  • UML 类图就是一个重要的工具和表达方式。如果你和同事都熟悉 UML 类图,那会减少很多沟通成本,不用看代码就可以知道你的代码结构,核心属性和方法。

画 UML 类图推荐使用processon在线工具

单个类

三个区域

  • 类名
  • 属性
  • 方法

权限描述

  • + public
  • # protected
  • - private

image.png

类图的几种关系

  • 实现: 实现接口
  • 泛化: 继承
  • 关联: A 是 B 的一个属性
    • 聚合 - 整体包含部分,部分可以脱离整体单独存在
    • 组合 - 整体包含部分,部分不可脱离整体
    • 依赖 - 不是属性,函数参数、返回值

【注意】聚合、组合、依赖,都属于关联关系,更加细化了。日常工作中没必要区分那么细致,都当做关联关系即可。

实现接口

注意:TS 的 interface 和 Java 的不一样,TS 有属性,而 Java 的没有属性,而 UML 类图是依据 Java 语法而画的(没有属性区域)。

接口的类图上面需要用<<interface>>来表示这是一个接口,然后 class Person 实现了接口IPerson

image.png

泛化 - 继承父类

image.png

关联

image.png

聚合 整体包含部分,部分可以脱离整体单独存在。汽车包含引擎,同时引擎是可以单独存在的。

image.png

组合

整体包含部分,部分不可脱离整体。脸包含嘴巴,但是嘴巴不能单独存在。

image.png

依赖

不是属性,是函数参数、返回值。

image.png