JS模式--状态模式(状态机)
- 下面的状态机选择通过Function.prototype.call方法直接把请求委托给某个字面量对象来执行。
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 () {
self.currstate.buttonWasPressed.call(self);
};
};
var FSM = {
off: {
buttonWasPressed: function () {
console.log('关灯');
this.button.innerHTML = '下一次按我是开灯';
this.currstate = FSM.on;
}
},
on: {
buttonWasPressed: function () {
console.log('开灯');
this.button.innerHTML = '下一次按我是关灯';
this.currstate = FSM.off;
}
}
};
var light = new light();
light.init();
- 下面利用delegate函数来重写一遍这个状态机
- 这是面向对象和闭包互换的一个例子。前者将变量保存为对象的属性,后者将变量封闭在闭包形成的环境中:
var delegate = function (client, delegation) {
return {
buttonWasPressed: function () {
return delegation.buttonWasPressed.apply(client, arguments);
}
};
};
var light = function () {
this.offstate = delegate(this, FSM.off);
this.onstate = delegate(this, FSM.on);
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 () {
self.currstate.buttonWasPressed.call(self);
};
};
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 = new light();
light.init();
Github上有另外一种方式:
https://github.com/jakesgordon/javascript-state-machine
JS模式--状态模式(状态机)的更多相关文章
- Java设计模式(十) 备忘录模式 状态模式
(十九)备忘录模式 备忘录模式目的是保存一个对象的某个状态,在适当的时候恢复这个对象. class Memento{ private String value; public Memento(Stri ...
- js 设计模式——状态模式
状态模式 允许一个对象在其内部状态改变时改变它的行为,对象看起来似乎修改了它的类. 简单的解释一下: 第一部分的意思是将状态封装成独立的类,并将请求委托给当前的状态对象,当对象的内部状态改变时,会带来 ...
- js之状态模式
level01:电灯程序 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- 8.js模式-状态模式
1. 状态模式 var offLightState = function(light){ this.light = light; } offLightState.prototype.buttonWas ...
- java设计模式--行为型模式--状态模式
什么是行为型模式,小编觉得就是对行为的一种描述啦,一种对某种行为模型的定义. 状态模式: 状态模式 概述 定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被 ...
- [19/05/02-星期四] GOF23_行为型模式(状态模式、观察者模式、备忘录模式)
一.状态模式 [状态接口] /*** * 房间"状态"接口 */ package cn.sxt.state; public interface State { void handl ...
- js设计模式——5.状态模式
js设计模式——5.状态模式 代码演示 /*js设计模式——状态模式*/ // 状态(红灯,黄灯,绿灯) class State { constructor(color) { this.color = ...
- 轻松掌握:JavaScript状态模式
状态模式 状态模式(State)允许一个对象在其内部状态改变的时候改变它的行为,对象看起来似乎修改了它的类. 状态模式的使用场景也特别明确,有如下两点: 一个对象的行为取决于它的状态,并且它必须在运行 ...
- js中State模式的解析及运用
状态模式,在大的范畴中的定义为当一个对象的内在状态改变时允许改变其行为,这个对象看起来像是改变了其类.每种编程语言有不同的实现方式,运用的范围也多用于游戏之中. 这里我用javascript来模拟状 ...
随机推荐
- 控制语句 for while if switch
一.for…in 结构 for i in 0...4{ print(i) //使用到了变量 i } for _ in 0...1{ // 后期没有使用到变量,可以直接用个下划线 _ 占位就行 ...
- Ubuntu 16.04安装DB2 Express C v11.1
欢迎和大家交流技术相关问题:邮箱: jiangxinnju@163.com博客园地址: http://www.cnblogs.com/jiangxinnjuGitHub地址: https://gith ...
- cordova原理与插件制作
---恢复内容开始--- cordova插件打包教程: http://www.jianshu.com/p/96855e009e95 www.itnose.net/detail/6245407.html ...
- curl中通过json格式吧post值返回到java中遇到中文乱码的问题
首先是: curl中模拟http请求: curl -l 127.0.0.1:8080/spacobj/core/do?acid=100 -H "token:101hh" -H &q ...
- .net平台的MongoDB使用
前言 最近花了点时间玩了下MongoDB.Driver,进行封装了工具库,平常也会经常用到MongoDB,因此写一篇文章梳理知识同时把自己的成果分享给大家. 本篇会设计到Lambda表达式的解析,有兴 ...
- centos mail使用外部SMTP发送邮件
1.安装mailx yum install mailx -y 安装好后,编辑配置文件 mailx -V 12.4 7/29/08 <<mailx的版本号 rpm -qc mailx /e ...
- [Openfire]使用WebSocket建立Openfire的客户端
近日工作闲暇之余,对IM系统产生了兴趣,转而研究了IM的内容.找了半天,知道比较流行的是Openfire的系统,Openfire有许多平台实现,由于我是做Web的,所以当然是希望寻找Web的实现.Op ...
- 云片-语音验证码--短信验证码 - PHP接口
///////////////////////语音验证///////////////////////////// /** * 发送短信(语音验证码)云片语音服务 * @param $apikey ...
- Unity无缝循环世界实现
一年前曾经碰到过已无限世界为题材的游戏开发比赛,虽然对比赛没有兴趣,但是对这个题材倒是有点想法.如何通过unity3d实现无缝的循环世界呢. 有一种想法是动态生成,一块场景一块场景进行动态加载.(做过 ...
- 【canvas系列】canvas实现"雷达扫描"效果
今天来讲解"雷达扫描"效果demo,来源于QQ群里边有群友说想要个雷达效果,就尝试写了一下. 效果图: demo链接: https://win7killer.github.io/c ...