【十月打卡】第67天 前端常用的7种设计模式(3)

类之间的关系

• 实现（类对接口的实现，因为接口比较虚，所以用虚线空心箭头）
• 泛化 （子类对父类的继承，父类是具体存在的，所以用实线空心箭头）
• 引用（下面会细讲，引用关系的箭头都是实心箭头）

实现

• 类对接口的实现【虚线 + 空心箭头】

代码演示：

interface PersonType {
  name: string;
  age: number;
  speak(val: string): void;
}

class Person implements PersonType {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  speak(val: string) {
    console.log(val);
  }
}

UML类图：

泛化

• 子类对父类的继承【实线 + 空心箭头】

代码演示：

class Person {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  speak(val: string) {
    console.log(val);
  }
}

class Teacher extends Person {
  constructor(name: string, age: number){
    super(name, age)
  }
  teach(){
    console.log('讲课')
  }
}

class Student extends Person {
  constructor(name: string, age: number){
    super(name, age)
  }
  study(){
    console.log('学习')
  }
}

UML类图：

引用关系的细化

注：视频中老师用的是关联关系，加入了自己的一些思考，觉得引用关系这个词更加方便理解，也更加方便细分

• 关联：互相独立，引用性比较强，一般作为属性来引入（比如职工和工卡的关系）
• 依赖：互相独立，引用性比较弱，一般作为函数参数或者返回值（比如司机和车的关系）
• 聚合：整体引用部分，部分可以脱离整体 （比如车和轮胎）
• 组合：整体引用部分，部分不可以脱离整体（比如脸和嘴）

关联

• 【实线 + 实心箭头】

代码演示：

class Employee {
  constructor(public name: string, public card: Card) {}
  work(){}
}

class Card {
  constructor(public id: number) {}
}

UML类图：

依赖

• 【虚线 + 实心箭头】

代码演示：

class Driver {
  constructor(public name: string) {}
  drive(car: Car){}
}

class Car {
  constructor(public type: string) {}
}

UML类图：

聚合

• 【空心菱形 + 实线 + 实心箭头】

代码演示：

class Car {
  constructor(public engine: Engine) {}
}

class Engine {
  constructor() {}
}

UML类图：

组合

• 【实心菱形 + 实线 + 实心箭头】

代码演示：

class Face {
  constructor(public mouth: Mouth) {}
}

class Mouth {
  constructor() {}
}

UML类图：