web前端进阶之js设计模式UML类图篇

概念

• Unified Modeling Language 统一建模语言

UML包含很多中图，本篇章主要分享类图，掌握泛化（类之间的继承）和关联（类之间的组合或者是引用）

在线工具

• https://www.processon.com/

规范

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