js-状态模式

class State{
    constructor(color){
        this.color = color
    }
    handle(context){
        console.log(`turn 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')
console.log(context.getState())
let yellow = new State('yellow')
console.log(context.getState())
let red = new State('red')
console.log(context.getState())

DEMO库：javascript-state-machine

import StateMachine from 'javascript-state-machine'

let fsm = new StateMachine({
    init:'收藏',
    transitions:[
        {
            name:'doStore',
            from:'收藏',
            to:'取消收藏'
        },
        {
            name:'deleteStore',
            from:'取消收藏',
            to:'收藏'
        }
    ],
    methods:{
        //监听执行收藏
        onDoStore:function(){
            alert('收藏成功')
            upateText()
        },
        //监听取消收藏
        onDeleteStore:function(){
            alert('已经取消收藏')
            updateText()
        }
    }
})

let $btn = $('#btn')

$btn.click(function(){
    if (fsm.is('收藏')){
         fsm.doStore()
    }else{
         fsm.deleteStore()
    }
})

updateText(){
    $btn.text(fsm.state)
}