发布订阅模式-前端设计模式

首先理解发布和订阅

利用报刊的场景
小时候，家里人有看报刊的习惯，会和联系送报刊的人告诉他，我需要什么类型的报刊。 - 这个可以被称为订阅
接着报刊到了，送报刊的人，会把报刊送到我家。-这属于发布

在程序中怎么来定义的呢？
还是利用数组的方法是实现
type 是你定义报刊的类型
fn 是一个函数，可以理解为报刊的内容

     let event = {add(type, fn) {if (!this[type]) {this[type] = []}this[type].push(fn)}}

trigger 这个函数就是调用了我们存在数组里面的函数
它表示发布的意思。

     let event = {add(type, fn) {if (!this[type]) {this[type] = []}this[type].push(fn)},trigger(type) {if(!this[type]) returnthis[type].forEach(v => {v()})}}

下面是完整的实现代码
说下优点和缺点：
这种模式很好的维护和二次开发
它会将不同的功能分开来，低耦合性

缺点就是可读性比较差
如果不了解这种模式的，第一次看起来就很会不理解

其实 promise.all方法也是发布订阅的思想在里面

     let event = {add(type, fn) {if (!this[type]) {this[type] = []}this[type].push(fn)},trigger(type) {if(!this[type]) returnthis[type].forEach(v => {v()})}}var btn = document.querySelector("#btn")btn.addEventListener('click', function () {console.log('登录成功');event.trigger('login')})event.add('login', function () {console.log('登录之后获取用户头像');})event.add('login', function () {console.log('登录之后获取用户的历史听歌记录');})event.add('login', function () {console.log('登录之后给用户推荐歌单');})event.add('login', function () {console.log('登录之后给用户推荐VIP优惠券');})console.log(event);

类方法写的发布订阅模式

         // 订阅者class Subject {constructor() {this.state = 0,this.observers = []}// 获取state的值 不重要getState() {return this.state}setState(state) {this.state = statethis.notifyAllObservers()}notifyAllObservers() {this.observers.forEach((observer=> {observer.update()}))}attach(observer) {this.observers.push(observer)}}class Observer {constructor(name, subject) {this.name = namethis.subject = subjectthis.subject.attach(this)}update() {console.log(`${this.name} updata, state: ${this.subject.getState()}`);}}let s = new Subject()let o1 = new Observer('o1', s)let o2 = new Observer('o2', s)let o3 = new Observer('o3', s)s.setState(1)s.setState(2)s.setState(3)

发布订阅模式-前端设计模式相关推荐

实现一个完整的发布订阅模式
实现一个完整的发布订阅模式前言发布-订阅模式是我们经常会接触的到的设计模式,它定义一个对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知.在 JavaScri ...
【设计模式】692- TypeScript 设计模式之发布-订阅模式
前言在之前两篇自测清单中,和大家分享了很多 JavaScript 基础知识,大家可以一起再回顾下~ 本文是我在我们团队内部"「现代 JavaScript 突击队」"分享的一篇内容 ...
JavaScript 设计模式之观察者模式与发布订阅模式
前言在软体工程中,设计模式(design pattern)是对软体设计中普遍存在(反复出现)的各种问题,所提出的解决方案. 设计模式并不直接用来完成程式码的编写,而是描述在各种不同情况下,要怎么解决 ...
JavaScript设计模式之发布-订阅模式（观察者模式）-Part1
<JavaScript设计模式与开发实践>读书笔记. 发布-订阅模式又叫观察者模式,它定义了对象之间的一种一对多的依赖关系.当一个对象的状态发生改变时,所有依赖它的对象都将得到通知. 例如 ...
JS设计模式七：发布-订阅模式
发布-订阅模式简述发布---订阅模式又叫观察者模式,它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时,所有依赖于它的对象都将得到通知. 以网购为例: 假 ...
游戏服务器架构-设计模式之观察者模式和发布订阅模式真的一样吗？
前面我给大家分享了观察者模式和发布订阅模式,有人私信给我说这俩不是一样嘛,大体没什么区别,我猜测大多数认为这两者是一样的可以继续阅读这两篇文章,如果还不能解答你的问题,我相信这篇文章对比两者的关系会让 ...
Javascript设计模式之发布-订阅模式
简介发布-订阅模式又叫做观察者模式,他定义了一种一对多的依赖关系,即当一个对象的状态发生改变的时候,所有依赖他的对象都会得到通知. 回忆曾经作为一名前端开发人员,给DOM节点绑定事件可是再频繁不过 ...
设计模式-观察者模式发布/订阅模式
设计模式-观察者模式发布/订阅模式代码观察者接口 public interface IHanFeiZi{// 当吃早饭时public void havBreakFast();// 进行娱乐活动时 ...
从东京奥运会看js设计模式之发布订阅模式
开篇废话:本篇文章介绍发布-订阅模式,想必很多人听说过有一种观察者模式,网上既有资料说这是两种不同的设计模式,也有说这是一种模式,我倾向于认同他们是同一种设计模式.不必过于纠结开篇楔子:东京奥运会已 ...

发布订阅模式-前端设计模式

发布订阅模式-前端设计模式相关推荐

最新文章

热门文章