本文共 3438 字，大约阅读时间需要 11 分钟。

1. 从设计到模式

• 设计
  • 即设计原则
  • 是统一的指导思想
• 模式
  • 是一个既定的，通过概念总结出来的一些模板，一些可以效仿的固定的东西
  • 设计模式就是根据设计原则这个指导思想，结合日常开发经验，总结出来的在日常开发过程中应该用到的固定的样式、模板等既定的东西
• 如何学习设计模式
  • 明白每个设计的道理和用意
  • 通过经典应用体会设计模式的真正使用场景
  • 编码时多思考，尽量模仿

2. 设计模式简介

2.1 设计模式类型

• 创建型
  • 讲解对象是怎么创建出来的、如何生成
• 组合型
  • 讲解对象或类该是怎样的组合形式
  • 有时候单靠一个类，无法满足既定的需求
  • 可以通过组合的形式来满足
• 行为型
  • 涵盖了日常开发中的一些常用的行为
  • 这些常用行为该怎么去布置、开发才能满足我们设计原则的要求

2.2 创建型

• 工厂模式（工厂方法模式、抽象工厂模式、建造者模式）
• 单例模式
• 原型模式

2.3 结构型

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

2.4 行为型

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

3. 设计原则面试题

3.1 面试题一

• 面试题目

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

• 面试要求

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

• UML 类图

  

• 代码

class Car {
   	constructor(number, name) {
   		this.number = number		this.name = name	}}class Kuaiche extends Car {
   	constructor(number, name) {
   		super(number, name)		this.price = 1	}}class Zhuanche extends Car {
   	constructor(number, name) {
   		super(number, name)		this.price = 2	}}class Trip {
   	constructor(car) {
   		this.car = car	}	start() {
   		console.log(`行程开始，名称: ${
     this.car.name},车牌号: ${
     this.car.number}`)	}	end() {
   		console.log('行程结束，价格: ' + (this.car.price * 5))	}}let car = new Kuaiche(100, '桑塔纳')let trip = new Trip(car)trip.start()trip.end()

3.2 面试题二

• 面试题目
  • 某停车场，分3层，每层100车位
  • 每个车位都能监控到车辆的驶入和离开
  • 车辆进入前，显示每层的空余车位数量
  • 车辆进入时，摄像头可识别车牌号和时间
  • 车辆出来时，出口显示器显示车牌号和停车时长
• 面试要求
  • 画出 UML 类图
  • 用 ES6 语法写出该示例
• UML 类图
  
• 代码

// 车辆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]	}	emtpyNum() {
   		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) {
   				num = num + 1			}		})		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.emtpyNum())park.in(car1)console.log('第二辆车进入')console.log(park.emtpyNum())park.in(car2)console.log('第一辆车离开')park.out(car1)console.log('第二辆车离开')park.out(car2)console.log('第三辆车进入')console.log(park.emtpyNum())park.in(car3)console.log('第三辆车离开')park.out(car3)

转载地址：http://acqwi.baihongyu.com/