JavaScript设计模式-观察者模式

观察者模式也可以称为订阅模式，是一种从发布，到订阅，再到通知的过程。

首先说什么是观察者模式：观察者模式就是定义了一个对象一对多的关系，让多个观察者同时监听一个大对象，当一个大对象发生变化时，所有的依赖它的对象都会得到通知。

比如说：淘宝上某店铺的某品牌的鞋子，有两个买家小张和小王，让他们去买鞋的时候，发现鞋子断码了，他们都问店主，这个鞋的码什么时候有货，店主回复他们说，点一下到货通知，货到了会通知你们。等到货了，通知他们，这个过程就是观察者模式的过程。

观察者模式（订阅模式）

以下说订阅模式（字少好打字）

订阅模式有五个重要的模块，分别是：发布者、发布列表、增加订阅者、发布消息、订阅者收到订阅消息。

发布者

很容易想到发布者肯定是一个一个对象

var obj = {}//发布者

发布列表

发布列表是发布者的一个方法（功能），用来存储订阅者的信息。

obj.list = []//发布列表

增加订阅者

obj.listen = function(key,fn){if(!this.list[key]){this.list[key] = [];}this.list[key].push(fn);}

fn为回调函数，作为传入订阅者的信息。key值作为，每个订阅者订阅的不同商品，相同的放在一起。

发布消息

obj.message = function(){var key = Array.prototype.shift.call(arguments);         //取出消息类型名称，这里是红色var fns = this.list[key];       //取出消息对应回调函数集合if(!fns || fns.length == 0){        //如果没有订阅这个消息，直接返回console.log(key + "还没有上货，请静心等待...");return ;}for(var i = 0,fn; fn = fns[i++] ; ){fn.apply(this,arguments);}
}

订阅者接受消息

obj.listen("红色",function(size){ //订阅者console.log("尺寸 ：" + size);
})
obj.message("黑色",40);obj.message("红色",40);

这就是观察者模式。

--主页传送门--

JavaScript设计模式-观察者模式相关推荐

JavaScript设计模式 - 观察者模式
观察者模式包含观察目标和观察者俩类对象,一个目标可以有任意数目的与之相依赖的观察者,一旦观察目标的状态发生了变化,那么所有的观察者也将得到通知当一个对象的状态发生变化的时候,所有的依赖与它的对象都将 ...
javascript设计模式-观察者模式（observer pattern）
为什么80%的码农都做不了架构师?>>> 也称作订阅发布模式,以下是 pubsubz 实现,不依赖任何库. (function ( window, doc, undef ) { ...
《JavaScript设计模式与开发实践》模式篇（5）—— 观察者模式
发布-订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知.在 JavaScript 开发中,我们一般用事件模型来替代传统的发布- ...
JavaScript设计模式之发布-订阅模式（观察者模式）-Part1
<JavaScript设计模式与开发实践>读书笔记. 发布-订阅模式又叫观察者模式,它定义了对象之间的一种一对多的依赖关系.当一个对象的状态发生改变时,所有依赖它的对象都将得到通知. 例如 ...
JavaScript设计模式之观察者模式（学习笔记）
设计模式(Design Pattern)对于软件开发来说其重要性不言而喻,代码可复用.可维护.可扩展一直都是软件工程中的追求!对于我一个学javascript的人来说,理解设计模式似乎有些困难,对仅切 ...
javascript 设计模式之观察者模式
什么是观察者模式观察者模式观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个目标对象,当这个目标对象的状态发生变化时,会通知所有观察者对象,使它们能够自动更新. -- Graph ...
16种JavaScript设计模式（中）
简介上文中介绍了学习设计模式前需要了解的一些基础概念和js的基础模式-原型模式,没看过的同学可以点这里,本章将介绍以下几种模式单例模式策略模式代理模式迭代器模式发布订阅模式命令模式组合 ...
《JavaScript设计模式与开发实践》阅读摘要
<JavaScript设计模式与开发实践>作者:曾探系统的介绍了各种模式,以及js中的实现.应用,以及超大量高质量代码,绝对值得一读面向对象的js 静态类型:编译时便已确定变量的类型 ...
javascript 的观察者模式的原理和集线器
学习之前先看一张图. 这张图片很形象的说明了观察者模式的工作原理.其中最左边那台电脑是信号发起者,我们叫它广播者,所有电脑都是信息接受者(包括最左边的广播者).我们称之为监听者.唯一的缺憾是这张图片是 ...
javascript 设计模式_开发者都应该了解的7种JavaScript设计模式
你好,欢迎收听极客视点. JavaScript 中的设计模式指的是一些可重用的解决方案,这些方案适用于编写 JavaScript Web 应用程序时常见的一些问题.最近,全栈开发人员德文(Deven) ...