【JavaScript设计模式】-观察者模式 Observe

关系介绍

为方便记忆我将真个模式主要分为三个部分：
发布者：在执行某个动作后将特定的消息发布到消息池
订阅者：将订阅的特定消息注册到消息池，并提交一个回调函数，在订阅的消息被触发时，会执行该回调函数，用于接受消息
消息池：用于存放所有所有订阅者的注册信息并在接受到发布者的消息后触发该消息下的所有回调函数

发布和订阅之间的关系没有先后之分，只要发布的消息在消息池中已经注册过，就会将当前消息类型下存放的回调函数全部执行

观察者模式关系图：

简单实例

// 页面加载后立即执行，使用闭包保证数据持久存在
var Observe = (function(){var __messages = {}return {// 订阅者注册信息接口subscribe:function(type,fn){// 判断是否有订阅者在列队 数组 中if(typeof __messages[type]==='undefined'){ //如果没有__messages[type] = [fn]}else{ // 如果已经存在相同类型的消息__messages[type].push(fn)}},// 发布消息接口fire:function(type,args){if(!__messages[type]){return;}var events = {type:type,args:args}var i = 0var len = __messages[type].lengthfor (; i < len; i++) {__messages[type][i].call(this,events) // 执行当前相同type的订阅消息}},// 移除信息接口remove:function(type,fn){ if(__messages[type] instanceof Array){var i= __messages[type].lengthfor(;i>=0;i--){__messages[type][i]===fn &&__messages[type].splice(i,1) // 从当前消息列队删除订阅}}}}})();// 订阅消息
Observe.subscribe('test',function(e){console.log(e);
})
var fn = function(e){console.log(e);
}Observe.subscribe('test1',fn)// 发布 ‘test’ 消息Observe.fire('test',{msg:'这是传递的参数'});Observe.fire('test1',{msg:'这是传递的参数1'});// 移除这则订阅消息Observe.remove('test1',fn); Observe.fire('test1',{msg:'这是传递的参数1'}); // 发布消息后也不会输出

实际应用场景

查看实例

一个模块即可以是订阅者，也可以是发布者：比如评论板块，当用户提交评论后，评论列表订阅的添加消息会触发从而增加一条展示数据，这时他是一个订阅者，当某一条评论删除的时候，他又作为一个发布者将删除消息发布出去。

观察者模式在实际的项目应用很广泛，比如vuex正是使用了该方式，在vue的响应式原理中也起到关键的作用。
贯彻着你是最主要的作用时解决类和对象之间的耦合解耦两个相互依赖的对象，使其依赖于观察者的消息机制。各模块之间只需要通过消息进行通讯，相互之间的修改不会影响到其他模块。

参考链接

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

JavaScript设计模式 - 观察者模式
观察者模式包含观察目标和观察者俩类对象,一个目标可以有任意数目的与之相依赖的观察者,一旦观察目标的状态发生了变化,那么所有的观察者也将得到通知当一个对象的状态发生变化的时候,所有的依赖与它的对象都将 ...
javascript设计模式-观察者模式（observer pattern）
为什么80%的码农都做不了架构师?>>> 也称作订阅发布模式,以下是 pubsubz 实现,不依赖任何库. (function ( window, doc, undef ) { ...
python观察者模式observe
python设计模式观察者模式observe 观察者模式是一个软件设计模式,一个主题对象博包涵一系列依赖他的观察者,自动通知观察者的主题对象的改变,通常会调用每个观察者的一个方法.这个设计模式非常适用 ...
设计模式(四) Observe——观察者模式
设计模式四 Observe--观察者模式观察者模式当对象间存在一对多关系时,则使用观察者模式(Observer Pattern).比如,当一个对象被修改时,则会自动通知它的依赖对象.观察者模式属于 ...
《JavaScript设计模式与开发实践》模式篇（5）—— 观察者模式
发布-订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知.在 JavaScript 开发中,我们一般用事件模型来替代传统的发布- ...
JavaScript设计模式之发布-订阅模式（观察者模式）-Part1
<JavaScript设计模式与开发实践>读书笔记. 发布-订阅模式又叫观察者模式,它定义了对象之间的一种一对多的依赖关系.当一个对象的状态发生改变时,所有依赖它的对象都将得到通知. 例如 ...
JavaScript设计模式之观察者模式（学习笔记）
设计模式(Design Pattern)对于软件开发来说其重要性不言而喻,代码可复用.可维护.可扩展一直都是软件工程中的追求!对于我一个学javascript的人来说,理解设计模式似乎有些困难,对仅切 ...
javascript 设计模式之观察者模式
什么是观察者模式观察者模式观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个目标对象,当这个目标对象的状态发生变化时,会通知所有观察者对象,使它们能够自动更新. -- Graph ...
JavaScript 设计模式核⼼原理与应⽤实践之行为型：策略模式——重构小能手，拆分“胖逻辑”
JavaScript 设计模式核⼼原理与应⽤实践之行为型:策略模式--重构小能手,拆分"胖逻辑" 行为型:策略模式--重构小能手,拆分"胖逻辑" 策略模式和 ...
16种JavaScript设计模式（中）
简介上文中介绍了学习设计模式前需要了解的一些基础概念和js的基础模式-原型模式,没看过的同学可以点这里,本章将介绍以下几种模式单例模式策略模式代理模式迭代器模式发布订阅模式命令模式组合 ...