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 のインデックスとビューの使用方法と違いの詳細な説明

推薦する

ストアド プロシージャでエラー状態をトリガーする mysql ストアド プロシージャの分析例 (SIGNAL および RESIGNAL ステートメント)

この記事では、例を使用して、MySQL がストアド プロシージャで引き起こすエラー状態 (SIGNA...

MySQL のジオメトリ型を使用して経度と緯度の距離の問題を処理する方法

テーブルを作成する テーブル `map` を作成します ( `id` int(11) NULLではな...

VMware vSAN 入門概要

1. 背景1. vSphere の共有ストレージの背景を簡単に紹介するvSphere の重要な機能は...

CSSは2つの要素をブレンドする効果(スティッキー効果)を実現します。

数年前、Taobaoのモバイル版の左下隅に面白い丸いボタンがあったことを覚えています。それをクリック...

このような大画面のデジタルスクロール効果が必要になる場合があります

大画面のデジタル スクロール効果は、最近の作業における大画面 UI ダイアグラムから生まれました。U...

LNMP と phpMyAdmin を Docker にデプロイする方法

環境準備:複数のコンテナに基づいてホストに lnmp をデプロイします。 nginx サービス: 1...

vue3.2 で追加された defineCustomElement の基本原理の詳細な説明

目次Webコンポーネントカスタム要素概要HTMLTemplateElement コンテンツ テンプレ...

JavaScript で localStorage を使用する方法

.NET の世界に参入したい開発者であれば、何が可能なのかを知る必要があります。 .NET Fram...

TSオブジェクトのスプレッド演算子とレスト演算子の詳細な説明

目次概要オブジェクトの残り属性オブジェクトの拡張プロパティオブジェクトの浅いコピーを作成するkeyo...

Ubuntu 18.04の下のディレクトリにディスクをマウントします

導入この記事では、Ubuntu 18.04 デスクトップ システムでディスクを目的のディレクトリにマ...

DevUI で独自の Angular コンポーネント ライブラリを構築する方法

目次序文コンポーネントライブラリの作成主要な構成の変更ディレクトリレイアウトの調整ライブラリ構築のた...

mysql5.7 のエンコーディングを utf8mb4 に設定する方法

最近、問題に遭遇しました。モバイル端末の絵文字や一部の絵文字は 4 バイトですが、UTF-8 は 3...

Mysql InnoDBとMyISAMの違いの分析

MySQL は、myisam、innodb、memory、archive、example など、多く...

MySQLデータベースの操作とメンテナンスのデータ復旧方法

これまでの 3 つの記事では、論理バックアップと物理バックアップを含む、MySQL データベースの一...

Vue3は現在のルーティングアドレスを取得します

正解useRouterの使用: // ルーターパス: "/user/:uid" ...