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

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

    • 1. 从设计到模式
    • 2. 设计模式简介
        • 2.1 设计模式类型
        • 2.2 创建型
        • 2.3 结构型
        • 2.4 行为型
    • 3. 设计原则面试题
        • 3.1 面试题一
        • 3.2 面试题二

1. 从设计到模式

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

2. 设计模式简介

2.1 设计模式类型

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

2.2 创建型

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

2.3 结构型

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

2.4 行为型

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

3. 设计原则面试题

3.1 面试题一

  • 面试题目

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

    • 画出 UML 类图
    • 用 ES6 语法写出该示例
  • UML 类图
    JavaScript 设计模式----设计模式初识_第1张图片

  • 代码

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 类图
    JavaScript 设计模式----设计模式初识_第2张图片
  • 代码
// 车辆
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)

你可能感兴趣的:(#,JS,设计模式,设计模式,javascript,JS,设计模式)