Introduction and use of js observer mode

/*
 * desc: notifier class* 1. Store observers* 2. Add observers* 3. Remove observers* 4. Notify observers*/
class Dep {
    constructor() {
        //Storage observer this.subs = []
    }

    /**
     * Add observer * @param {observer object} sub 
     */
    addSubs(sub) {
        // Make sure all observers have update methods if (sub && sub.update) {
            this.subs.push(sub)
        }
    }

    /**
     * Remove observer * @param {observer object to be removed} sub 
     */
    removeSub(sub) {
        this.subs.forEach((item, index) => {
            if (sub.id === item.id) {
                this.subs.splice(index, 1)
                return;
            }
        })
    }

    /**
     * Notify the observer, call the update method inside all observers, and change its own state * */
    notify() {
        this.subs.forEach(sub => {
            sub.update()
        })
    }
}

/**
 * Observer object */
class watcher {
    constructor(name) {
        this.name = name
    }

    //Observer objects have their own update method to change their working status update() {
        console.log(`${this.name} received notification and changed working status.`)
    }
}
/**
 * Observer object */
class watcher {
    constructor(name) {
        this.name = name
    }

    //Observer objects have their own update method to change their working status update() {
        console.log(`${this.name} received notification and changed working status.`)
    }
}

 <script src="./js/Dep.js"></script>
 <script src="./js/Watcher.js"></script>
 <script>
        // Colleague Zhang San const tongshi1 = new watcher("Zhang San")

        // Colleague Li Si const tongshi2 = new watcher("Li Si")

        //The front desk lady needs to know which colleagues need to be notified and collect the colleagues who need to be notified const xiaojiejie = new Dep();
        xiaojiejie.addSubs(tongshi1)
        xiaojiejie.addSubs(tongshi2)

        //Waiting for the boss to return....
        // Wait, wait...
        // Wait, wait...
        // Wait, wait...
        // Wait, wait...
        //The boss is back//When the boss comes back, the front desk lady calls her own notify method to notify programmers to change their own statusxiaojiejie.notify()
    </script>