@TOC
设计原则
- 何为“设计”？
- 五大设计原则
- 从设计到模式
- 简介 23 种设计模式
何为“设计”
-
即按照哪一种思路或者标准来实现功能
-
功能相同，可以有不同设计方案来实现
-
伴随着需求增加，设计的作用才能体现出来
按我的理解，通俗来说，设计（仅指编程设计）就是按照哪一种思路或者标准来实现功能。同样的功能，不同的设计思想都能用不同的方式来实现，前期效果可能一样，但是随着产品功能的增加和扩展，设计的作用才会慢慢的显示出来。
结合《UNIX/Linux 设计哲学》中提到的系统设计原则 github.com/wangfupeng1… 。可能有一些会跟传统思想有区别，但是请你重视它们。
- 准则1：小即是美
- 准则2：让每个程序只做好一件事
- 准则3：快速建立原型
- 准则4：舍弃高效率而取可移植性
- 准则5：采用纯文本来存储数据
- 准则6：充分利用软件的杠杆效应（软件复用）
- 准则7：使用 shell 脚本来提高杠杆效应和可移植性
- 准则8：避免强制性的用户界面
- 准则9：让每个程序都称为过滤器
- 十条小准则
- 允许用户定制环境
- 尽量使操作系统内核小而轻量化
- 使用小写字母并尽量简短
- 保护树木
- 沉默是金
- 并行思考
- 各部分之和大于整体
- 寻求 90% 的解决方案
- 更坏就是更好
- 层次化思考
无论你现在能否理解以上这些准则，我都希望你每隔一段时间（如半年）都重新自省一下，看自己结合自己的工作经历，是否又加深了这些准则的理解。
PS，这本书推荐大家买来阅读，JD 上已经买不到正版了，其他途径自己去找找吧。我是直接下载了电子版，然后打印出来阅读。
设计原则和设计模式都不难理解，因为：计算机越偏向底层就越简单、执拗、越傻（如必须使用二进制，不使用十进制），因为其本质是电子 + 数学。而越偏向于高层或者表层就要越聪明，越任性（如java语言，设计原则），因为其本质是应对变化和需求。
演示沉默是金 + 让每个程序成为过滤器
设计原则
S O L（Liskov） I D 五大设计原则
- S - 单一职责原则
- O - 开放封闭原则
- L - 李氏置换原则
- I - 接口独立原则
- D - 依赖导致原则
介绍
单一职责原则
- 一个程序只做好一件事
- 如果功能过于复杂就拆分开，每个部分保持独立。
开放封闭原则
- 对修改封闭，对扩展开放
- 即要设计一种机制，当需求发生变化时，根据这种机制扩展代码，而不是修改原有的代码。原有代码修改要重新测试，多人开发也很容易冲突
- 这是软件设计的终极目标
李氏置换原则
- 子类能覆盖父类
- 父类能出现的地方子类就能出现。
- JS 中子类继承父类的场景较少，又不是强类型语言，因此体现较少。
接口隔离原则
- 保持接口的单一独立，避免出现“胖接口”。
- JS中没有接口(typescript例外)，因此体现较少。
- 类似于单一职责原则，只不过前者说的比较统一，后者是单独对接口的规定。
依赖倒置原则
- 面向接口编程，依赖于抽象而不依赖于具体。写代码时用到具体类时，不与具体类交互，而与具体类的上层接口交互。
- 使用方只关注接口而不关注具体类的实现
- JS中使用较少（没有接口 & 弱类型） 只关注输入输出接口，内部实现不用管
设计原则总结
S O 体现较多，详细介绍 L I D体现较少，但是要了解其用意
举例说明
后三个原则是基于高级面向对象语言语法的（如 java），找不到太合适的例子，就先以常见的 Promise 来解释一下前两个原则S O。
// 加载图片
function loadImg(src) {
var promise = new Promise(function (resolve, reject) {
var img = document.createElement('img')
img.onload = function () {
resolve(img)
}
img.onerror = function () {
reject('图片加载失败')
}
img.src = src
})
return promise
}
var src = 'https://www.imooc.com/static/img/index/logo_new.png'
var result = loadImg(src)
result.then(function (img) {
console.log('img.width', img.width)
return img
}).then(function (img) {
console.log('img.height', img.height)
}).catch(function (ex) {
// 统一捕获异常
console.log(ex)
})
- 单一职责原则：每个
then中的逻辑只做好一件事，如果要做多个就用多个then - 开放封闭原则：如果这个需求要修改，那去扩展
then即可，现有的逻辑不用修改，即对扩展开放、对修改封闭
这里引申两点：
- 其实 S 和 O 是相符现成的，相互依赖
- 开放封闭原则的好处不止于此，从整个软件开发流程看，减少现有逻辑的更改，也会减少测试的成本
从设计到模式
-
设计
-
模式
-
分开
-
从设计到模式
“设计”和“模式”应该分开看。“设计”即设计原则、设计思想，“模式”即一些固话了的符合设计原则的既定方式、成型的可套用的模板。先有“设计”后有“模式”，因此应该“从设计到模式”，不能将“设计模式”作为一个词来称呼。
这并不是故意咬文爵字。
（分开之后，你可能会有一种豁然开朗的感觉）
简介 23 种设计模式
以下是所有 23 种设计模式。一些是前端常用且能找到经典使用场景的，一些是不常用或者找不到代表性的使用场景的。根据使用的不同，讲解时也会区分优先级，重点的模式详细讲解。
- 创建型模式
- 工厂模式（工厂方法模式，抽象工厂模式，建造者模式）
- 单例模式
- 原型模式
- 结构型模式
- 适配器模式
- 装饰器模式
- 代理模式
- 外观模式
- 桥接模式
- 组合模式
- 享元模式
- 行为型模式
- 策略模式
- 模板方法模式
- 观察者模式
- 迭代器模式
- 职责连模式
- 命令模式
- 备忘录模式
- 状态模式
- 访问者模式
- 中介者模式
- 解释器模式
分优先级
-
前端常用设计模式，详讲
-
前端非常用设计模式，略讲
-
前端少用设计模式，介绍
接下来说两个问题：
- 我如何讲解设计模式？
- 介绍以及举例（生活中易理解的示例）
- 画 UML 类图写 demo 代码
- 结合经典应用场景，讲解该设计模式如何被使用（如果该设计模式没有经典应用，就不讲）
- 你如何学习设计模式？
- 明白每个设计的目的和道理
- 通过经典应用体会它的真正使用场景
- 自己编码时多思考，尽量模仿
最后说明一下。虽然设计模式案例说应该基于 java 学习，因为 java 具有完善的面向对象语言编程的语法。但是现在我们限定的前提环境是前端 JS ，那就不应该再按照 java 的模式去讲解设计模式，否则就是削足适履。
- JS 和 java 语法不一样；
- 前端和 java 的应用场景也不同，如前端不会考虑并发、内存泄露
面试题
第一题
打车时，可以打专车或者快车。任何车都有车牌号和名称 不同车价格不同，快车每公里1元，专车每公里2元 行程开始时，显示车辆信息 行程结束时，显示打车金额（假定行程就5公里）
要求：
画出UML类图
用ES6语法写出该示例
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层，每层100车位
每个车位都能监控到车辆的驶入和离开
车辆进入前，显示每层的空余车位数量
车辆进入时，摄像头可识别车牌号和时间
车辆出来时，出口显示器显示车牌号和停车时长
// 车
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]
}
emptyNum() {
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('A1')
const car2 = new Car('A2')
const car3 = new Car('A3')
console.log('第一辆车进入')
console.log(park.emptyNum())
park.in(car1)
console.log('第二辆车进入')
console.log(park.emptyNum())
park.in(car2)
console.log('第一辆车离开')
park.out(car1)
console.log('第二辆车离开')
park.out(car2)
console.log('第三辆车进入')
console.log(park.emptyNum())
park.in(car3)
console.log('第三辆车离开')
park.out(car3)
