观察者模式

1、定义

观察者模式又叫发布-订阅模式定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象(通知者)。这个主题对象观察到被观察者发生变化时，会通知全部的观察者对象，使它们可以本身更新本身

这里涉及了几个角色及他们本身功能:

1. 观察者对象：能够更新本身
2. 主题对象：能够添加观察者，移除观察者，通知观察者
3. 被观察者：被主题对象监视，当被观察者发生变化时，主题对象会通知观察者更新本身的状态

2、使用场景

当一个对象改变须要同时改变其余对象的时候，并且不须要知道有多少个对象须要改变

3、举个例子

若是干巴巴的概念描述晦涩难懂，举个生活中常见的例子说明一下

场景1：

​ 写字楼中，电脑跟前。一堆程序员趁老板出差的机会在电脑上NBA球赛，时不时激动的大喊大叫。此时，老板出差回来，恰好碰个正着，场面一度尴尬。

解决方案：

​ 为了不在公司划水摸鱼时，被进门的老板抓到，几我的想了个方案，贿赂前台小姐姐。当老板之后再进公司门的时候，小姐姐立马通知程序员们，让他们恢复到工做的状态

场景2：

​ 写字楼中，电脑跟前。一堆程序员趁老板出差的机会在电脑上NBA球赛，时不时激动的大喊大叫。此时，老板出差回来。前台小姐姐看到老板回来，立马给看球赛的小哥哥们发通知。此时小哥哥们赶忙切换成工做的状态。

场景2就是使用了观察者模式。当老板回来时，程序员们须要改变划水的状态，由前台小姐姐负责通知他们

人物	角色	功能
程序员	观察者	能够改变本身的状态
前台小姐姐	主题(通知者)	收集、移除及保存须要通知的程序员(观察者)，给程序员发送通知
老板	被观察者	被前台小姐姐观察

经过案例应该分清观察者模式中的各个对象及各个对象的功能了。接下来进行coding

4、Coding

一、前台小姐姐类（通知者类）

/*
 * desc:通知者类
 * 一、存储观察者
 * 二、添加观察者
 * 三、移除观察者
 * 四、通知观察者
 */
class Dep {
    constructor() {
        //存储观察者
        this.subs = []
    }

    /**
     * 添加观察者
     * @param {观察者对象} sub 
     */
    addSubs(sub) {
        //确保观察者都有update方法
        if (sub && sub.update) {
            this.subs.push(sub)
        }
    }

    /**
     * 移除观察者
     * @param {须要移除的观察者对象} sub 
     */
    removeSub(sub) {
        this.subs.forEach((item, index) => {
            if (sub.id === item.id) {
                this.subs.splice(index, 1)
                return;
            }
        })
    }

    /**
     * 通知观察者，调用全部观察者内部的update的方法，改变自身状态
     * */
    notify() {
        this.subs.forEach(sub => {
            sub.update()
        })
    }
}

二、程序员类（观察者类）

/**
 * 观察者对象
 */
class watcher {
    constructor(name) {
        this.name = name
    }

    //观察者对象都有本身的update方法，来改变本身的工做状态
    update() {
        console.log(`${this.name}收到通知，改变工做状态。`)
    }
}
/**
 * 观察者对象
 */
class watcher {
    constructor(name) {
        this.name = name
    }

    //观察者对象都有本身的update方法，来改变本身的工做状态
    update() {
        console.log(`${this.name}收到通知，改变工做状态。`)
    }
}

三、模拟老板回公司，前台小姐姐通知程序员

<script src="./js/Dep.js"></script>
    <script src="./js/Watcher.js"></script>
    <script>
        //同事张三
        const tongshi1 = new watcher("张三")

        //同事李四
        const tongshi2 = new watcher("李四")

        //前台小姐姐要知道哪些同事须要通知，把须要通知的同事收集起来
        const xiaojiejie = new Dep();
        xiaojiejie.addSubs(tongshi1)
        xiaojiejie.addSubs(tongshi2)

        //等待老板归来....
        //等等等....
        //等等等....
        //等等等....
        //等等等....
        //老板回来了

        //当老板回来时，前台小姐姐调用本身的notify方法通知程序员们 改变自身状态(至关于给程序员发送微信消息)
        xiaojiejie.notify()
    </script>