js观察者模式的介绍及使用

/* * desc:通知者类 * 1、存储观察者 * 2、添加观察者 * 3、移除观察者 * 4、通知观察者 */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>