轻松掌握JavaScript状态模式_javascript技巧

状态模式 

状态模式（State）允许一个对象在其内部状态改变的时候改变它的行为，对象看起来似乎修改了它的类。 

状态模式的使用场景也特别明确，有如下两点：
 1.一个对象的行为取决于它的状态，并且它必须在运行时刻根据状态改变它的行为。（有些对象通常会有好几个状态，在每个状态都只可以做当前状态才可以做的事情，而不能做其它状态能做的事儿）

 2.一个操作中含有大量的分支语句，而且这些分支语句依赖于该对象的状态。状态通常为一个或多个枚举常量的表示。 

一、有限状态机

 1.状态总数（state）是有限的。
 2.任一时刻，只处在一种状态之中。
 3.某种条件下，会从一种状态转变（transition）到另一种状态。 

通用做法：将状态封装成独立的类（状态机），并将请求委托给当前的状态对象，当对象的内部状态发生改变时，会带来不同的行为变化。 

二、性能优化点

 1.如何管理状态对象的创建和销毁？第一种仅当state对象被需要时才创建并随后销毁（state对象比较庞大，优先选择）， 另一种是一开始就创建好所有的状态对象，并且始终不销毁它们（状态改变频繁）。
 2.利用享元模式共享一个state对象。 

举个稍微复杂的例子，相信大家都玩过角色扮演类游戏，里面的角色就有很多种状态（站、走、跑、跳、蹲等），各个状态之间的切换是被规定好了的，且任何时刻都只能处于一种状态中，而在每个状态下，角色只能做当前状态下被允许的行为（如：普通攻击、各种技能攻击、防御等） 

这是我写的移动小球的例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script>
    window.onload = function() {
      var FSM = {
        show1: {
          clickBtn: function (key) {
            change.call(this,key);
          }
        },
        show2: {
          clickBtn: function (key) {
            change.call(this,key);
          }
        },
        show3: {
          clickBtn: function (key) {
            change.call(this,key);
          }
        },
        show4: {
          clickBtn: function (key) {
            change.call(this,key);
          }
        }
      };
      var Ball = function () {
        this.curentState = FSM.show1;
        this.div = null;
      };
      Ball.prototype.init = function () {
        var self = this;
        this.div = document.getElementById('go');
        document.body.onkeydown = function (event) {
          var key = event.keyCode;
          self.curentState.clickBtn.call(self,key);
        }
      };
      function change(key){
        var styles = window.getComputedStyle(this.div),
          parentStyles = window.getComputedStyle(this.div.parentNode),
          top = parseInt(styles.top),
          left = parseInt(styles.left);
        if(key === 40){
          top += (top+parseInt(styles.height))<parseInt(parentStyles.height) ? 10 : 0;
          this.div.style.top = top+'px';
          this.curentState = FSM.show3;
        }
        if(key === 38){
          top -= (top > 0 ? 10 : 0);
          this.div.style.top = top+'px';
          this.curentState = FSM.show4;
        }
        if(key === 37){
          left -= (left > 0 ? 10 : 0);
          this.div.style.left = left+'px';
          this.curentState = FSM.show1;
        }
        if(key === 39){
          this.curentState = FSM.show2;
          left += (left+parseInt(styles.width))<parseInt(parentStyles.width) ? 10 : 0;
          this.div.style.left = left+'px';
        }
      }
      var a = new Ball();
      a.init();
    }
  </script>
  <style>
    #div{
      position: absolute;
      width: 80%;
      height: 80%;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      border: 1px solid darkcyan;
    }
    #go{
      position:absolute;
      width:50px;
      height:50px;
      left: 10px;
      top:20px;
      border:1px solid gray;
      -webkit-border-radius : 50px;
      -moz-border-radius: 50px;
      border-radius: 50px;
      background-image: radial-gradient(circle, white 5%, black 100%);
    }
  </style>
</head>
<body>
<div id="div">按下方向键移动方块
  <div id="go"></div>
</div>
</body>
</html>

三、JavaScript版本的状态机（以简单的开关灯为例）

 1.通过Function.prototype.call方法直接把请求委托给某个字面量对象来执行

 // 状态机
var FSM = {
 off: {
  buttonWasPressed: function() {
   console.log("关灯");
   this.button.innerHTML = "下一次按我是开灯";  // 这是Light上的属性！！！
   this.currState = FSM.on;      // 这是Light上的属性！！！
  }
 },
 on: {
  buttonWasPressed: function() {
   console.log("开灯");
   this.button.innerHTML = "下一次按我是关灯";
   this.currState = FSM.off;
  }
 },
};

var Light = function() {
 this.currState = FSM.off; // 设置当前状态
 this.button = null;
};

Light.prototype.init = function() {
 var button = document.createElement("button");
 self = this;

 button.innerHTML = "已关灯";
 this.button = document.body.appendChild(button);
 this.button.onclick = function() {
  // 请求委托给FSM状态机
  self.currState.buttonWasPressed.call(self);
 }

}

var light = new Light();
light.init();

2.利用delegate函数

 var delegate = function(client, delegation) {
 return {
  buttonWasPressed: function() {
   return delegation.buttonWasPressed.apply(client, arguments);
  }
 };
};

// 状态机
var FSM = {
 off: {
  buttonWasPressed: function() {
   console.log("关灯");
   this.button.innerHTML = "下一次按我是开灯";
   this.currState = this.onState;
  }
 },
 on: {
  buttonWasPressed: function() {
   console.log("开灯");
   this.button.innerHTML = "下一次按我是关灯";
   this.currState = this.offState;
  }
 },
};

var Light = function() {
 this.offState = delegate(this, FSM.off);
 this.onState = delegate(this, FSM.on);
 this.currState = this.offState; // 设置当前状态
 this.button = null;
};

Light.prototype.init = function() {
 var button = document.createElement("button");
 self = this;

 button.innerHTML = "已关灯";
 this.button = document.body.appendChild(button);
 this.button.onclick = function() {
  // 请求委托给FSM状态机
  self.currState.buttonWasPressed();
 }
}

var light = new Light();
light.init();

状态模式和策略模式很像，它们都封装了一系列的算法或行为，它们都有一个上下文对象来把请求委托给封装类（策略类、状态机），但它们的意图不同：
 1.策略类的各个属性之间是平等平行的，它们之间没有任何联系
 2.状态机中的各个状态之间存在相互切换，且是被规定好了的。

参考文献： 《JavaScript模式》 《JavaScript设计模式与开发实践》

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索js
状态模式
30天轻松掌握javaweb、新版轻松掌握五十音、轻松掌握五十音、轻松掌握血管内超声、轻松掌握javaweb视频，以便于您获取更多的相关知识。

时间： 2024-09-19 06:16:38

轻松掌握JavaScript状态模式_javascript技巧的相关文章

轻松掌握JavaScript策略模式_javascript技巧

定义:定义一系列的算法,把它们一个个封装成函数,也可把它们作为属性统一封装进一个对象,然后再定义一个方法,该方法可根据参数自动选择执行对应的算法.  一般用于在实现一个功能时,有很多个方案可选择的情况.  例子1:根据员工薪水salary.绩效等级S.A.B.C,来计算年终奖 //封装了所有算法的策略对象 var strategies = { 'S': function(salary){ return salary*4; }, 'A': function(salary){ return sala

轻松掌握JavaScript代理模式_javascript技巧

在面向对象设计中,有一个单一职责原则,指就一个类(对象.函数)而言,应该仅有一个引起它变化的原因.如果一个对象承担了过多的职责,就意味着它将变得巨大,引起它变化的原因就多,它把这些职责耦合到了一起,这种耦合会导致程序难于维护和重构.  这时候,我们可以把该对象(本体)的其中一部分职责分离出来给一些第三方对象去做,本体只管自己的一些核心职责,这些第三方对象就称作代理.代理对象可以作为对象(也叫"真正的主体")的保护者,让真正的主体对象做尽量少的工作.在代理设计模式中,一个对象充当了另一个

学习JavaScript设计模式之状态模式_javascript技巧

状态模式的关键是区分事物内部的状态,事物内部状态的改变往往会带来事物的行为改变. 当电灯开着,此时按下开关,电灯会切换到关闭状态:再按一次开关,电灯又将被打开.同一个开关在不同的状态下,表现出来的行为是不一样的. 一.有限状态机 状态总数(state)是有限的. 任一时刻,只处在一种状态之中. 某种条件下,会从一种状态转变(transition)到另一种状态. 允许一个对象在其内部状态改变时改变它的行为,对象看起来似乎修改了它的类. 解释: (1)将状态封装成独立的类,并将请求委托给当前的状态对

轻松实现JavaScript图片切换_javascript技巧

本文实例为大家介绍JavaScript图片切换的实现方法,分享给大家供大家参考,具体内容如下 效果图: 网页看到非常常见的一个图片切换效果:在淘宝.JD等购物时,介绍产品的图片会有多张,一般是显示一张,底下有一排小图片,鼠标放到小图片上大图片会切换.参考vivo X5M 移动4G手机 .下面记录一下实现的过程. 1. getElementById() 该方法是操作dom非常常用的一个方法,比如有一p标签,id设为pid,通过getElementById("pid")就可以对该元素进行操

轻松学习Javascript闭包函数_javascript技巧

闭包函数是什么?在开始学习的闭包的时候,大家很能都比较难理解.就从他的官方解释来说,都是比较概念化的. 不过我们也还是从闭包的含义出发. 闭包是指函数有自由独立的变量.换句话说,定义在闭包中的函数可以"记忆"它创建时候的环境. 官方解释说完后,我们先来看一个简单计数的例子. var c = 0; function count(){ c++; } count();// 1 count();// 2 这个例子是利用了全局变量来实现,但是这里有个问题是,c这个变量也容易被其他方式所调用,这时

Javascript 命名空间模式_javascript技巧

然而,在不同的文件中给一个命名空间添加属性的时候,首先要保证这个命名空间是已经存在的,同时不对已有的命名空间造成任何破坏.可以通过非破坏性的命名空间函数实现: 复制代码 代码如下: var KUI = KUI || {};KUI.utils = KUI.utils || {}; KUI.utils.namespace = function(ns){    var parts = ns.split("."),        object = KUI,        i, len;    

javascript设计模式之module(模块)模式_javascript技巧

模块是任何强大应用程序中不可或缺的一部分,它通常能帮助我们清晰地分离和组织项目中的代码单元. js中实现模块的方法: 1.对象字面量表示法  2.Module模式  3.AMD模块  4.CommonJS模块  5.ECMAScript Harmony 模块 对象字面量 对象字面量不需要使用new运算符进行实例化,但不能用在一个语句的开头,因为开始的可能被解读为一个块的开始,在对象的外部,新成员可以使用如下赋值语句添加到对象字面量上,myModule.property = "someValue&

学习JavaScript设计模式(代理模式)_javascript技巧

代理模式是为一个对象提供一个代用品或占位符,以便控制对它的访问 代理模式的用处(个人理解):为了保障当前对象的单一职责(相对独立性),而需要创建另一个对象来处理调用当前对象之前的一些逻辑以提高代码的效率.状态判断等. 代理模式中最常用的是虚拟代理和缓存代理 一.虚拟代理 虚拟代理是把一些开销很大的对象,延迟到真正需要它的时候才去创建执行 示例: 虚拟代理实现图片预加载 // 图片加载函数 var myImage = (function(){ var imgNode = document.crea

JavaScript设计模式经典之工厂模式_javascript技巧

一.工厂模式概念 工厂模式定义一个用于创建对象的接口,这个接口由子类决定实例化哪一个类.该模式使一个类的实例化延迟到了子类.而子类可以重写接口方法以便创建的时候指定自己的对象类型(抽象工厂). 这个模式十分有用,尤其是创建对象的流程赋值的时候,比如依赖于很多设置文件等.并且,你会经常在程序里看到工厂方法,用于让子类定义需要创建的对象类型. 二.工厂模式的作用和注意事项 模式作用: 1.对象构建十分复杂--我们穿鞋很简单,但是制作鞋子的过程十分复杂 2.需要依赖具体的环境创建不同的实例--工厂可以