这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要帮助大家轻松掌握 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 设计模式与开发实践》
来源: http://www.phperz.com/article/17/0516/332031.html