前端 JS 设计模式之设计原则

一、设计原则概念

1. 设计的描述，即按照哪一种思路或者是标准来实现概念。功能相同，可以有不同的设计方案来实现。伴随着需求增加，设计的作用才能体现出来。
2. 设计的准则，如下所示：

• 准则一，小即是美
• 准则二，让每个程序只做好一件事
• 准则三，快速建立原型
• 准则四，舍弃高效率而取可移植性
• 准则五，采用纯文本来存储数据
• 准则六，充分利用软件的杠杆效应，软件复用
• 准则七，使用 shell 脚本来提高杠杆效应和可移植性
• 准则八，避免强制性的用户界面
• 准则九，让每个程序都称之为过滤器

3. 设计的小准则，如下所示：

• 允许用户定制环境
• 尽量使操作系统内核小而轻量化
• 使用小写字母并尽量简短
• 沉默是金
• 各部分之和大于整体
• 寻求 90% 的解决方案

二、SOLID 五大设计原则

1. SOLID，S 表示单一职责原则，O 表示开放封原则，L 表示李氏置换原则，I 表示接口独立原则，D 表示依赖导致原则。
2. S 表示单一职责原则，一个程序只做好一件事。如果功能过于复杂就拆分开，每个部分保持独立。
3. O 表示开放封原则，对扩展开放，对修改封闭。增加需求时，扩展新代码，而非修改已有代码。这是软件设计的终极目标。
4. L 表示李氏置换原则，子类能覆盖父类，父类出现的地方子类就能出现。JS 中使用较少，弱类型和继承使用较少。
5. I 表示接口独立原则，保持接口的单一独立，避免出现"胖接口"。JS 中没有接口，Typescript 例外，使用较少。类似于单一职责原则，这里更关注接口。
6. D 表示依赖导致原则，面向接口编程，依赖于抽象而不依赖于具体。使用方法只关注接口而不关注具体类的实现。JS 中使用较少，没有接口和弱类型。
7. 设计原则的总结，SO 体现较多，需要理解，LID 体现较少，需要了解。
8. 用 Promise 来说明 SO，如下所示：

• 单一职责原则，每个 then 中的逻辑只做好一件事
• 开放封闭原则，如果新增需求，扩展 then
• 对扩展开放，对修改封闭

三、设计模式

1. 设计模式，从设计到模式，可以理解为 设计、模式、分开和从设计到模式。
2. 23 种设计模式，分为创建型、组合型和行为型。
3. 创建型模式，如下所示：

• 工厂模式，工厂方法模式，抽象工厂模式和建造者模式
• 单例模式
• 原型模式

4. 结构型模式，如下所示：

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

5. 行为型模式，如下所示：

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

四、设计模式的面试题

1. 打车时，可以打专车和快车，任何车都有车牌号和名称。不同车价格不同，快车每公里 1 元，专车每公里 2 元。行程开始时，显示车牌信息。行程结束时，显示打车金额，假定行程就 5 公里。那么问题是，画出 UML 类图，用 ES6 语法写出该示例。
2. 解决题目的代码，如下所示：

// 车
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.price}`)
    }
    end() {
        console.log('行程结束，价格: ' + (this.car.price * 5))
    }
}

// 测试
let car = new Kuaiche(100, '桑塔纳')
let trip = new Trip(car)
trip.start()
trip.end()

3. 某停车场，分 3 层，每层 100 车位。每个车位都能监控到车辆的驶入和离开。车辆进入前，显示每层的空余车位数量。车辆进入时，摄像头可识别车牌号和时间。车辆出来时，出口显示器显示车牌号和停车时长。那么问题是，画出 UML 类图，用 ES6 语法写出该示例。
4. 解决题目的代码，如下所示：

// 车
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)