概念
- Unified Modeling Language 统一建模语言
UML包含很多中图，本篇章主要分享类图，掌握泛化（类之间的继承）和关联（类之间的组合或者是引用）
在线工具
规范
image.png
操作方式
-
新建
image.png -
选择UML类图，类选项，拖拽到面板上
image.png - 根据以下代码画出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}`)
}
}
name字符串类型，age类型是number，函数没有返回值就是void
image.png
- 类之间具有继承和相互引用关系的UML类图
// 1、继承关系：A和B继承了People
// 2、关联关系：在People里面引用了house，this.house 是house类型
class People {
constructor(name, house) {
this.name = name
this.house = house
}
saySomething() {
}
}
class A extends People {
constructor(name, house) {
super(name, house)
}
saySomething() {
console.log('this is a')
}
}
class B extends People {
constructor(name, house) {
super(name, house)
}
saySomething() {
console.log('this is b')
}
}
class House {
constructor(city) {
this.city = city
}
showCity() {
console.log(this.city)
}
}
let aHouse = new House('北京')
// 把aHouse当做参数类型进行传递进去
let a = new A('aaa', aHouse)
console.log(a) //city--- 北京
let b = new B('bbb')
console.log(b) //city---undefined
image.png
