javascript之状态模式

warnerwu 发布于2019-08-26 10:57 / 334人阅读

摘要：状态模式状态模式将事物内部的每个状态分别封装成类内部状态改变会产生不同行为。将状态封装成不同类打开强光关灯打开弱光初始状态按钮非面向对象实现的状态模式借助于的委托机制可以像如下实现状态模式打开强光关灯打开弱光按钮通过完成委托

状态模式

状态模式: 将事物内部的每个状态分别封装成类, 内部状态改变会产生不同行为。

优点: 用对象代替字符串记录当前状态, 状态易维护

缺点: 需编写大量状态类对象
场景 demo
某某牌电灯, 按一下按钮打开弱光, 按两下按钮打开强光, 按三下按钮关闭灯光。

//  将状态封装成不同类
const weakLight = function(){
  this.light = light
}
weakLight.prototype.press = function(){
  console.log("打开强光")
  this.light.setState(this.light.strongLight)
}
const strongLight = function(){
  this.light= light
}
strongLight.prototype.press = function(){
  console.log("关灯")
  this.light.setState(this.light.offLight)
}
const offLight = function(){
  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 = doucment.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()

云服务器私有云 Java设计模式之（五）——代理模式状态模式 java状态模式代码 javascript命令模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106899.html

设计模式手册之状态模式

摘要：什么是状态模式状态模式对象行为是基于状态来改变的。原文地址设计模式手册之状态模式优缺点优点封装了转化规则，对于大量分支语句，可以考虑使用状态类进一步封装。 1. 什么是状态模式？状态模式：对象行为是基于状态来改变的。内部的状态转化，导致了行为表现形式不同。所以，用户在外面看起来，好像是修改了行为。 Webpack4系列教程(17篇) + 设计模式手册(16篇)：GitHub地址博...

call_me_R 2019-08-26 13:34 评论0 收藏0
设计模式手册之状态模式

摘要：什么是状态模式状态模式对象行为是基于状态来改变的。原文地址设计模式手册之状态模式优缺点优点封装了转化规则，对于大量分支语句，可以考虑使用状态类进一步封装。 1. 什么是状态模式？状态模式：对象行为是基于状态来改变的。内部的状态转化，导致了行为表现形式不同。所以，用户在外面看起来，好像是修改了行为。 Webpack4系列教程(17篇) + 设计模式手册(16篇)：GitHub地址博...

Faremax 2019-07-31 10:09 评论0 收藏0
每天一个设计模式之享元模式

摘要：作者按每天一个设计模式旨在初步领会设计模式的精髓，目前采用和两种语言实现。享元模式提醒我们将一个对象的属性划分为内部和外部状态。作者按：《每天一个设计模式》旨在初步领会设计模式的精髓，目前采用javascript和python两种语言实现。诚然，每种设计模式都有多种实现方式，但此小册只记录最直截了当的实现方式 :) 个人技术博客-godbmw.com 欢迎来玩! 每周至少 1 篇原创...

jone5679 2019-08-23 14:11 评论0 收藏0
每天一个设计模式之享元模式

摘要：作者按每天一个设计模式旨在初步领会设计模式的精髓，目前采用和两种语言实现。享元模式提醒我们将一个对象的属性划分为内部和外部状态。作者按：《每天一个设计模式》旨在初步领会设计模式的精髓，目前采用javascript和python两种语言实现。诚然，每种设计模式都有多种实现方式，但此小册只记录最直截了当的实现方式 :) 个人技术博客-godbmw.com 欢迎来玩! 每周至少 1 篇原创...

ormsf 2019-07-30 18:40 评论0 收藏0
前端进阶资源整理

摘要：前端进阶进阶构建项目一配置最佳实践状态管理之痛点分析与改良开发中所谓状态浅析从时间旅行的乌托邦，看状态管理的设计误区使用更好地处理数据爱彼迎房源详情页中的性能优化从零开始，在中构建时间旅行式调试用轻松管理复杂状态如何把业务逻辑这个故事讲好和前端进阶 webpack webpack进阶构建项目(一) Webpack 4 配置最佳实践 react Redux状态管理之痛点、分析与...

BlackMass 2019-08-23 12:36 评论0 收藏0