状态模式
状态模式（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>
新闻热点
疑难解答
图片精选
