文档章节

Javascript观察者模式

浮说年华
 浮说年华
发布于 2016/11/09 11:25
字数 544
阅读 12
收藏 0

如果想让多个对象都具有观察者发布订阅的功能,我们可以定义一个通用的函数,然后将该函数的功能应用到需要观察者功能的对象上,代码如下:

var observer = {
	//订阅
	addSubscriber: function(callback) {
		this.subscriber[this.subscriber.length] = callback;
	},
	//发布
	publish: function(what) {
		for(var i = 0; i < this.subscriber.length; i++) {
			if(typeof this.subscriber[i] == 'function') {
				this.subscriber[i](what);
			}

		}
	},
	//取消发布
	removeSubscriber: function(callback) {
		for(var i = 0; i < this.subscriber.length; i++) {
			if(this.subscriber[i] == callback) {
				delete this.subscriber[i];
			}
		}
	},
	//将对象o具有观察者功能,注入
	make: function(o) {
		for(var i in this) {
			o[i] = this[i];
		}
		o['subscriber']=[];

	}
}

然后订阅1个对象blogger,使用observer.make方法将这个对象具有观察者功能,代码如下:

var blogger = {
	recommend: function(id) {
		var msg = "dudu推荐了帖子" + id;
		this.publish(msg);
	}
};
//---设置发布者
observer.make(blogger);

我们来看看make后的blogger

输入图片说明

那么这里的blogger里面就注入了observer对象里面的方法。

使用方法就比较简单了,订阅不同的回调函数,以便可以注册到不同的观察者对象里(也可以同时注册到多个观察者对象里):

//------------------------------订阅者
var tom = {
	read: function(what) {
		console.log('tom看见了:' + what);
	}
}
var mm = {
	show: function(id) {
		var msg = 'mm看见了:' + id;
		console.log(msg);
	}
}
//------------添加订阅者
blogger.addSubscriber(tom.read);
blogger.addSubscriber(mm.show);
//-----------发布
blogger.recommend(12); //调用发布
//-----------取消订阅
console.log('mm取消订阅');
blogger.removeSubscriber(mm.show);
//-----------发布
blogger.recommend(34);//调用发布

那么结果就是这样: 订阅了的订阅者都能收到发布者发布的信息

输入图片说明

© 著作权归作者所有

浮说年华
粉丝 1
博文 10
码字总数 10490
作品 0
朝阳
程序员
私信 提问
《JavaScript设计模式与开发实践》原则篇(2)—— 最少知识原则

最少知识原则(LKP)说的是一个软件实体应当尽可能少地与其他实体发生相互作用。这 里的软件实体是一个广义的概念,不仅包括对象,还包括系统、类、模块、函数、变量等。 单一职责原则指导我们...

嗨呀豆豆呢
2018/12/30
0
0
《JavaScript设计模式与开发实践》最全知识点汇总大全

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

嗨呀豆豆呢
01/04
0
0
JavaScript 中常见设计模式-单例模式

     单例模式两个条件   确保只有一个实例   可以全局访问   适用   适用于弹框的实现,全局缓存   实现单例模式      JavaScript 中的单例模式   因为 JavaScript 是无...

webstack前端栈
2018/05/19
0
0
《JavaScript设计模式与开发实践》模式篇(12)—— 装饰者模式

在传统的面向对象语言中,给对象添加功能常常使用继承的方式,但是继承的方式并不灵活, 还会带来许多问题:一方面会导致超类和子类之间存在强耦合性,当超类改变时,子类也会随之 改变;另一方...

嗨呀豆豆呢
2018/12/25
0
0
JavaScript设计模式总结

之前看过《JavaScript设计模式与开发实践》这本书,对书中的设计模式和一些相关案例也有了一定的了解,同时把这些设计模式的应用对应在在一些其他的项目中,进行了一些整理,如下仅供参考: ...

jefferyE
03/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

排序––快速排序(二)

根据排序––快速排序(一)的描述,现准备写一个快速排序的主体框架: 1、首先需要设置一个枢轴元素即setPivot(int i); 2、然后需要与枢轴元素进行比较即int comparePivot(int j); 3、最后...

FAT_mt
29分钟前
3
0
mysql概览

学习知识,首先要有一个总体的认识。以下为mysql概览 1-架构图 2-Detail csdn |简书 | 头条 | SegmentFault 思否 | 掘金 | 开源中国 |

程序员深夜写bug
今天
9
0
golang微服务框架go-micro 入门笔记2.2 micro工具之微应用利器micro web

micro web micro 功能非常强大,本文将详细阐述micro web 命令行的功能 阅读本文前你可能需要进行如下知识储备 golang分布式微服务框架go-micro 入门笔记1:搭建go-micro环境, golang微服务框架...

非正式解决方案
今天
6
0
前端——使用base64编码在页面嵌入图片

因为页面中插入一个图片都要写明图片的路径——相对路径或者绝对路径。而除了具体的网站图片的图片地址,如果是在自己电脑文件夹里的图片,当我们的HTML文件在别人电脑上打开的时候图片则由于...

被毒打的程序猿
今天
8
0
Flutter 系列之Dart语言概述

Dart语言与其他语言究竟有什么不同呢?在已有的编程语言经验的基础上,我们该如何快速上手呢?本篇文章从编程语言中最重要的组成部分,也就是基础语法与类型变量出发,一起来学习Dart吧 一、...

過愙
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部