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 ...
随机推荐
- C# 自定义重绘TextBox
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...
- A C
Problem Description Are you excited when you see the title "AC" ? If the answer is YES , A ...
- [JavaEE] applicationContext.xml配置文件使用合集
配置实例 – 1 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http ...
- 【Android车载系统 News | Tech 3】News 从手机征战到汽车 Android Auto对比CarPlay 2014-12-29
Google和苹果都试图给用户的汽车带来一个安全和友好的移动体验.Android Auto和CarPlay是这两家公司推出的专为车载而重新设计的移动用户界面,双方目前都在筹备着在明年正式大规模推广. ...
- 利用apktool反编译apk
下载apktool所需文件: a. apktool1.5.2.tar.bz2 b.apktool-install-windows-r05-ibot.tar.bz2 (windows系统) 步骤阅读 ...
- Ubuntu15.10使用mysql
安装 sudo apt-get install mysql-server sudo apt-get install mysql-client sudo apt-get install libmysql ...
- 第06篇 MyEclipse 2016 安装/破解
和玩得来的人在一起玩才叫玩! 和玩不来的人在一起玩,那种感觉就像加班啊! ...
- 转: android apk 防止反编译技术(1~5连载)
转: android apk 防止反编译技术 做android framework方面的工作将近三年的时间了,现在公司让做一下android apk安全方面的研究,于是最近就在网上找大量的资料来学习. ...
- 前台传到servlet的乱码问题要怎么处理
- 学习Slim Framework for PHP v3 (三)
继续上一篇的问题,如何动态的添加不同的Module.添加Module是给Middleware用的,用于调用Module的写日志方法.上篇中的写法是在app->add(mv),这时的middlew ...