UML类图
什么是UML类图
UML(Unified Modeling Language)类图，中文意思为“统一建模语言”，我们之所以要在面向对象中介绍它，是因为，我们在后面的设计模式中，每一种模式，都有它对应的类图，它作为一种概述的表达来反应我们的设计，我们可以不用面对代码，只面对这样的类图，来进行前期的设计讨论。对于UML，其内容也是非常多，我们只关注其“类图”概念，这样和我们讲的面向对象和将来要将的设计模式关系比较紧密。
画图工具
- MS Office visio（微软office套装之一）
- https://www.processon.com/（我个人使用比较多）
如何画类图
我们先来看一个类图
这是我在画图工具上，拖出了一个类，其默认样式，其中，有一些符号这里先做一个简单的介绍
-
我们最终生成的类图，为三行，第一行为“类名”，第二行为属性，第三行为方法。
-
其中，“+”表示
public，“#”表示protected，“-”表示private -
在定义属性好方法的参数的时候，都可以在其后面用“:”定义其数据类型
下面我们将下面这个类用UML类图的形式表现出来
class People {
constructor(name, age) {
this.name = name
this.age = age
}
eat () {
alert(`${this.name} eat someThing`)
}
speak () {
alert(`My name is ${this.name}, age ${this.age}`)
}
}
在画UML类图的时候，我们无需关心其内部的实现方法，只需要用类图表现出来即可。按照上面我们的规则，画出的类图如下
UML类图之间的关系
我们在实际开发中，不可能只有一个类，一定是在一些类之间存在着某些关系，如组合，继承等常见的类之间的关系。那么我们如何在UML类图中表示这样的关系呢？
关于UML类图之间的关系呢，也是分好多种，但是我们也只是介绍和我们JS相关的常用关系，其中
- 泛化，表示继承
- 关联，表示引用
那么我们如何使用UML类图来表示这种关系呢？我们先开看一下下面这段代码
class People {
constructor (name, house) {
this.name = name
this.house = house
}
saySomething () {
console.log('I am People')
}
}
class A extends People {
constructor (name, house) {
super(name, house)
}
saySomething () {
console.log('I am A')
}
}
class B extends People {
constructor (name, house) {
super(name, house)
}
saySomething () {
console.log('I am B')
}
}
class House {
constructor(city) {
this.city = city
}
showCity () {
console.log(this.city)
}
}
const aHouse = new House('beijing')
const a = new A('a', aHouse)
const b = new B('b')
b.saySomething()
上面的代码比较简单，其类之间的关系为A和B继承于People,House和People为关联关系，因为我们将House的实例传给个A的构造函数。那么我们如何将上面的类关系用UML类图的形式表现出来呢？如下图：
针对上图，我们解析以下几点
- 因为A和B的属性全部继承自People,所以A和B的属性行可以不写
- 继承关系使用直线空心箭头来指向父类
- House和People为引用关系，People中的house属性为House类型，所以由People指向House,使用直线实心箭头
这样，我们就使用UML类图，对上面的代码进行了描述和设计，我们无需关注代码的实现，在设计初期就能使用UML类图很好的反应出各个类之间的关系。
UML类图总结
- UML为“一列三行”的表格，每一行分别表示类名、属性、方法
- UML类图可以通过不同的表格连线表示类之间的关系：泛化（继承）、关联（引用）
- UML类图远比本文介绍的复杂，后续要多画多练习，结合设计模式(看后续文章)
网友评论