js设计模式(10)---观察者模式
0.前言
最近好多烦心事,由于自己的拖延懒惰造成事情堆积如山,看来最近得勤快些了,不然真的会死的很惨。
1.观察者模式是什么
又叫做发布者订阅者模式(publish/Subscribe),用来确定对象之间的一种一对多的依赖,让多个订阅者同时监听某一个发布者对象,当这个发布者对象的状态发生变化时就通知所有的订阅者,使他们能够自动更新自己。
2.代码举例
老实说自己还是没有完全吃透观察者模式,所以无法自助写出对应的代码,假如有幸您独到的文章,就移步到大叔处或alloyteam处吧,这个随笔就用来加深我的理解吧。
var pubsub = {};
(function (q) { var topics = {}, // 回调函数存放的数组
subUid = -1;
// 发布方法
q.publish = function (topic, args) { if (!topics[topic]) {
return false;
} setTimeout(function () {
var subscribers = topics[topic],
len = subscribers ? subscribers.length : 0; while (len--) {
subscribers[len].func(topic, args);
}
}, 0); return true; };
//订阅方法
q.subscribe = function (topic, func) { if (!topics[topic]) {
topics[topic] = [];
} var token = (++subUid).toString();
topics[topic].push({
token: token,
func: func
});
return token;
};
//退订方法
q.unsubscribe = function (token) {
for (var m in topics) {
if (topics[m]) {
for (var i = 0, j = topics[m].length; i < j; i++) {
if (topics[m][i].token === token) {
topics[m].splice(i, 1);
return token;
}
}
}
}
return false;
};
} (pubsub)); 使用方式如下:
//来,订阅一个
pubsub.subscribe('example1', function (topics, data) {
console.log(topics + ": " + data);
}); //发布通知
pubsub.publish('example1', 'hello world!');
pubsub.publish('example1', ['test', 'a', 'b', 'c']);
pubsub.publish('example1', [{ 'color': 'blue' }, { 'text': 'hello'}]);
3.个人理解
1.又成为发布者订阅者模式,用来确定对象之间的一对多的依赖;
2.当发布者的状态发生改变时,会通知所有的订阅者,使其随之更新;
3.就像一个报纸对应多个读者一样,当报社发布报纸后,很多读者就会收到报纸。
js设计模式(10)---观察者模式的更多相关文章
- [JS设计模式]:观察者模式(即发布-订阅者模式)(4)
简介 观察者模式又叫发布---订阅模式,它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时,所有依赖于它的对象都将得到通知. 举一个现实生活中的例子,例如小 ...
- js设计模式——3.观察者模式
js设计模式——观察者模式 /*js设计模式——.观察者模式*/ // 主题,保存状态,状态变化之后触发所有观察者对象 class Subject { constructor() { this.sta ...
- JS设计模式之观察者模式
观察者模式,即发布与订阅模式,实现一对多的一种关系模式,当一种对象接受信号时其他所有依赖均有行为.我们在写code的时候总是会去自定义一些事件,这就是观察者常常使用的地方: JS中的观察者模式应用: ...
- js 设计模式之观察者模式
观察者模式 又被称为“发布-订阅”模式,目的是解决主题对象和观察者之间功能的耦合性.发布者和订阅者之间是互不干扰的,没有联系的,通过观察者,当做中介,将二者联系起来. 例子:以学生和老师之间的为例 1 ...
- JavaScript设计模式(10)-观察者模式
观察者模式 1. 介绍 发布者与订阅者是多对多的方式 通过推与拉获取数据:发布者推送到订阅者或订阅者到发布者那边拉 使并行开发的多个实现能彼此独立地进行修改 其实我们在前端开发中使用到的时间监听就是浏 ...
- JS设计模式——10.门面模式
门面模式 这是一种组织性的模式,它可以用来修改类和对象的接口,使其更便于使用.它可以让程序员过得更轻松,使他们的代码变得更容易管理. 门面模式有两个作用: 简化类的接口 消除与使用她的客户代码之间的耦 ...
- js设计模式-观察者模式
定义: 观察者模式又叫发布订阅模式,它定义了对象间的一种一对多的依赖关系.观察者模式让两个对象松耦合地联系在一起,虽然不太清楚彼此的细节,但这不影响他们之间的互相通信. 思路 定义一个对象,在对象中实 ...
- js 设计模式——观察者模式
观察者模式 定义 观察者模式(又被称为发布-订阅(Publish/Subscribe)模式,属于行为型模式的一种,它定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象.这个主题对象在状 ...
- 前端笔记之JavaScript面向对象(三)初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发
一.ES6语法 ES6中对数组新增了几个函数:map().filter().reduce() ES5新增的forEach(). 都是一些语法糖. 1.1 forEach()遍历数组 forEach() ...
- js设计模式:工厂模式、构造函数模式、原型模式、混合模式
一.js面向对象程序 var o1 = new Object(); o1.name = "宾宾"; o1.sex = "男"; o1.a ...
随机推荐
- ARM指令系统
转载自:http://cxb4224.blog.163.com/blog/static/191224151201110220325976/ ARM处理器的工作状态和工作模式 工作状态 ARM处理器一般 ...
- socketpair理解
转载:http://liulixiaoyao.blog.51cto.com/1361095/533469/ 今天跟人谈到socketpair的问题,晚上回来写了个程序验证下自己的猜测! 先说说我的理解 ...
- LeetCode40 Combination Sum II
题目: Given a collection of candidate numbers (C) and a target number (T), find all unique combination ...
- 沈逸老师PHP魔鬼特训笔记(9)--进化
回到第一课,我们学过PHP母体,了解过解析PHP程序.PHP其实内置了一个web服务器,专门给我们开发测试使用,那么接下来我们要完成的是:生成后创建一个web 服务,在浏览器中可以访问. PHP的母体 ...
- 在C#中使用NPOI2.0操作Excel2003和Excel2007
Excel2003: #region Excel2003 /// <summary> /// 将Excel文件中的数据读出到DataTable中(xls) /// </summary ...
- 重构12-Break Dependencies(打破依赖)
有些单元测试需要恰当的测试“缝隙”(test seam)来模拟/隔离一些不想被测试的部分.如果你正想在代码中引入这种单元测试,那么今天介绍的重构就十分有用.在这个例子中,我们的客户端代码使用一个静态类 ...
- Oracle基础(六) 数据类型
一.Oracle中的数据类型 Oracle中提供了丰富的数据类型,用来存储数据,主要包括: 1.字符类型:主要用来存储字符串类型的数据. 数据类型 长度 说明 CHAR(n BYTE/CHAR) 默认 ...
- 控制语句(if-else+循环+switch)汇编规则
[1]说说条件码 最常用的的条件码有: CF:进位标志 (无符号溢出) ZF:零标志 SF:符号标志(结果为负数) OF:溢出标志 (补码溢出, 有符号溢出) [2]有两类指令设置条件码而不改变任何其 ...
- compass做雪碧图
由于最近没什么时间好好写博文,我把用sass做雪碧图的关键点贴出来方便自己记忆: config.rb注释 # Set this to the root of your project when dep ...
- [转]WPF 获取程序启动路径
本文转自:http://hi.baidu.com/lilipangtou/item/f1b7488e3c92c4d05e0ec1ab 在Windows Form程序中,获取自身的启动目录是非常容易的, ...