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. C# 自定义重绘TextBox

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...

  2. A C

    Problem Description Are you excited when you see the title "AC" ? If the answer is YES , A ...

  3. [JavaEE] applicationContext.xml配置文件使用合集

    配置实例 – 1 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http ...

  4. 【Android车载系统 News | Tech 3】News 从手机征战到汽车 Android Auto对比CarPlay 2014-12-29

    Google和苹果都试图给用户的汽车带来一个安全和友好的移动体验.Android Auto和CarPlay是这两家公司推出的专为车载而重新设计的移动用户界面,双方目前都在筹备着在明年正式大规模推广. ...

  5. 利用apktool反编译apk

    下载apktool所需文件: a. apktool1.5.2.tar.bz2 b.apktool-install-windows-r05-ibot.tar.bz2  (windows系统) 步骤阅读 ...

  6. Ubuntu15.10使用mysql

    安装 sudo apt-get install mysql-server sudo apt-get install mysql-client sudo apt-get install libmysql ...

  7. 第06篇 MyEclipse 2016 安装/破解

    和玩得来的人在一起玩才叫玩! 和玩不来的人在一起玩,那种感觉就像加班啊!                                                                 ...

  8. 转: android apk 防止反编译技术(1~5连载)

    转: android apk 防止反编译技术 做android framework方面的工作将近三年的时间了,现在公司让做一下android apk安全方面的研究,于是最近就在网上找大量的资料来学习. ...

  9. 前台传到servlet的乱码问题要怎么处理

  10. 学习Slim Framework for PHP v3 (三)

    继续上一篇的问题,如何动态的添加不同的Module.添加Module是给Middleware用的,用于调用Module的写日志方法.上篇中的写法是在app->add(mv),这时的middlew ...