設計原則

設計原則

何爲設計原則？
五大設計原則
從設計到模式
23中設計模式

何爲設計？

• 按照哪種思路或者標準來實現功能
• 功能相同，能夠有不一樣的設計方案來實現
• 隨着需求增長，設計的做用才能體現出來

unix/linux設計哲學

1) 小便是美
2) 讓每一個程序只作好好一件事
3) 快速創建原型
4) 捨棄高效率而取可移植性
5) 採用純文原本存儲數據
6) 充分利用軟件的槓桿效應（軟件複用）
7) 使用shell腳原本提升效應和可移植性
8) 避免強制性的用戶界面
9) 讓每一個程序都稱爲過濾器（shell的管道操做）
10) 容許用戶定製環境
11) 儘可能使用操做系統內核小而輕量化
12) 使用小寫字母並儘可能簡短
13) 沉默是金（在命令行的輸出有體現）
14) 各部分之和大於總體
15) 尋求90%的解決方案

SOLID五大設計原則

S - 單一職責原則

• 一個程序只作好一件事
• 若是功能過於複雜就拆分開，每一個部分保持獨立

O - 開放封閉原則（important）

• 對拓展開放，對修改封閉
• 增長需求時，拓展新代碼，而非修改已有代碼
• 這是軟件設計的終極目標

L - 李氏置換原則

• 子類可以覆蓋父類
• 父類能出現的地方子類就能出現
• js中使用較少（弱類型&繼承使用較少）

I - 接口獨立原則

• +保持接口的單一獨立，避免出現「胖接口」
• js中沒有接口（typescript例外），使用較少
• 相似於單一職責原則，這裏更關注接口

D - 依賴致使原則

• 面向接口編程，依賴於抽象而不依賴於具體
• 使用方只關注接口而不關注具體類的實現
• js使用較少（沒有接口&弱類型）

在js中：

• S O 體現較多，L I D 體現較少，可是能夠了解其用意

例如：在promise中運用了S O：

• 單一職責原則：每一個then中的邏輯只作好一件事
• 開放封閉原則: 如過增長新需求，拓展then
• 對拓展開放，對修改封閉

function loadImg(src) {
    var promise = new Promise(function (reslove, reject)  {
        var img = document.creatElement('img')
        img.onload = function() {
            reslove(img)
        }
        img.src = src
    })
    return promise
}

var src = '.....'
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)
})

---

從設計到模式

23種設計模式

組合型

• 工廠模式（工廠方法模式，抽象工廠模式，建立者模式）
• 單例模式
• 原型模式

組合型

• 適配器模式
• 裝飾器模式
• 代理模式
• 外觀模式
• 適配器模式
• 裝飾器模式
• 代理模式
• 外觀模式
• 橋鏈接模式
• 組合模式
• 享元模式

行爲型

• 策略模式
• 模板方法模式
• 觀察者模式
• 迭代器模式
• 職責連模式
• 命令模式
• 備忘錄模式
• 狀態模式
• 訪問者模式
• 中介者模式
• 解釋器模式

例子

one

有繼承有引用

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

two

都爲引用

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