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

分手后的思念是犯贱 2023-02-15 14:58 25阅读 0赞

#### 一、设计原则概念 ####

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

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

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

*  允许用户定制环境
 *  尽量使操作系统内核小而轻量化
 *  使用小写字母并尽量简短
 *  沉默是金
 *  各部分之和大于整体
 *  寻求 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.  创建型模式，如下所示：

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

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

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

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

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

#### 四、设计模式的面试题 ####

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()

1.  某停车场，分 3 层，每层 100 车位。每个车位都能监控到车辆的驶入和离开。车辆进入前，显示每层的空余车位数量。车辆进入时，摄像头可识别车牌号和时间。车辆出来时，出口显示器显示车牌号和停车时长。那么问题是，画出 `UML` 类图，用 `ES6` 语法写出该示例。
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]
        }
        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)