本篇文章给大家带来的内容是关于js设计模式：什么是状态模式？js状态模式介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
什么是状态模式？
定义：将事物内部的每个状态分别封装成类，内部状态改变会产生不同行为。
主要解决：对象的行为依赖于它的状态（属性），并且可以根据它的状态改变而改变它的相关行为。
何时使用：代码中包含大量与对象状态有关的条件语句。
如何解决：将各种具体的状态类抽象出来。
js状态模式应用实例： 1、打篮球的时候运动员可以有正常状态、不正常状态和超常状态。 2、曾侯乙编钟中，'钟是抽象接口','钟A'等是具体状态，'曾侯乙编钟'是具体环境（Context）。
js状态模式优点： 1、封装了转换规则。 2、枚举可能的状态，在枚举状态之前需要确定状态种类。 3、将所有与某个状态有关的行为放到一个类中，并且可以方便地增加新的状态，只需要改变对象状态即可改变对象的行为。 4、允许状态转换逻辑与状态对象合成一体，而不是某一个巨大的条件语句块。 5、可以让多个环境对象共享一个状态对象，从而减少系统中对象的个数。
js状态模式缺点： 1、状态模式的使用必然会增加系统类和对象的个数。 2、状态模式的结构与实现都较为复杂，如果使用不当将导致程序结构和代码的混乱。 3、状态模式对"开闭原则"的支持并不太好，对于可以切换状态的状态模式，增加新的状态类需要修改那些负责状态转换的源代码，否则无法切换到新增状态，而且修改某个状态类的行为也需修改对应类的源代码。
js状态模式使用场景： 1、行为随状态改变而改变的场景。 2、条件、分支语句的代替者。
系统共有：常规管理，公告管理，新闻管理，产品管理，采购订单管理，留言反馈管理，短信管理，用户管理，管理员管理，在线邮件管理，系统模板管理，图品缩略图及水印管理，Flash幻灯片管理，统计调查管理，系统数据调用管理，自定义扩展管理，语言标签库管理。18个主要功能模块组成。5月10号更新：1、全新双语模式设计开发2、多级动态JS菜单，支持在线添加，修改，删除3、新增单页管理模块，如扩展企业简介，联系方
注意事项：在行为受状态约束的时候使用状态模式，而且状态不超过 5 个。
场景 demo
某某牌电灯，按一下按钮打开弱光，按两下按钮打开强光，按三下按钮关闭灯光。
// 将状态封装成不同类
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()相关推荐：
