js オブザーバーモードの紹介と使用

/*
 * desc: 通知クラス* 1. オブザーバーを保存* 2. オブザーバーを追加* 3. オブザーバーを削除* 4. オブザーバーに通知*/
クラス Dep {
    コンストラクタ() {
        //ストレージオブザーバー this.subs = []
    }

    /**
     * オブザーバーを追加 * @param {オブザーバーオブジェクト} sub 
     */
    サブルーチンを追加します(サブルーチン) {
        // すべてのオブザーバーに更新メソッドがあることを確認する if (sub && sub.update) {
            this.subs.push(サブ)
        }
    }

    /**
     * オブザーバーを削除 * @param {削除するオブザーバーオブジェクト} sub 
     */
    サブルーチンを削除します
        this.subs.forEach((item, index) => {
            if (sub.id === item.id) {
                this.subs.splice(インデックス、1)
                戻る;
            }
        })
    }

    /**
     * オブザーバーに通知し、すべてのオブザーバー内で更新メソッドを呼び出し、自身の状態を変更します * */
    通知() {
        this.subs.forEach(sub => {
            サブ.更新()
        })
    }
}

/**
 * オブザーバーオブジェクト */
クラスウォッチャー{
    コンストラクタ(名前) {
        this.name = 名前
    }

    //オブザーバーオブジェクトには、作業ステータスを変更するための独自の更新メソッドがあります。update() {
        console.log(`${this.name} は通知を受信し、作業ステータスを変更しました。`)
    }
}
/**
 * オブザーバーオブジェクト */
クラスウォッチャー{
    コンストラクタ(名前) {
        this.name = 名前
    }

    //オブザーバーオブジェクトには、作業ステータスを変更するための独自の更新メソッドがあります。update() {
        console.log(`${this.name} は通知を受信し、作業ステータスを変更しました。`)
    }
}

 <script src="./js/Dep.js"></script>
 <script src="./js/Watcher.js"></script>
 <スクリプト>
        // 同僚の張三 const tongshi1 = new watcher("張三")

        // 同僚 Li Si const tongshi2 = new watcher("Li Si")

        // フロントデスクの女性は、どの同僚に通知する必要があるかを把握し、通知する必要がある同僚を収集する必要があります。const xiaojiejie = new Dep();
        xiaojiejie.addSubs(tongshi1)
        xiaojiejie.addSubs(tongshi2)

        //ボスが戻ってくるのを待っています...
        // 待って、待って...
        // 待って、待って...
        // 待って、待って...
        // 待って、待って...
        // ボスが戻ってきた // ボスが戻ってくると、フロントデスクの女性は自分の通知メソッドを呼び出して、プログラマーに自分のステータスを変更するように通知しますxiaojiejie.notify()
    </スクリプト>