JavaScript でオブザーバー パターンを実装する方法

JavaScript でオブザーバー パターンを実装する方法

概要

オブザーバー パターンは、パブリッシュ/サブスクライブ パターンとも呼ばれ、設計パターンの動作パターンです。

意味:

オブザーバー パターンは、1 対多のオブジェクト依存関係を定義します。依存オブジェクトの状態が変化すると、それに依存するすべてのオブジェクトに通知されます。

俗語による説明:

最新のiPhone 11を買うためにAppleストアに行ったとします。iPhone 11は発売されたばかりで、ピークシーズンなので、供給が足りていません。店舗に行くと、店員から一時的に在庫切れですが、連絡先を残しておけば、入荷したらすぐに通知が届きますと言われます。もちろん、iPhone 11が入荷したかどうかを尋ねるために毎日店に行くことは絶対にないでしょうし、毎日店に電話することもないでしょう。あなたには自分の仕事や生活があり、そんなに多くの自由時間があるはずがありません。そこで、このとき、店員は連絡先を残して、入荷したらすぐに通知するように頼みます。これでは困りません。店舗からの電話を待つだけで済みます。この方法は典型的な観察モードです。

まず、分析してみましょう。

1. 購読方法:店員に連絡先情報を伝えることはメッセージの購読であり、この方法でのみiPhone 11の到着を時間どおりに知ることができるため、購読動作には特定の方法が必要です。

2. 予約リスト:iPhone 11は新しいバージョンのiPhoneなので、予約をするのはあなただけではないことはご承知おきください。そのため、店員は統計の便宜上、すべての予約者の連絡先情報と携帯電話のバージョン情報をカウントするための予約リストが必要です。そこで、ここではオブジェクトとして定義します。キーは予約者の連絡先情報を表し、値は携帯電話のバージョン情報を表します。

3. リリース方法: iPhone 11 が到着すると、店舗は予約リストに従ってメッセージを一律にリリースする必要があります (「iPhone 11 が到着しました。皆さん、急いで手に入れてください!!!」)。そのため、店舗は特定のリリース動作を実装するためのリリース方法が必要です。

4. 購読解除: すべては相対的です。購読できる場合は、間違いなく購読解除できます。iPhone 11 の到着通知を待っているときは、急いで電話を使用する必要があるため、直接 Huawei モデルを購入します。そのため、当面は iPhone 11 の需要はあまりありません。すでに電話を持っているため、店頭の iPhone 11 が到着したかどうかは、あなたにとって重要ではありません。そのため、この時点では邪魔されたくないので、メッセージの購読を解除する必要があります。そのため、特定の購読解除動作を実装するには、購読解除メソッドが必要です。

オブザーバーパターンの応用シナリオ

1. DOMイベント

フロントエンド開発者であれば、この記事を読む前にオブザーバー パターンについて知っているかどうかにかかわらず、オブザーバー パターンを使用したことがあるはずです。

document.body.addEventListener('クリック', 関数() {
    console.log('こんにちは世界!');
});

このコードは見覚えがありますか?はい、これは DOM イベント リスナーです。body のクリック イベントをサブスクライブします (クリックは上記のサブスクリプション メソッドに相当します)。ブラウザーはマウスがクリックされたことを認識していないため、クリック イベントをトリガーすると、通知する関数がトリガーされます (パブリッシュ メソッド)。DOM イベントは、オブザーバー パターンの実装です。

2. Vue 双方向バインディング v-model

フロントエンド開発者として、vue は MVVM モードのフレームワークであることを知っておく必要があります。vue のコアは双方向バインディングであるため、双方向バインディングの実装は実際にはオブザーバー モードです。最初にデータをバインドした後 (サブスクリプション メソッド)、ブラウザーはデータをいつ変更したかを認識しないためです。ページ上のデータにバインドされている、またはデータに依存するすべてのノードは、実際には予約リストです。データの値を変更した場合にのみ、vue はデータに依存するメソッド/データに通知し (パブリッシュ メソッド)、対応する操作を実行したり更新したりします。

もちろん、オブザーバー パターンは、これら 2 つの実装シナリオに限定されるものではありません。私たちの生活やビジネス シナリオには、オブザーバー パターンの例がたくさんあります。最初のファクトリー パターンでデザイン パターンを紹介したとき、デザイン パターンは決まった公式ではなく、問題を解決するための考え方であると述べました。では、オブザーバー パターンはどのように実装するのでしょうか。

オブザーバーパターンの実装

// マーチャントを定義します var merchants = {};
//注文リストを定義します。merchants.orderList = {};
// 追加されたサブスクライバーを予約リストに追加する (サブスクリプションメソッド)
商人.listen = function(id,info){
    //存在する場合 if(!this.orderList[id]){
        // (予約リスト)
        this.orderList[id] = [];
    }
    // ユーザーが予約した商品情報を配列に保存します this.orderList[id].push(info);
}
//情報を公開する(公開メソッド)
商人.publish = 関数(){
    var id = Array.prototype.shift.call(引数);
    var infos = this.orderList[id];
    if(!infos || infos.length === 0){
        console.log("まだ予約情報がありません");
        false を返します。
    }

    for(var i = 0;i < infos.length;i++){
        console.log("予約が完了しました");
        console.log("ユーザー様:")
        infos[i].apply(this,引数);
        console.log("到着しました");
    }
}
//登録解除 merchants.remove = function(id,fn){
    var infos = this.orderList[id];
    if(!infos){ false を返す}

    if(!fn){
        コンソールログ(123);
    }それ以外{
        for(var i = 0;i < infos.length;i++){
            if (infos[i] === fn) {
                情報.splice(i,1);
            }
        }
    }
}
let customeA = function(){
    console.log("One Black プレミアムエディション");
}

商人.listen("15172103336",customeA);
商人.remove("15172103336",customeA);
商人.publish("15172103336");

上記のコードは少し長いですが、難しくはありません。まず、オブジェクトを販売者として定義し、次に空のオブジェクトを予約リストとして定義し、サブスクリプション メソッドと公開およびサブスクリプション解除メソッドを段階的に実装します。ロジックは複雑ではありませんが、説明が必要な構文がいくつかあります。

公開メソッドの var id = Array.prototype.shift.call(arguments); は、merchants.publish("15172103336"); が呼び出されると、最初のパラメータがそれに返され、id としてコピーされるため、この時点での id 値は "15172103336" になります。

infos[i].apply(this,arguments); このメソッドは特に理解しやすいものではありません。まず、infosには予約者の携帯電話番号と携帯電話バージョン情報が含まれているため、infos[i].apply(this,arguments); を使用します。このメソッドは実際には「15172103336」に対応する携帯電話バージョン情報関数を呼び出します。これは実際にはinfos[i](arguments); と同じです。

要約する

オブザーバー パターンは、フロントエンドの分野と実生活の両方で非常に一般的です。オブザーバー パターンをよく学習すると、Vue のソース コードの知識を習得するのに役立ちますが、これに限定されません。したがって、オブザーバー パターンは慎重に学習する価値があります。言い換えれば、「じっくり味わいましょう」ということです。今日の努力は、将来必ず給料で報われます。

以上がJavaScriptでオブザーバーパターンを実装する方法の詳細です。JavaScriptのオブザーバーパターンの詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

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

<<:  Linux環境変数の設定に関する完全なガイド

>>:  MySQL のインデックスとビューの使用方法と違いの詳細な説明

推薦する

Windows 10 64 ビット版に MySQL 5.6.35 をインストールするためのグラフィック チュートリアル

1. MySQL Community Server 5.6.35をダウンロードするダウンロードアドレ...

MySQLのMERGEストレージエンジンの詳細な説明

MERGE ストレージ エンジンは、MyISAM テーブルのグループを論理ユニットとして扱い、同時に...

MySQL 5.7.18 無料インストールバージョンの設定チュートリアル

MySQL 5.7.18 無料インストール版のインストールチュートリアルMySQL は現在、世界で最...

MySQL テーブル削除操作の実装 (delete、truncate、drop の違い)

この記事では主に、MySQL でテーブルを削除する 3 つの操作、つまり delete ステートメン...

CSS3+HTML5+JSでブロックの縮小・拡大アニメーション効果を実現

最近、あるプロジェクトに取り組んでいたとき、自分のプロジェクトでは CSS3 のアニメーション技術を...

MySql ストアド プロシージャ パラメータの初歩的な使用法の詳細な説明

パラメータでのストアドプロシージャの使用IN パラメータは、プロシージャに情報を渡すためにのみ使用さ...

Linux ネットワーク システムの紹介

目次ネットワーク情報ホスト名を変更するDNSドメイン名解決ネットワーク関連コマンドファイアウォール暗...

vue-element-adminフレームワークを使用して、バックエンドからメニュー機能を動的に取得します。

目次2. 詳しい説明2.1. asyncRoutesルーティングを追加する2.2. 新しいpermi...

Viteは仮想ファイルの実装を導入します

目次背景仮想ファイルのインポート例書類タイプスクリプトのサポート要約する背景新しいプロジェクトで v...

MySQL 5.7.20 解凍版のインストールとルートパスワードの変更に関するチュートリアル

1. MySQL アーカイブ (解凍版) をダウンロードするURL: https://downloa...

React onClickにパラメータを渡す問題について話しましょう

背景下のようなリストでは、削除ボタンをクリックすると削除操作を実行する必要があります。 リスト生成:...

Mysql ルートユーザーアカウントのパスワードをリセットする問題を解決する

問題の説明: mysqladmin.exe を使用してコマンドを実行すると、次のエラー メッセージが...

MySQLでヘッダー付きのCSVファイルをエクスポートする方法

公式ドキュメント http://dev.mysql.com/doc/refman/5.7/en/se...

Vue + 要素の動的複数ヘッダーと動的スロット

目次1. 需要2. 効果3. すべてのコード1. 需要ユーザーが自分でテーブルを構成できるようになり...

JavaScript におけるセミコロンの詳細

序文JavaScript ではセミコロンはオプションであり、使用するかどうかは主にコーディング スタ...