• 下面的状态机选择通过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模式--状态模式(状态机)的更多相关文章

  1. Java设计模式(十) 备忘录模式 状态模式

    (十九)备忘录模式 备忘录模式目的是保存一个对象的某个状态,在适当的时候恢复这个对象. class Memento{ private String value; public Memento(Stri ...

  2. js 设计模式——状态模式

    状态模式 允许一个对象在其内部状态改变时改变它的行为,对象看起来似乎修改了它的类. 简单的解释一下: 第一部分的意思是将状态封装成独立的类,并将请求委托给当前的状态对象,当对象的内部状态改变时,会带来 ...

  3. js之状态模式

    level01:电灯程序 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  4. 8.js模式-状态模式

    1. 状态模式 var offLightState = function(light){ this.light = light; } offLightState.prototype.buttonWas ...

  5. java设计模式--行为型模式--状态模式

    什么是行为型模式,小编觉得就是对行为的一种描述啦,一种对某种行为模型的定义. 状态模式: 状态模式 概述 定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被 ...

  6. [19/05/02-星期四] GOF23_行为型模式(状态模式、观察者模式、备忘录模式)

    一.状态模式 [状态接口] /*** * 房间"状态"接口 */ package cn.sxt.state; public interface State { void handl ...

  7. js设计模式——5.状态模式

    js设计模式——5.状态模式 代码演示 /*js设计模式——状态模式*/ // 状态(红灯,黄灯,绿灯) class State { constructor(color) { this.color = ...

  8. 轻松掌握:JavaScript状态模式

    状态模式 状态模式(State)允许一个对象在其内部状态改变的时候改变它的行为,对象看起来似乎修改了它的类. 状态模式的使用场景也特别明确,有如下两点: 一个对象的行为取决于它的状态,并且它必须在运行 ...

  9. js中State模式的解析及运用

     状态模式,在大的范畴中的定义为当一个对象的内在状态改变时允许改变其行为,这个对象看起来像是改变了其类.每种编程语言有不同的实现方式,运用的范围也多用于游戏之中. 这里我用javascript来模拟状 ...

随机推荐

  1. UISearchController 搜索

    UISearchController实现搜索 通过 UISearchController 实现 UISearchResultsUpdating 这个委托实现上面的效果: 视图中中需要声明UISearc ...

  2. 数据库 sql 表连接

    表链接 分为 横向链接   和纵向链接 横向链接 select * from student,score --笛卡尔积 查询所有表 会出现 笛卡尔积  就是所有匹配的结果都会展示一遍 为防止以上情况 ...

  3. 【转】请求处理机制其三:view层与模板解析

     进入 View 了 如果处理过程这时候还在继续的话,处理器会调用 view function.Django 中的 Views 不很严格因为它只需要满足几个条件: 必须可以被调用. 必须接受 djan ...

  4. koa中间件系统原理及koa+orm2实践。

    koa是由 Express 原班人马打造的新的web框架.套用其官方的说法:Koa 应用是一个包含一系列中间件 generator 函数的对象. 这些中间件函数基于 request 请求以一个类似于栈 ...

  5. Java语言定义的线程状态分析

    说到线程,一定要谈到线程状态,不同的状态说明线程正处于不同的工作机制下,不同的工作机制下某些动作可能对线程产生不同的影响. Java语言定义了6中状态,而同一时刻,线程有且仅有其中的一种状态.要获取J ...

  6. (转)Linux core 文件介绍与处理

    1. core文件的简单介绍 在一个程序崩溃时,它一般会在指定目录下生成一个core文件.core文件仅仅是一个内存映象(同时加上调试信息),主要是用来调试的. 2. 开启或关闭core文件的生成用以 ...

  7. dev机上数据库中批量生成table

    我的低效方法: 通过本地php脚本进行create: <?php //0-63 header("Content-type:text/html;charset=utf-8"); ...

  8. wamp虚拟服务器

    1.安装好wampServer 2.修改配置文件包含 vhosts 文件,操作: 打开apache的配置文件httpd.conf,并去掉#Include conf/extra/httpd-vhosts ...

  9. ConversionService接口

    spring已经为我们提供了一个既可以使用GenericConversionService,又可以注入Converter的类,那就是ConversionServiceFactoryBean.该类为我们 ...

  10. Alamofire源码解读系列(十)之序列化(ResponseSerialization)

    本篇主要讲解Alamofire中如何把服务器返回的数据序列化 前言 和前边的文章不同, 在这一篇中,我想从程序的设计层次上解读ResponseSerialization这个文件.更直观的去探讨该功能是 ...