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来模拟状 ...
随机推荐
- SEO-站外优化规范
站外优化规范 新站 前期(提高网站曝光率<信息发布平台>) 一. 分类目录信息发布 二. 黄页网信息发布 三. 友链平台信息发布 四. 各大论坛引蜘蛛区信息发布 五. 网址提交 六. 社区 ...
- Gridview AutoGenerateColumns属性
第一篇随笔,以后会陆续的把刚开始工作时的知识点都记录下来,毕竟现在用WebForm的不多了~ AutoGenerateColumns MSDN 说明 : 获取或设置一个值,该值指示是否为数据源中的每个 ...
- CentOS 安装mysql-5.7.10(glibc版)
注:所有shell命令都以root用户执行. 一.下载 shell> cd /home/user/Downloads shell> wget http://mirrors.sohu.com ...
- web从入门开始(5)-----表单
1. 表单的概念 是用来获取客户端用户数据的(信息)的.如:注册表单,查询表单,登录表单等. 2. 表单的工作原理 1.浏览有表单的网页,填写一些必要的信息,然后单击某个按钮,进行提交. 2.这 ...
- struts2(二) 表单参数自动封装和参数类型自动转换
前篇文章对struts2的一个入门,重点是对struts2的架构图有一个大概的了解即可,之后的几篇文章,就是细化struts2,将struts2中的各种功能进行梳理,其实学完之后,对struts2的使 ...
- sqrt()平方根计算函数的实现2——牛顿迭代法
牛顿迭代法: 牛顿迭代法又称为牛顿-拉夫逊方法,它是牛顿在17世纪提出的一种在实数域和复数域上近似求解方程的方法.多数方程不存在求根公式,因此求精确根非常困难,甚至不可能,从而寻找方程的近似根就显得特 ...
- c#关于时间TimeHelper类的总结
using System; namespace DotNet.Utilities{ /// <summary> /// 时间类 /// 1.SecondToMinute( ...
- HTTP相关整理(上)
这次整理HTTP相关知识点的初衷是因为项目中有大量与网络请求相关的知识细节点,所以这次整理的更多的是日常中用得到的点(参考图解HTTP),另外给打算做FE的新人们一些建议:多重视网络这方面的知识.文章 ...
- C++ 拷贝控制和资源管理,智能指针的简单实现
C++ 关于拷贝控制和资源管理部分的笔记,并且介绍了部分C++ 智能指针的概念,然后实现了一个基于引用计数的智能指针.关于C++智能指针部分,后面会有专门的研究. 通常,管理类外资源的类必须定义拷贝控 ...
- 第5章Zabbix自动化监控
p.MsoNormal,li.MsoNormal,div.MsoNormal { margin: 0cm; margin-bottom: .0001pt; text-align: justify; t ...