JavaScript 设计模式----设计模式初识
1. 从设计到模式
设计
模式
- 是一个
既定的，通过概念总结出来的一些模板，一些可以效仿的固定的东西
- 设计模式就是根据设计原则这个指导思想，结合日常开发经验，总结出来的在日常开发过程中应该用到的
固定的样式、模板等既定的东西
如何学习设计模式
- 明白每个设计的道理和用意
- 通过经典应用体会设计模式的真正
使用场景
- 编码时多思考，尽量模仿
2. 设计模式简介
2.1 设计模式类型
创建型
组合型
- 讲解对象或类该是怎样的
组合形式
- 有时候单靠一个类，无法满足既定的需求
- 可以通过组合的形式来满足
行为型
- 涵盖了日常开发中的一些
常用的行为
- 这些常用行为该怎么去
布置、开发才能满足我们设计原则的要求
2.2 创建型
工厂模式（工厂方法模式、抽象工厂模式、建造者模式）单例模式原型模式
2.3 结构型
适配器模式装饰器模式代理模式外观模式桥接模式组合模式享元模式
2.4 行为型
策略模式模板方法模式观察者模式迭代器模式职责链模式命令模式备忘录模式状态模式访问者模式中介者模式解释器模式
3. 设计原则面试题
3.1 面试题一
-
面试题目
- 打车时，可以打专车或快车，任何车都有车牌号和名称
- 不同车价格不同，快车每公里1元，专车每公里2元
- 行程开始时，显示车辆信息
- 行程结束时，显示打车金额（假定行程就5公里）
-
面试要求
-
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 类图
代码
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)