问题

我们从下面2个问题去对状态模式进行探讨

状态模式有什么用？
如何实现状态模式？

观察者模式有什么用？

对状态进行监听

如何实现观察者模式？

实现思路

对红黄绿灯对状态监听，一旦状态改变，主体状态也变化

具体实现代码

// 状态 （红灯、绿灯、黄灯）
class State {
    constructor(color) {
        this.color = color
    }
    handle(context) {
        console.log(`return to ${this.color} light`)
        // 设置状态
        context.setState(this)
    }
}

// 主体
class Context {
    constructor() {
        this.state = null
    }
    // 获取状态
    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()) // 打印状态
// 黄灯亮了
yellow.handle(context)
console.log(context.getState()) // 打印状态
// 红灯亮了
red.handle(context)
console.log(context.getState()) // 打印状态

扩展例子（异步加载图片）

import StateMachine from 'javascript-state-machine'

// 状态机模型
let fsm = new StateMachine({
    init: 'pending', // 初始化状态
    transitions: [ // 转换
        {
            name:'resolve', // 事件名称
            from: 'pending',
            to: 'fullfilled'
        },
        {
            name: 'reject', // 事件名称
            from: 'pending',
            to: 'rejected'
        }
    ],
    methods: {
        // 监听 reslve
        onResolve: function (state, data) {
            // stata - 当前状态机实例； data - fsm.resolve(xxx) 传递的参数
            data.succesFnList.forEach(fn => fn())
        },
        // 监听 reject
        onReject: function (state, data) {
            // stata - 当前状态机实例；data - fsm.reject(xxx) 传递的参数            data.succesFnList.forEach(fn => fn())
            data.failFnList.forEach(fn => fn())
        }
    }
})

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

        fn(function () {
            // resolve 函数
            fsm.resolve(this)
        }, function () {
            // reject 函数
            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'

// 初始化状态机模型
let fsm = new StateMachine({
    init: '收藏',
    transitions: [
        {
            name: 'doStore',
            from: '收藏',
            to: '取消收藏'
        },
        {
            name: 'deleteStore',
            from: '取消收藏',
            to: '收藏'
        }
    ],
    methods: {
        // 监听执行收藏
        onDoStore: function () {
            alert('收藏成功') // 可以 post 请求
            updateText()
        },

        // 监听取消收藏
        onDeleteStore: function () {
            alert('已经取消收藏') // 可以 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)