文档章节

javascript的状态模式(二)

stone_
 stone_
发布于 2016/05/18 18:04
字数 187
阅读 31
收藏 3

状态模式的关键是区分事物内部的状态,事物内部状态的改变往往会带来事物的行为改变。

当电灯开着,此时按下开关,电灯会切换到关闭状态;再按一次开关,电灯又将被打开。同一个开关在不同的状态下,表现出来的行为是不一样的。

// javascript

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.button = null;
	this.offState = delegate(this, FSM.off);
	this.onState = delegate(this, FSM.on);

	this.currState = this.offState;
}

Light.prototype.init = function(){
	var self = this;

	var button = document.createElement('button');
	button.innerHTML = '已关灯';
	this.button = document.body.appendChild(button);
	this.button.onclick = function(){
		self.currState.buttonWasPressed();
	}


}

var light = new Light();

light.init();


 

© 著作权归作者所有

stone_
粉丝 21
博文 221
码字总数 163611
作品 0
洛阳
程序员
私信 提问
前嗅ForeSpider教程:运行设置(二)

今天,小编为大家详细介绍一下:前嗅ForeSpider运行设置中的网络超时,HTTP设置,加载设置,任务模式,这四大模块。具体内容如下: 一,网络超时 【网络超时】 接收超时 当对方服务器繁忙时,...

forespider
03/04
6
0
前端面试之JavaScript设计模式

引言 面向对象编程就是将你的需求抽象成一个对象,然后对这个对象进行分析,为其添加对应的特征(属性)与行为(方法),我们将这个对象称之为 类。 面向对象一个很重要的特点就是封装,虽然...

八叉树
06/08
0
0
【iOS & Web】JavaScript & Objective-C二重奏

一、JS call OC 方法1: 通拦截协议头来获取协议字符串。在UIWebView中的代理方法中有这样的方法,如下图所示: 下面是我写的简单的H5页面通过JS请求一个自定义协议的URL,然后通过UIWebView...

魔笛GNR
2016/10/19
42
0
《JavaScript设计模式与开发实践》最全知识点汇总大全

系列文章: 《JavaScript设计模式与开发实践》基础篇(1)—— this、call 和 apply 《JavaScript设计模式与开发实践》基础篇(2)—— 闭包和高阶函数 《JavaScript设计模式与开发实践》模式...

嗨呀豆豆呢
01/04
0
0
Javascript模块化编程(一):模块的写法

原作者:阮一峰 随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂。 网页越来越像桌面程序,需要一个团队分工协作、进度管理、单元测试等等......开发者不...

Idiot_s_Sky
2014/03/09
132
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 我,小小编辑,食人族酋长

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @宇辰OSC :分享娃娃的单曲《飘洋过海来看你》: #今日歌曲推荐# 《飘洋过海来看你》- 娃娃 手机党少年们想听歌,请使劲儿戳(这里) @宇辰OSC...

小小编辑
54分钟前
116
7
spring cloud

一、从面试题入手 1.1、什么事微服务 1.2、微服务之间如何独立通讯的 1.3、springCloud和Dubbo有哪些区别 1.通信机制:DUbbo基于RPC远程过程调用;微服务cloud基于http restFUL API 1.4、spr...

榴莲黑芝麻糊
今天
2
0
Executor线程池原理与源码解读

线程池为线程生命周期的开销和资源不足问题提供了解决方 案。通过对多个任务重用线程,线程创建的开销被分摊到了多个任务上。 线程实现方式 Thread、Runnable、Callable //实现Runnable接口的...

小强的进阶之路
昨天
6
0
maven 环境隔离

解决问题 即 在 resource 文件夹下面 ,新增对应的资源配置文件夹,对应 开发,测试,生产的不同的配置内容 <resources> <resource> <directory>src/main/resources.${deplo......

之渊
昨天
8
0
详解箭头函数和普通函数的区别以及箭头函数的注意事项、不适用场景

箭头函数是ES6的API,相信很多人都知道,因为其语法上相对于普通函数更简洁,深受大家的喜爱。就是这种我们日常开发中一直在使用的API,大部分同学却对它的了解程度还是不够深... 普通函数和...

OBKoro1
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部