行为型设计模式之观察者模式

花开花落花中妖
115 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第17天，点击查看活动详情

前言

相信很多人对于观察者已经很熟悉了，这应该是设计模式中比较经典的模式之一了，也是很多框架的源码中可以看到的身影。我们今天就来班门弄斧一下，聊一聊观察者模式。

观察模式：一个目标对象管理所有相依于它的观察者对象，并且在它本身的状态改变时主动发出通知。

从字面意思上来看，观察者其实就是两个对象之间的关系，一个是观察者，另外一个是被观察者，观察者订阅被观察者，被观察者有消息之后以广播的形式通知观察者。两者之间是直接进行交互的，没有第三者的存在。

image.png

只是这样说的话可能稍微有点不是很好理解，我们来看一下具体的应用场景，体验一下观察者的意义。

身临其境

小王同学最近迷上了“一年一度戏剧大赛”这个综艺节目，天天的期盼着新一期节目的更新，为了能第一时间收到节目更新的通知，小王同学就开通了一个爱奇艺会员并订阅了这一档节目的更新通知。

    class Object {
        constructor(name) {
            this.name = name;
        }
    
        update() {
            console.log('节目更新了');
        }
    }
    
    const user = new Object('小王');

“一年一度喜剧大赛”开通了订阅最新节目通知的功能，支持喜爱这个节目的用户可以订阅消息，然后可以第一时间收到节目更新的通知，先人一步欣赏精彩节目。

    class Subscriber {
        constructor() {
            this.observerList = [];
        }
        
        subscribe(observer) {
            this.observerList.push(observer);
        }
        
        unsubscribe(observer) {
            this.observerList = this.observerList.filter(observerItem => observerItem !== observer);
        }
        
        notice() {
            this.observerList.forEach(observer => {
                observer.update();
            });
        }
    }
    
    const video = new Subscriber();
    
    video.push(user);

经过了一个周之后，终于迎来了新的一期节目。我们的爱奇艺兴奋的将这个好消息告诉到每一位期待着节目更新的用户，让每一个热爱这个节目的用户可以第一时间收到这个好消息，然后进行节目观看。

    video.notice();

这个时候，小王同学说到了通知，开开心心的去看新一期的“一年一度喜剧大赛”了。

总结

观察者模式可以让我将多个对象之间进行解耦，观察者和被观察者之间以发布订阅的形式进行动态关联。当然，观察者模式也不是完全没有任何劣势的。有时候发生一些预期之外的情况的时候，比较难以快速的定位到问题点，另外就是观察者和被观察者不完全解耦。

好了，有关观察者模式的内容我们就聊到这里了，希望能够对大家有所帮助。

欢迎大家在下方留言交流。

avatar
文章
阅读
粉丝