时间:2021-07-01 10:21:17 帮助过:3人阅读
定义:将事物内部的每个状态分别封装成类,内部状态改变会产生不同行为。
主要解决:对象的行为依赖于它的状态(属性),并且可以根据它的状态改变而改变它的相关行为。
何时使用:代码中包含大量与对象状态有关的条件语句。
如何解决:将各种具体的状态类抽象出来。
js状态模式应用实例: 1、打篮球的时候运动员可以有正常状态、不正常状态和超常状态。 2、曾侯乙编钟中,'钟是抽象接口','钟A'等是具体状态,'曾侯乙编钟'是具体环境(Context)。
js状态模式优点: 1、封装了转换规则。 2、枚举可能的状态,在枚举状态之前需要确定状态种类。 3、将所有与某个状态有关的行为放到一个类中,并且可以方便地增加新的状态,只需要改变对象状态即可改变对象的行为。 4、允许状态转换逻辑与状态对象合成一体,而不是某一个巨大的条件语句块。 5、可以让多个环境对象共享一个状态对象,从而减少系统中对象的个数。
js状态模式缺点: 1、状态模式的使用必然会增加系统类和对象的个数。 2、状态模式的结构与实现都较为复杂,如果使用不当将导致程序结构和代码的混乱。 3、状态模式对"开闭原则"的支持并不太好,对于可以切换状态的状态模式,增加新的状态类需要修改那些负责状态转换的源代码,否则无法切换到新增状态,而且修改某个状态类的行为也需修改对应类的源代码。
js状态模式使用场景: 1、行为随状态改变而改变的场景。 2、条件、分支语句的代替者。
注意事项:在行为受状态约束的时候使用状态模式,而且状态不超过 5 个。
某某牌电灯,按一下按钮打开弱光,按两下按钮打开强光,按三下按钮关闭灯光。
// 将状态封装成不同类 const weakLight = function(light) { this.light = light } weakLight.prototype.press = function() { console.log('打开强光') this.light.setState(this.light.strongLight) } const strongLight = function(light) { this.light = light } strongLight.prototype.press = function() { console.log('关灯') this.light.setState(this.light.offLight) } const offLight = function(light) { this.light = light } offLight.prototype.press = function() { console.log('打开弱光') this.light.setState(this.light.weakLight) } const Light = function() { this.weakLight = new weakLight(this) this.strongLight = new strongLight(this) this.offLight = new offLight(this) this.currentState = this.offLight // 初始状态 } Light.prototype.init = function() { const btn = document.createElement('button') btn.innerHTML = '按钮' document.body.append(btn) const self = this btn.addEventListener('click', function() { self.currentState.press() }) } Light.prototype.setState = function(state) { // 改变当前状态 this.currentState = state } const light = new Light() light.init() // 打开弱光 // 打开强光 // 关灯
借助于 JavaScript 的委托机制,可以像如下实现状态模式:
const obj = { 'weakLight': { press: function() { console.log('打开强光') this.currentState = obj.strongLight } }, 'strongLight': { press: function() { console.log('关灯') this.currentState = obj.offLight } }, 'offLight': { press: function() { console.log('打开弱光') this.currentState = obj.weakLight } }, } const Light = function() { this.currentState = obj.offLight } Light.prototype.init = function() { const btn = document.createElement('button') btn.innerHTML = '按钮' document.body.append(btn) const self = this btn.addEventListener('click', function() { self.currentState.press.call(self) // 通过 call 完成委托 }) } const light = new Light() light.init()
相关推荐:
js设计模式:什么是装饰者模式?js装饰者模式的介绍
js设计模式:什么是中介者模式?js中介者模式的介绍
以上就是js设计模式:什么是状态模式?js状态模式介绍的详细内容,更多请关注Gxl网其它相关文章!