美文网首页
23种设计模式

23种设计模式

作者: hankchang | 来源:发表于2018-08-17 23:09 被阅读0次

创建型

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

结构型

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

行为型

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

例题

  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();

  1. 停车
  • 某停车场, 分三层, 每层 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);

相关文章

  • 设计模式

    常用的设计模式有,单例设计模式、观察者设计模式、工厂设计模式、装饰设计模式、代理设计模式,模板设计模式等等。 单例...

  • 设计模式笔记汇总

    目录 设计原则 “依赖倒置”原则 未完待续... 设计模式 设计模式——策略模式 设计模式——装饰者模式 设计模式...

  • 设计模式

    《C#设计模式》 《C#设计模式》-设计模式概述 《C#设计模式》-面向对象设计原则 《C#设计模式》-单例模式 ...

  • 浅谈JS的一些设计模式

    @(书籍阅读)[JavaScript, 设计模式] 常见设计模式 设计模式简介 设计模式概念解读 设计模式的发展与...

  • 前端设计模式

    JS设计模式一:工厂模式jS设计模式二:单例模式JS设计模式三:模块模式JS设计模式四:代理模式JS设计模式五:职...

  • 设计模式之工厂模式

    设计模式之工厂模式 标签(空格分隔): 设计模式 工厂模式 设计模式的感念 设计模式的应用 工厂设计模式的产生 工...

  • JavaJavascript基础进阶(十七)JS中常用的设计模式

    单利设计模式、构造原型设计模式、发布订阅设计模式、promise设计模式 单利模式 构造原型设计模式 最贴近OOP...

  • 设计模式 - 目录

    设计模式01 - 单例模式 设计模式02 - 工厂模式 设计模式03 - 建造者模式 设计模式04 - 适配器模式...

  • 第1章 设计模式概述

    一、设计模式的概念 二、设计模式的历史 三、设计模式的要素 四、设计模式的分类 ■ 创建型设计模式 ■ 结构型设计...

  • iOS设计模式(3)适配器模式

    设计模式系列文章 《iOS设计模式(1)简单工厂模式》《iOS设计模式(2)工厂模式》《iOS设计模式(4)抽象工...

网友评论

      本文标题:23种设计模式

      本文链接:https://www.haomeiwen.com/subject/mrkxiftx.html