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)---观察者模式的更多相关文章

  1. [JS设计模式]:观察者模式(即发布-订阅者模式)(4)

    简介 观察者模式又叫发布---订阅模式,它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时,所有依赖于它的对象都将得到通知. 举一个现实生活中的例子,例如小 ...

  2. js设计模式——3.观察者模式

    js设计模式——观察者模式 /*js设计模式——.观察者模式*/ // 主题,保存状态,状态变化之后触发所有观察者对象 class Subject { constructor() { this.sta ...

  3. JS设计模式之观察者模式

    观察者模式,即发布与订阅模式,实现一对多的一种关系模式,当一种对象接受信号时其他所有依赖均有行为.我们在写code的时候总是会去自定义一些事件,这就是观察者常常使用的地方: JS中的观察者模式应用: ...

  4. js 设计模式之观察者模式

    观察者模式 又被称为“发布-订阅”模式,目的是解决主题对象和观察者之间功能的耦合性.发布者和订阅者之间是互不干扰的,没有联系的,通过观察者,当做中介,将二者联系起来. 例子:以学生和老师之间的为例 1 ...

  5. JavaScript设计模式(10)-观察者模式

    观察者模式 1. 介绍 发布者与订阅者是多对多的方式 通过推与拉获取数据:发布者推送到订阅者或订阅者到发布者那边拉 使并行开发的多个实现能彼此独立地进行修改 其实我们在前端开发中使用到的时间监听就是浏 ...

  6. JS设计模式——10.门面模式

    门面模式 这是一种组织性的模式,它可以用来修改类和对象的接口,使其更便于使用.它可以让程序员过得更轻松,使他们的代码变得更容易管理. 门面模式有两个作用: 简化类的接口 消除与使用她的客户代码之间的耦 ...

  7. js设计模式-观察者模式

    定义: 观察者模式又叫发布订阅模式,它定义了对象间的一种一对多的依赖关系.观察者模式让两个对象松耦合地联系在一起,虽然不太清楚彼此的细节,但这不影响他们之间的互相通信. 思路 定义一个对象,在对象中实 ...

  8. js 设计模式——观察者模式

    观察者模式 定义 观察者模式(又被称为发布-订阅(Publish/Subscribe)模式,属于行为型模式的一种,它定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象.这个主题对象在状 ...

  9. 前端笔记之JavaScript面向对象(三)初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发

    一.ES6语法 ES6中对数组新增了几个函数:map().filter().reduce() ES5新增的forEach(). 都是一些语法糖. 1.1 forEach()遍历数组 forEach() ...

  10. js设计模式:工厂模式、构造函数模式、原型模式、混合模式

    一.js面向对象程序 var o1 = new Object();     o1.name = "宾宾";     o1.sex = "男";     o1.a ...

随机推荐

  1. LeetCode31 Next Permutation

    题目: Implement next permutation, which rearranges numbers into the lexicographically next greater per ...

  2. Pandas系列教程——写在前面

    之前搜pandas资料,发现互联网上并没有成体系的pandas教程,于是乎突然有个爱迪页儿,打算自己把官网的文档加上自己用pandas的理解,写成一个系列的教程, 巩固自己,方便他人 接下来就干这件事 ...

  3. Sumdiv 等比数列求和

    Sumdiv Sumdiv Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 15364   Accepted: 3790 De ...

  4. cocos2d-x lua 使用ListView

    cocos2d-x lua 使用ListView version: cocos2d-x 3.6 本文主要讲述:使用Cocos Studio创建ListView,和列表项的模板,代码中通过模板创建列表的 ...

  5. (一)u-boot2013.01.01 for TQ210:《Uboot简介》

    一直想写一个s5pv210硬件平台的u-boot的移植文档,但一直都忙着没时间写.先写一些u-boot的脚本分析吧,包括makefile,mkconfig,config.mk,主要侧重于语法句意的分析 ...

  6. Oracle基础 存储过程和游标

    一.带游标的存储过程 游标作为参数有两种类型: 1.声明系统游标类型 SYS_REFCURSOR 1)游标作为存储过程的参数: --带游标的存储过程 CREATE OR REPLACE PROCEDU ...

  7. XML基础概念

    XML基础概念 一.什么是XML. 可扩展标记语言(EXtensible Markup Language),标准通用标记语言的子集,是一种用于标记电子文件使其具有结构性的标记语言. 二.XML特点 1 ...

  8. oracle-同义词Synonyms + 用户访问控制(grant 和 revoke)

    同义词(Synonyms) 创建同义词:    语法    CREATE [PUBLIC] SYNONYM synonym        FOR    object; CREATE SYNONYM   ...

  9. VC++ UTF-8与GBK格式转换

    // 注释:多字节包括GBK和UTF-8 int GBK2UTF8(char *szGbk,char *szUtf8,int Len) { // 先将多字节GBK(CP_ACP或ANSI)转换成宽字符 ...

  10. 兼容性调试-- 在谷歌浏览器中,td 设置colspan的失效的问题

    通过设置table width="100%"table-layout="fixed" 解决