2020.01.16 晚 22:04

問題

我們從下面2個問題去對狀態(tài)模式進行探討

• 狀態(tài)模式有什么用？
• 如何實現(xiàn)狀態(tài)模式？

觀察者模式有什么用？

對狀態(tài)進行監(jiān)聽

如何實現(xiàn)觀察者模式？

實現(xiàn)思路

對紅黃綠燈對狀態(tài)監(jiān)聽，一旦狀態(tài)改變，主體狀態(tài)也變化

具體實現(xiàn)代碼

// 狀態(tài) （紅燈、綠燈、黃燈）
class State {
    constructor(color) {
        this.color = color
    }
    handle(context) {
        console.log(`return to ${this.color} light`)
        // 設置狀態(tài)
        context.setState(this)
    }
}

// 主體
class Context {
    constructor() {
        this.state = null
    }
    // 獲取狀態(tài)
    getState() {
        return this.state
    }
    setState(state) {
        this.state = state
    }
}

// test
let context = new Context()

let green = new State('green')
let yellow = new State('yellow')
let red = new State('red')

// 綠燈亮了
green.handle(context)
console.log(context.getState()) // 打印狀態(tài)
// 黃燈亮了
yellow.handle(context)
console.log(context.getState()) // 打印狀態(tài)
// 紅燈亮了
red.handle(context)
console.log(context.getState()) // 打印狀態(tài)

擴展例子（異步加載圖片）

import StateMachine from 'javascript-state-machine'

// 狀態(tài)機模型
let fsm = new StateMachine({
    init: 'pending', // 初始化狀態(tài)
    transitions: [ // 轉換
        {
            name:'resolve', // 事件名稱
            from: 'pending',
            to: 'fullfilled'
        },
        {
            name: 'reject', // 事件名稱
            from: 'pending',
            to: 'rejected'
        }
    ],
    methods: {
        // 監(jiān)聽 reslve
        onResolve: function (state, data) {
            // stata - 當前狀態(tài)機實例； data - fsm.resolve(xxx) 傳遞的參數(shù)
            data.succesFnList.forEach(fn => fn())
        },
        // 監(jiān)聽 reject
        onReject: function (state, data) {
            // stata - 當前狀態(tài)機實例；data - fsm.reject(xxx) 傳遞的參數(shù)            data.succesFnList.forEach(fn => fn())
            data.failFnList.forEach(fn => fn())
        }
    }
})

// 定義 Promise
class MyPromise {
    constructor(fn) {
        this.succesFnList = []
        this.failFnList = []

        fn(function () {
            // resolve 函數(shù)
            fsm.resolve(this)
        }, function () {
            // reject 函數(shù)
            fsm.reject(this)
        })
    }
    then(succesFn, failFn) {
        this.succesFnList.push(succesFn)
        this.failFnList.push(failFn)
    }
}


function loadImg(src) {
    const promise = new Promise(function (resolve, reject){
        let img = document.createElement('img')
        img.onload = function () {
            resolve(img)
        }
        img.onerror = function () {
            reject()
        }
        img.src = src
    })
    return promise
}

let src = 'http://p9.qhimg.com/bdm/960_593_0/t01c07a94bf0136dd29.jpg'
let result = loadImg(src)

result.then(function () {
    console.log('ok1')
},function () {
    console.log('fail1')
})

result.then(function () {
    console.log('ok2')
},function () {
    console.log('fail2')
})

簡單 promise

import StateMachine from 'javascript-state-machine'
import $ from 'jquery'

// 初始化狀態(tài)機模型
let fsm = new StateMachine({
    init: '收藏',
    transitions: [
        {
            name: 'doStore',
            from: '收藏',
            to: '取消收藏'
        },
        {
            name: 'deleteStore',
            from: '取消收藏',
            to: '收藏'
        }
    ],
    methods: {
        // 監(jiān)聽執(zhí)行收藏
        onDoStore: function () {
            alert('收藏成功') // 可以 post 請求
            updateText()
        },

        // 監(jiān)聽取消收藏
        onDeleteStore: function () {
            alert('已經(jīng)取消收藏') // 可以 post 請求
            updateText()
        }
    }
})

let $btn = $('#btn1')

// 按鈕點擊事件
$btn.click(function () {
    if(fsm.is('收藏')){
        fsm.doStore()
    } else {
        fsm.deleteStore()
    }
})

// 更新按鈕的文案
function updateText() {
    $btn.text(fsm.state)
}

// 初始化文案
updateText()

面試題

// 車輛
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 = false
    }
}

// 測試-------------------------
// 初始化停車場
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(100)
const car2 = new Car(200)
const car3 = new Car(300)

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)