JavaScript 设计模式----设计模式初识

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)