什么是UML类图
Unified Modeling Language 统一建模语言,UML可以包含很多种图,本系列种使用的是类图
画图工具
MS Office visio(比较复杂的类图) 和 processon(本系列种使用这种)
创建类图的格式如下
画一个简单的UML类图
接下来使用processon来画一个People的类图
根据这个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类图
设计一个比较复杂一点的类,类之间有各种关系的,泛化:表示继承,关联:表示引用
class People {
constructor (name ,house) {
this.name = name
this.age = house
}
saySomething () {}
}
class A extends People {
constructor(name, house){
super(name, house)
}
saySomething () {
alert('I am A')
}
}
class B extends People{
constructor(name, house){
super(name, house)
}
saySomething () {
alert('I am B')
}
}
class House {
constructor(city) {
this.city = city
}
showCity () {
alert(`house in ${this.city}`)
}
}
// 测试代码
let aHouse = new House('深圳')
let a = new A('a', aHouse)
console.log(a) // a有房子
let b = new B('b')
console.log(b) // b没有房子