JS设计模式（状态模式）

JS设计模式（状态模式）

介绍

• 一个对象有状态变化
• 每次状态变化都会触发一个逻辑
• 不能总用 if…else 来控制

演示

UML类图

传统UML类图

简化后的UML类图

示例：
交通信号灯不同颜色的变化

// 状态
class State {
    constructor(color) {
        this.color = color
    }
    // 设置
    handle(context) {
        console.log(`turn to ${this.color} hight`)
        context.setState(this)
    }
}
// 主体
class Context {
    constructor() {
        this.state = null
    }
    getState() {
        return this.state
    }
    setState(state) {
        this.state = state
    }
}
//测试
let context = new Context()
let red = new State('red')
red.handle(context)
console.log(context.getState())

场景

有限状态机

• 有限个状态、以及在这些状态之间的变化
• 如交通信号灯
• 使用开源lib：javascript-state-machine
  有限状态机
  
  “收藏” 和 “取消”
  

写一个简单的Promise

Promise就是有限状态机

• Promise的三种状态：pending fullfilled rejected
• pending — fullfilled，pending — rejected
• 不能逆向变化

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: {
        // 成功的回调
        onResolve: function(state, data) {
            console.log(state, data)
            // state - 当前状态机实例；data - fsm.resolve(xxx) 传递的参数
            data.successList.forEach(fn => fn())
        },
        // 失败的回调
        onReject: function(state, data) {
            // state - 当前状态机实例；data - fsm.reject(xxx) 传递的参数
            data.fileList.forEach(fn => fn())
        }
    }
})

class MyPromise {
    constructor(fn) {
        this.successList = []
        this.failList = []

        fn(() => {
            // resolve 函数
            fsm.resolve(this)
        }, () => {
            // reject 函数
            fsm.reject(this)
        })
    }
    then(successFn, failFn) {
        this.successList.push(successFn)
        this.failList.push(failFn)
    }
}

//测试
function loadImg(src) {
    const promise = new MyPromise(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://125.77.202.90:6060/fileApi/Assets/test/0630d238-3015-4899-8d44-fec5e7d3f01b.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')
})

总结

设计原则验证

• 将状态对象和主题对象分离，状态的变化逻辑单独处理
• 符合开放封闭原则