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

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

このケースを通じて、オブザーバー パターン内のさまざまなオブジェクトと機能を区別できるようになります。次にコーディング

4. コーディング

1. フロントデスクの女性(通知者)

/*
 * 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 => {
            サブ.更新()
        })
    }
}

2. プログラマクラス(オブザーバークラス)

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

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

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

3. 上司が会社に戻り、フロントデスクの女性がプログラマーに通知するのをシミュレートします。

 <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()
    </スクリプト>

Java デザインパターンにおけるオブザーバーパターンの導入と使用背景に関するこの記事はこれで終わりです。より関連性の高いオブザーバーパターンのコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。皆様の今後の 123WORDPRESS.COM へのご支援をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript でオブザーバー パターンを実装する方法
  • js オブザーバー モード 弾丸 スクリーン ケース
  • JavaScript デザイン パターン: オブザーバー モードとパブリッシュ サブスクライブ モードの詳細な説明
  • JavaScript デザイン パターン - オブザーバー パターンの原則と使用例
  • ネイティブ js で実装されたオブザーバー モードとサブスクライバー モードの簡単な例
  • JavaScript オブザーバー パターンの原則と使用例
  • Javascriptでオブザーバーモードを実装する方法を教えます

定義

オブザーバー パターンは 1 対多の依存関係を定義し、複数のオブザーバー オブジェクトが同時にサブジェクト オブジェクト (通知オブジェクト) を監視できるようにします。サブジェクト オブジェクトは、監視対象オブジェクトの変更を監視すると、すべてのオブザーバー オブジェクトに通知して、各オブザーバー オブジェクトが自身を更新できるようにします。

ここではいくつかの役割が関与しており、それぞれに次のような機能があります。

  1. オブザーバーオブジェクト: 自身を更新できる
  2. 対象オブジェクト: オブザーバーの追加、削除、通知が可能
  3. オブザーバー: 対象オブジェクトによって監視されます。監視対象オブジェクトが変更されると、対象オブジェクトはオブザーバーにステータスの更新を通知します。

2. 使用シナリオ

1つのオブジェクトを変更すると、同時に他のオブジェクトも変更する必要があり、変更する必要があるオブジェクトの数を知る必要がない場合

3. 例を挙げる

概念の説明がわかりにくくて理解しにくい場合は、日常生活からの例を挙げて説明してください。

シナリオ 1:

オフィスビル内のパソコンの前。プログラマーの一団は、上司が出張中であることを利用し、コンピューターで NBA の試合を観戦しながら、時折興奮して叫んでいた。ちょうどそのとき、出張から帰ってきた上司が偶然彼らと遭遇し、気まずい状況になってしまいました。

解決:

会社でサボっていたところ、上司に見つかってしまうのを避けるために、数人がフロントの女性に賄賂を贈る計画を立てました。上司が再び会社に来た時、その女性はすぐにプログラマーたちに知らせ、仕事に戻るように頼みました。

シナリオ2:

オフィスビル内のパソコンの前。プログラマーの一団は、上司が出張中であることを利用し、コンピューターで NBA の試合を観戦しながら、時折興奮して叫んでいた。この時、上司が出張から帰ってきました。フロントの女性はボスが戻ってくるのを見て、すぐに試合を観戦していた男たちに知らせました。この時、若者たちはすぐに仕事モードに切り替わりました。

シナリオ 2 では、オブザーバー パターンを使用します。上司が戻ってきたら、プログラマーはパドリング ステータスを変更する必要があり、フロント デスクの女性がそれを通知する責任があります。

役割関数
プログラマーオブザーバーステータスを変更できます
フロントの女性件名(通知者)通知が必要なプログラマ(オブザーバー)を収集、削除、保存し、プログラマに通知を送信します。
ボスオブザーバーフロントデスクの女性に観察された

<<:  MySQL 挿入時間の 8 時間の違いの問題の解決方法

>>:  CentOS8でyumソースを変更した後にウェアハウスキャッシュの同期に失敗する問題の詳細な説明

推薦する

制限を使用すると、MySQL のページングがどんどん遅くなるのはなぜですか?

目次1. テスト実験2. 制限ページング問題に対するパフォーマンス最適化手法2.1 テーブルをカバー...

Ubuntu 16.04 サーバーで MySQL を設定し、リモート接続を有効にする方法

背景最近、Node.js を勉強しているのですが、クラウド サーバーがあることを思い出しました。しか...

Div はフラッシュを覆います。フラッシュ透過方式により、フラッシュ上に DIV レイヤーを配置できます。

2つのタイプがあります: (異なるブラウザ) 1. IEブラウザで利用可能コードをコピーコードは次の...

Navicat が MySql サーバーにリモート接続できない問題の解決策

Navicat が MySql サーバーにリモート接続できない問題の解決策は、先頭に書かれています:...

JavaScript継承のさまざまな方法とメリット・デメリットを詳しく解説

目次1. プロトタイプチェーン継承2. コンストラクタの借用(古典的な継承) 3. 組み合わせ継承4...

MySql 組み込み関数の自習知識ポイントまとめ

文字列関数文字ascii(str)のASCIIコード値をチェックし、strが空の文字列の場合は0を返...

Linux システムの .bash_profile ファイルの詳細な説明

目次1. 環境変数$PATH: 2. 環境変数を変更します。 3. bash_profileの目的要...

LinuxサーバーにVueプロジェクトをデプロイする

ケース1 vue-cliはvue3プロジェクトをビルドし、プロジェクトをLinuxサーバーにアップロ...

VMWare を使用して Windows 上で Linux 環境を構築する手順 (画像とテキスト)

Mac を返却して以来、元のラップトップは使用されていません。このラップトップの構成は非常に良好で...

MySql 8.0 と対応するドライバー パッケージの一致に関する注意事項

MySql 8.0 対応ドライバパッケージのマッチングMySql データベースをバージョン 8.0 ...

MySQL外部キーの基本的な機能と使用方法の詳細な説明

この記事では、例を使用して、MySQL 外部キーの基本的な機能と使用方法を説明します。ご参考までに、...

XHTMLにおけるH1タグの位置について

最近、H1 については多くの議論が行われていますが (記事のコンテンツ ページ内)、おおよそ 2 つ...

Vueはシンプルな虫眼鏡効果を実装します

この記事では、参考までに、簡単な虫眼鏡効果を実現するためのVueの具体的なコードを紹介します。具体的...

VirtualBoxにOpenSuseをインストールする方法

仮想マシンはホストマシンにインストールされます。 CPU とメモリはホスト マシンと共有する必要があ...

弾力性のあるナビゲーション効果を実現するJavaScript

この記事では、弾性ナビゲーション効果を実現するためのJavaScriptの具体的なコードを参考までに...