Einführung und Verwendung des JS-Beobachtermodus

/*
 * desc: Benachrichtigungsklasse* 1. Beobachter speichern* 2. Beobachter hinzufügen* 3. Beobachter entfernen* 4. Beobachter benachrichtigen*/
Klasse Dep {
    Konstruktor() {
        //Speicherbeobachter this.subs = []
    }

    /**
     * Beobachter hinzufügen * @param {Beobachterobjekt} sub 
     */
    addSubs(sub) {
        // Stelle sicher, dass alle Beobachter über Update-Methoden verfügen if (sub && sub.update) {
            dies.subs.push(sub)
        }
    }

    /**
     * Beobachter entfernen * @param {zu entfernendes Beobachterobjekt} sub 
     */
    entferneSub(sub) {
        dies.subs.forEach((Element, Index) => {
            wenn (sub.id === item.id) {
                dies.subs.splice(index, 1)
                zurückkehren;
            }
        })
    }

    /**
     * Benachrichtigen Sie den Beobachter, rufen Sie die Aktualisierungsmethode in allen Beobachtern auf und ändern Sie ihren eigenen Status * */
    benachrichtigen() {
        dies.subs.forEach(sub => {
            unter.update()
        })
    }
}

/**
 * Beobachterobjekt */
Klassenbeobachter {
    Konstruktor(Name) {
        dieser.name = Name
    }

    //Observer-Objekte haben ihre eigene Update-Methode um ihren Arbeitsstatus zu ändern update() {
        console.log(`${this.name} hat eine Benachrichtigung erhalten und den Arbeitsstatus geändert.`)
    }
}
/**
 * Beobachterobjekt */
Klassenbeobachter {
    Konstruktor(Name) {
        dieser.name = Name
    }

    //Observer-Objekte haben ihre eigene Update-Methode um ihren Arbeitsstatus zu ändern update() {
        console.log(`${this.name} hat eine Benachrichtigung erhalten und den Arbeitsstatus geändert.`)
    }
}

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

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

        //Die Dame an der Rezeption muss wissen, welche Kollegen benachrichtigt werden müssen, und die Kollegen sammeln, die benachrichtigt werden müssen. const xiaojiejie = new Dep();
        xiaojiejie.addSubs(tongshi1)
        xiaojiejie.addSubs(tongshi2)

        //Warten auf die Rückkehr des Chefs...
        // Warte, warte …
        // Warte, warte …
        // Warte, warte …
        // Warte, warte …
        //Der Chef ist zurück//Wenn der Chef zurückkommt, ruft die Dame an der Rezeption ihre eigene Benachrichtigungsmethode auf, um die Programmierer zu benachrichtigen, dass sie ihren eigenen Status ändern sollenxiaojiejie.notify()
    </Skript>