23种设计模式

创建型

• 工厂模式 ( 工厂方法模式, 抽象工厂模式, 建造者模式 )
• 单例模式
• 原型模式

结构型

• 适配器模式
• 装饰器模式
• 代理模式
• 外观模式
• 桥接模式
• 组合模式
• 享元模式

行为型

• 策略模式
• 模板方法模式
• 观察者模式
• 迭代器模式
• 职责连模式
• 命令模式
• 备忘录模式
• 状态模式
• 访问者模式
• 中介者模式
• 解释器模式

例题

1. 打车

• 打车时, 可以打专车或者快车. 任何车都有车牌号和名称.
• 不同车价格不同, 快车每公里 1 元, 专车每公里 2 元
• 行程开始时, 显示车辆信息
• 行程结束时, 显示打车金额 ( 假定行程就 5 公里 )

问题

• 画出 UML 类图
• 用 ES6 语法写出该示例

解答

1.png

class Car {
  constructor(number, name) {
    this.number = number;
    this.name = name;
  }
}

class Kuaiche extends Car {
  constructor(number, name) {
    super(number, name);
    this.price = 2;
  }
}

class Manche extends Car {
  constructor(number, name) {
    super(number, name);
    this.price = 1;
  }
}

class Trip {
  constructor(car) {
    this.car = car;
  }
  start() {
    console.log(`行程开始, 名称: ${this.car.name}, 车牌号: ${this.car.number}`);
  }
  end() {
    console.log(`行程结束, 价格: ${this.car.price * 5}`);
  }
}

const car = new Kuaiche(100, "桑塔纳");
const trip = new Trip(car);
trip.start();
trip.end();

---

2. 停车

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

问题

• 画出 UML 类图

解答

2.png

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

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

// 出口显示器
class Screen {
  show(car, inTime) {
    console.log("车牌号", car.num);
    console.log("停车时间", Date.now() - inTime);
  }
}

// 停车场
class Park {
  constructor(floors = []) {
    this.floors = floors;
    this.camera = new Camera();
    this.screen = new Screen();
    this.carList = {}; // 存储摄像头拍摄返回的车辆信息
  }
  in(car) {
    // 通过摄像头获取信息
    const info = this.camera.shot(car);
    // 停到某个停车位
    const i = parseInt((Math.random() * 100) % 100);
    const place = this.floors[0].places[i];
    place.in();
    info.place = place;
    // 记录信息
    this.carList[car.num] = info;
  }
  out(car) {
    // 获取信息
    const info = this.carList[car.num];
    // 将停车位清空
    const place = info.place;
    place.out();
    // 显示时间
    this.screen.show(car, info.inTime);
    delete this.carList[car.num];
  }
  emptyNum() {
    return this.floors
      .map(floor => {
        return `${floor.index} 层, 还有${floor.emptyPlaceNum()} 个空闲车位`;
      })
      .join("\n");
  }
}

// 层
class Floor {
  constructor(index, places = []) {
    this.index = index;
    this.places = places;
  }
  emptyPlaceNum() {
    let num = 0;
    this.places.forEach(p => {
      if (p.empty === true) num++;
    });
    return num;
  }
}

// 车位
class Place {
  constructor() {
    this.empty = true;
  }
  in() {
    this.empty = false;
  }
  out() {
    this.empty = true;
  }
}

// 测试
// 初始化停车场
const floors = [];
for (let i = 0; i < 3; i++) {
  const places = [];
  for (let j = 0; j < 100; j++) {
    places[j] = new Place();
  }
  floors[i] = new Floor(i + 1, places);
}
const park = new Park(floors);

// 初始化车辆
const car1 = new Car(100);
const car2 = new Car(200);
const car3 = new Car(300);

console.log("第一辆车进入");
console.log(park.emptyNum());
park.in(car1);
console.log("第二辆车进入");
console.log(park.emptyNum());
park.in(car2);
console.log("第一辆车离开");
park.out(car1);
console.log("第二辆车离开");
park.out(car2);
console.log("第三辆车进入");
console.log(park.emptyNum());
park.in(car3);
console.log("第三辆车离开");
park.out(car3);