zoukankan      html  css  js  c++  java
  • JS常用的设计模式(17)—— 状态模式

    状态模式主要可以用于这种场景

    1 一个对象的行为取决于它的状态

    2 一个操作中含有庞大的条件分支语句

    回想下街头霸王的游戏。

    隆有走动,攻击,防御,跌倒,跳跃等等多种状态,而这些状态之间既有联系又互相约束。比如跳跃的时候是不能攻击和防御的。跌倒的时候既不能攻击又不能防御,而走动的时候既可以攻击也可以跳跃。

    要完成这样一系列逻辑, 常理下if else是少不了的. 而且数量无法估计, 特别是增加一种新状态的时候, 可能要从代码的第10行一直改到900行.

    if ( state === 'jump' ){ 
       if ( currState === 'attack' || currState === 'defense' ){ 
         return false; 
       } 
    }else if ( state === 'wait' ){ 
       if ( currState === 'attack' || currState === 'defense' ){ 
         return true; 
       } 
    } 

    为了消灭这些if else, 并且方便修改和维护, 我们引入一个状态类.

    var StateManager = function(){ 
      var currState = 'wait'; 
      var states = { 
        jump: function( state ){ 
        }, 
        wait: function( state ){ 
        }, 
        attack: function( state ){ 
        }, 
        crouch: function( state ){ 
        }, 
        defense: function( state ){ 
          if ( currState === 'jump'  ){ 
              return false;  //不成功,跳跃的时候不能防御 
          } 
        //do something;     //防御的真正逻辑代码, 为了防止状态类的代码过多, 应该把这些逻辑继续扔给真正的fight类来执行. 
        currState = 'defense'; //  切换状态 
        } 
      } 
      var changeState = function( state ){ 
        states[ state ] && states[ state ](); 
      } 
      return { 
          changeState  : changeState 
      } 
    } 
    var stateManager = StateManager(); 
    stateManager.changeState( 'defense' ); 

    通过这个状态类,可以把散落在世界各地的条件分支集中管理到一个类里,并且可以很容易的添加一种新的状态。而作为调用者,只需要通过暴露的changeState接口来切换人物的状态。

    /***************************分界线1******************************************/

    GOF提出的23种设计模式,至此已经写完大半。还有一些要么是js里不太适用,要么是js中已有原生自带的实现,所以就没再去深究。这2篇文章里 的大部分例子都来自或改写自工作和学习中的代码。我对设计模式的看法是不用刻意去学习设计模式,平时我们接触的很多代码里已经包含了一些设计模式的实现。 我的过程是读过prototype和jquery的源码后,回头翻设计模式的书,发现不知觉中已经接触过十之六七。

    同样在实际的编码中也没有必要刻意去使用一些设计模式。就如同tokyo hot 32式一样,在一场友好的papapa过程中,没有必要去刻意使用某种姿势。一切还是看需求和感觉。

  • 相关阅读:
    原生js实现购物车相关功能
    js+css让背景图片动起来
    彻底搞清楚rgba与opacity/filter的区别
    国家对五险一金的详细缴纳说明
    原生js+css实现二级伸缩菜单
    原生js实现table表格的各行变色功能
    原生js实现二级导航功能
    app下载文件,保存文件,展示文件(以图片文件为例)
    实现锚点跳转的两种方式及注意事项
    vue刷新页面及注意事项
  • 原文地址:https://www.cnblogs.com/jymz/p/4273974.html
Copyright © 2011-2022 走看看