UML 类图

✏️ 概述

To specify the visibility of a class member (i.e. any attribute or method), these notations may be placed before the member’s name, but it is optional:

• + Public
• - Private
• # Protected
• ~ Package/Internal

类图：

classDiagram
class 类图{
    + public 属性名A：类型
    # protected 属性名B：类型
    - private 属性名C：类型
    +publicMethodA (参数1，参数2) return type
    #protectedMethodB (参数1) return type
    -privateMethodC(参数1) return type
}

🍉 举例

class People {
  name
  age
  protected weight
  private lover
  constructor(name, age) {
    this.name = name;
    this.age = age
    this.weight = 250
    this.lover = 'olu'
  }
  eat() {
    console.log(`${this.name} eat something`)
  }
  speak() {
    console.log(`my name is ${this.name}, age ${this.age}`)
  }
}

类图：

classDiagram
class People
class People{
    + name：String
    + age: Number
    # weight：Number
    - lover: String
    +eat () void
    +speak () void
}

关系

• 泛化（继承）
• 关联（引用）

🍊 举例

class People {
  constructor(name, house) {
    this.name = name;
    this.house = house;
  }

  sayHi() {}
}

class A extends People {
  constructor(name, house) {
    super(name, house);
  }
  sayHi() {
    console.log("hello, I am A");
  }
}

class B extends People {
  constructor(name, house) {
    super(name, house);
  }
  sayHi() {
    console.log("hello, I am B");
  }
}

class House {
  constructor(city) {
    this.city = city;
  }
  showCity() {
    console.log(`house is in ${city}`);
  }
}

const houseA = new House("China");
const olu = new A("olu", houseA);

类图：

classDiagram
People --> House
A --|> People
B --|> People

class People{
    + name：String
    + house: House
    +sayHi () void
}
class House{
    + city: String
    +showCity () void
}
class A{
    +sayHi () void
}
class B{
    +sayHi () void
}

🏄 实例分析

• 某停车场，分三层，每层 100 车位
• 每个车位都能监控到车辆的驶入和离开
• 车辆进入前，显示每层的空余车位数量
• 车辆进入时，摄像头可以识别车牌号和时间
• 车辆出来时，出口显示器显示车牌号和停车时长

类图：

classDiagram
Park --> Camera
Park --> Screen
Park --> Floor
Floor --> Place

class Park{
    + floors: Array<Floor>
    + camera: Camera
    + screen: Screen
    + carList: Object
    +showEmptyNumber () Number
    +in (car)
    +out (car)
}
class Car{
    + num: Number
}
class Floor{
    + index: Number
    + places: Array<Place>
    +showEmptyPlaceNum () Number
}
class Place{
    + empty: Boolean
    +in () void
    +out () void
}
class Camera{
    +shot () Object
}
class Screen{
    +show (car, inTime) String
}

class Park {
  constructor() {
    this.floors = [];
    this.screen = new Screen();
    this.camera = new Camera();
    // 存储摄像头拍摄返回的车辆信息
    this.carList = {};
  }

  init() {
    for (let i = 0; i < 3; i += 1) {
      const places = [];
      for (let j = 0; j < 100; j += 1) {
        places[j] = new Place();
      }
      this.floors[i] = new Floor(i, places);
    }
  }

  showEmptyNumber() {
    return this.floors
      .map((floor) => {
        return `第 ${floor.index + 1} 层有 ${floor.showEmptyNumber()} 个空位`;
      })
      .join(", ");
  }

  // 通过摄像头获取信息
  in(car) {
    const shotInfo = this.camera.shot(car);
    const placeIdx = parseInt(Math.random() * 100, 10);
    const floorIdx = parseInt(Math.random() * 3, 10);
    const place = this.floors[floorIdx].places[placeIdx];
    if (place.isEmpty) {
      place.in();
      shotInfo.place = place;
      this.carList[car.num] = shotInfo;
    } else {
      this.in(car);
    }
  }

  // 通过显示器展示信息
  out(car) {
    const showInfo = this.carList[car.num];
    const place = showInfo.place;
    this.screen.show(car, showInfo.inTime);
    place.out();
    delete this.carList[car.num];
  }
}

class Car {
  constructor(num) {
    this.num = num;
  }
}

class Floor {
  constructor(index, places) {
    this.index = index;
    this.places = places || [];
  }

  showEmptyNumber() {
    return this.places.filter((x) => x.isEmpty === true).length;
  }
}

class Place {
  constructor() {
    this.isEmpty = true;
  }

  in() {
    this.isEmpty = false;
  }

  out() {
    this.isEmpty = true;
  }
}

class Camera {
  shot(car) {
    return {
      num: car.num,
      inTime: Date.now(),
    };
  }
}

class Screen {
  show(car, inTime) {
    console.log(`车牌号：${car.num}, 停车时长：${Date.now() - inTime}`);
  }
}

const p = new Park();
p.init();
const car1 = new Car("A11111");
const car2 = new Car("B66666");
const car3 = new Car("C99999");
const car4 = new Car("olu0000");

p.in(car1);
p.in(car2);
p.in(car3);
p.in(car4);
p.out(car1);
p.showEmptyNumber();