美文网首页
JS设计模式 - 观察者模式与发布/订阅模式

JS设计模式 - 观察者模式与发布/订阅模式

作者: ybrelax | 来源:发表于2019-08-03 10:23 被阅读0次

观察者模式中主体和观察者是互相感知的,发布/订阅者模式是借助第三方来实现调度的,发布者和订阅者之间互不感知。


image.png

接下来通过代码来了解两种模式的区别
观察者:

var subject = {
    observers: [],
    notify() {
        this.observers.forEach(observer =>{
            observer.update()
        })
    },
    attach (observer) {
        this.observers.push(observer)
    }
}
var observer = {
    update(){
        alert('updated')
    }
}
subject.attach(observer)
subject.notify()

发布订阅者模式
核心原理就是将订阅的方法按分类存在一个数组中,当发布时取出执行即可。

var publisher = {
    publish(pubsub) {
        pubsub.publish()
    }
}
var pubsub = {
    subscribes: [],
    publish() {
        this.subscribes.forEach(subscribe =>{
            subscribe.update();
        })
    },
    subscribe(sub) {
        this.subscribes.push(sub)
    }
}
var subscribe = {
    update() {
        console.log('update')
    },
        subscribe(pubsub) {
            pubsub.subscribe(this);
        }
}
subscribe.subscribe(pubsub)
publisher.publish(pubsub)

观察者模式与主体是一种紧耦合的状态,而发布/订阅者与主体之间是一种松耦合的状态
总的来说,发布/订阅者适合更加复杂的模式

参考:https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/25

相关文章

  • RxJava基础—观察者模式

    设计模式-观察者模式 观察者模式:观察者模式(有时又被称为发布(publish )-订阅(Subscribe)模式...

  • 发布订阅模式(观察者模式)

    发布订阅模式(观察者模式) 发布订阅也叫观察者模式 发布 && 订阅 使用

  • javascript设计模式

    设计模式 观察者模式参考:汤姆大叔的博客 观察者模式又叫发布订阅模式(Publish/Subscribe),它定义...

  • Javaの设计模式之观察者模式

    推荐阅读:《设计模式之禅》 Observer Pattern 设计模式之观察者模式(发布订阅模式) Demo gi...

  • 观察者模式&&订阅发布模式

    观察者模式&&订阅发布模式 参考:知乎-观察者模式 vs 发布订阅模式[https://zhuanlan.zhih...

  • 发布订阅和观察者模式的区别

    有些人认为观察者模式就是发布订阅模式,实际上观察者模式是包含了订阅发布模式,发布订阅模式只是观察者模式中的一种。观...

  • 【设计模式】观察者模式 和 发布订阅模式

    目录:观察者模式发布-订阅模式观察者模式和发布订阅模式的区别实现vue数据双向绑定 (1)观察者模式 (1)概念 ...

  • 设计模式之观察者模式

    观察者模式(常用设计模式) 观察者模式,是类的行为模式,又叫做发布订阅模式,模型视图模式,源监听器模式。 动机 将...

  • JavaScript设计模式六(发布-订阅模式)

    JavaScript设计模式六(发布-订阅模式) 发布-订阅模式又叫做观察者模式,定义: 定义对象间的一种一对多的...

  • 中介者模式

    观察者与订阅/发布模式的区别 1.观察者模式中观察者必须对主题进行订阅后,才能收到主题的事件。 2.订阅/发布模式...

网友评论

      本文标题:JS设计模式 - 观察者模式与发布/订阅模式

      本文链接:https://www.haomeiwen.com/subject/zngrdctx.html