概念
- Unified Modeling Language 統(tǒng)一建模語言
UML包含很多中圖，本篇章主要分享類圖，掌握泛化（類之間的繼承）和關(guān)聯(lián)（類之間的組合或者是引用）
在線工具
規(guī)范
image.png
操作方式
-
新建
image.png -
選擇UML類圖，類選項(xiàng)，拖拽到面板上
image.png - 根據(jù)以下代碼畫出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，函數(shù)沒有返回值就是void
image.png
- 類之間具有繼承和相互引用關(guān)系的UML類圖
// 1、繼承關(guān)系：A和B繼承了People
// 2、關(guān)聯(lián)關(guān)系：在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('北京')
// 把a(bǔ)House當(dāng)做參數(shù)類型進(jìn)行傳遞進(jìn)去
let a = new A('aaa', aHouse)
console.log(a) //city--- 北京
let b = new B('bbb')
console.log(b) //city---undefined
image.png
