设计模式(8): 状态模式

这次记录的是设计模式中的状态模式，也是介绍Js中常用的设计模式中的最后一个，一起来看看吧!

什么是状态模式
状态模式的使用优势
如何实现状态模式
使用javascript-state-mechine状态管理插件做一个简易的Promise

这里还是按照以上几个方面对状态模式进行记录：

• 什么是状态模式：
  在实际的代码开发中，大部分的代码实现都是基于对数据的操作控制，根据不同的数据展示出不同的抽象称为状态。而前端中经常做的就是根据不同的状态切换展示不同的抽象内容。而状态模式就是一种迎合在多种状态间切换的设计设计模式。状态模式中定义一个对象，这个对象可以管理其状态并使得应用做出相应的响应，它主要由两个部分组成：
  (1) 环境类：拥有一个状态成员，并可以修改其状态并做出相应的反应
  (2) 状态类： 表示一种状态，包含其相应的处理方法
• 状态模式的优势:
  状态模式用于维护系统中的状态，控制状态变化的处理，使得代码逻辑更加的清晰，易于整个系统的维护和扩展。
• 使用e6语法实现一个简单的状态模式
  (实现交通信号灯之间的切换)

// 定义一个状态类
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;
	}
}

// 测试：
const 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())

• 使用javascript-state-machine插件实现一个简单的Promise
  分析：Promise是es6语法中用于解决回调地狱的一个实现，而javascript-state-machine插件是一个对状态进行管理的工具(关于javascript-state-machine插件的使用这里就不介绍了，大家可以到github上去查看)。实现Promise的最重要的三点就是实现Promise的三个状态：pendding, fullfilled, rejected。 根据状态的变化进行相应的回调调用

import StateMachine from "javascript-state-machine"
//定义Promise的三个状态:
const state = new StateMachine({
	init: "pendding",
	transitions: [
		{
			name: "resolve",
			from: "pendding",
			to: "fullfilled"
		},
		{
			name: "reject",
			from: "pendding",
			to: "rejected"
		}
	],
	methods: {
		onResolve: function(state, data){
			//遍历执行Promise中所有的成功函数: state为当前状态机对象，data为传递给这个函数的参数
			data.successList.forEach(fn => fn())
		},
		onReject: function(state, err){
			data.failList.forEach(fn => fn())
		}
	}
})

// 定义一个类promise类;
class MyPromise{
	 constructor(fn){
	 	this.successList = []
	 	this.failList = []
	 	fn(function(){
	 		// 这是预定义的resolve函数
	 		state.resolve(this)
	 	}, function(){
	 		// 这是预定义的reject函数
	 		state.reject(this)
	 	})
	 }
	 then(successFn, failFn) {
        this.successList.push(successFn)
        this.failList.push(failFn)
    }
}

这里只是很简单的实现一下Promise来演示一下状态模式的内容，所以只是简单的写了一点点。

---

好了，关于状态模式的内容就简单说到这里了 大家 加油！！