我们这一期文集是要讲解设计模式的，但是我们之前从面向对象到设计原则等，讲了很多的篇幅，知道今天这篇文章，才真正提到了“模式”二字，坐了那么多的铺垫，只是为了让大家有一个更深的了解，其实“设计模式”四个字中，“设计”和“模式”是相互分开的，设计就是我们之前讲到的设计原则，模式就是根据之前的设计原则，总结出的一些固有的模板。虽然设计和模式之间是分开的，但是其也有着一定的关联，今天我们就来讲一讲“从设计到模式”，讲完这个过渡，我们就可以进入设计模式了。
从设计到模式
设计模式分以下几种类型
- 创建型，如何生成一个对象或类
- 组合型，对象或者类是什么样的组合形式
- 行为型，涵盖了一些常用的行为。
这三种类型的模式，分别分步在以下23种模式中
创建型
- 工厂模式（工厂方法模式，抽象工厂模式，建造者模式）
- 单例模式
- 原型模式
组合型
- 适配器模式
- 装饰器模式
- 代理模式
- 外观模式
- 桥接模式
- 组合模式
- 享元模式
行为型
- 策略模式
- 模板方法模式
- 观察者模式（前端使用最广泛的模式之一）
- 迭代器模式（前端常用，尤其是ES6语法中）
- 职责链模式
- 命令模式
- 备忘录模式
- 状态模式（前端应用广，比如redux这样的状态机）
- 访问者模式
- 中介者模式
- 解释器模式
可以看到，上面三种类型23种设计模式也是比较多的，作为前端开发，我们没必要把每一个都弄明白，因为有的模式在前端开发JS中用到的还是比较少的，我们接下来的文章将针对以上这些设计模式做讲解，有主有次，对于前端常用的设计模式，我们将花大篇幅去讲解。对于不常用的，我们只做简单的介绍。
通过真实面试题感受设计模式
因本文为真正具体到某设计模式讲解前的一个铺垫，为了让大家对设计模式有一个较深的认识和较真切的感受，这里先通过两个真实的面试题来感受一下其实际中的应用场景，因为设计模式的东西，不像某个工具或者框架，我们直接就可以上来做Demo，我们只能先通过一些应用场景，让大家对设计模式有一个初步的认识。
下面来看第一题：
- 打车时，可以打专车或者快车，任何车都有车牌号和名称
- 不同车价格不同，快车每公里1元，专车每公里2元
- 行程开始时，显示车辆信息
- 行程结束时选择打车金额（假定行程5公里）
- 画出UML类图
- 用ES6语法写出该示例
通过对上面的题干分析，我们大概有下面的思路
- “任何车都有车牌号和名称”，说明我们需要一个父类，里面包含车牌号和名称两个属性，而“专车”和“快车”是两个子类。里面包含不同的价格
- "行程"和“车”的关系，题干中，我们不能理解，行程只和车有关，而和什么样的车没有关系，也就是“行程''这个类只需要和父类有关。也就是关联关系
- “金额”的地位，我们也不能分析出，金额实际是属于行程这个类的，因为只有行程才能有金额，车不开是没有金额的
-
结合我们上面的分析，我们画下UML类图。如下
其中，对于上面的UML类图可以看出来，‘Kuaiche’和‘Zhuanche’和‘Car’是继承关系，而‘Trip’和'Car'是关联关系。接下来，我们就可以把上面抽象的
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()
看一下运行结果（自己找ES6环境）
我们通过上面的分析--画图--代码实现了这样一个面试题的要求，同时，也在这里对设计模式有一个比较直观的认识，后续我们会做更详细的讲解。
到这里，我们通过具体的代码，感受了设计和模式，为我们后面学习设计模式做足了铺垫，下面，我们就可以对设计模式，更详细的讲解了，跟紧喽！
网友评论