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の他の関連記事に注目してください。

以下もご興味があるかもしれません: