前端 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)