Javascriptでオブザーバーモードを実装する方法を教えます

Javascriptでオブザーバーモードを実装する方法を教えます

オブザーバーパターンとは何ですか?

  • オブザーバー パターンはデザイン パターンです。
  • オブザーバー パターンは、オブジェクト間の 1 対多の依存関係を定義します。オブジェクトの状態が変化すると、それに依存するすべてのオブジェクトに通知され、自動的に更新されます。
  • 簡単に言えば、オブザーバー パターンには、オブザーバーと観察対象の 2 つのモデルがあります。観察対象のオブジェクトが変化または変形すると、観察者に通知されます。

シナリオシミュレーション

  • ダブル11が来るなら、ダブル11に商品を買いたい人は観察者です。
  • あなたが購入したい製品は、観察された
  • より鮮明にするために、商品の価格を変更する販売者を追加します。販売者はパブリッシャーでもあります(公開)
  • ダブル11当日に、販売者(パブリッシャー)が商品(オブザーブド)の価格を変更し、商品を購読している人(オブザーバー)に通知が届きます。

ここに画像の説明を挿入

コードの実装

//Observer デザイン パターン //Publisher-->Merchant var shopObj = {};
//商品リスト[key:[]]、キーは商品名です shopObj.list = [];
//サブスクリプションメソッド shopObj.listen = function ( key, fn) { // keyは製品モデル、fnはサブスクリプションの動作 if (!this.list[key]) {
        this.list[キー] = [];
    }
    this.list[key].push(fn); //製品名キーを使用して製品リストにサブスクリプションを追加します}
//メッセージ公開メソッド shopObj.publish = function (key) {
    //var key = arguments[0]; //パラメータキーを渡さない場合は、次のようにすることもできます。var fns = this.list[key];
    // (var i = 0; i < fns.length; i++) の場合 {
        for(var i = 0 ,fn; fn = fns[i++];){
        // サブスクライブされた関数 fn argumentmnts を実行してすべての引数を保存します // var fn = fns[i++];
        fn.apply(これ、引数)
    }
}
// ユーザーAがサブスクリプションを追加しますshopObj.listen("Huawei", function (brand, model) {
    console.log("ユーザー A が受け取ったメッセージ: " + ブランド + モデル + "携帯電話の価格が値下げされました");
})
// ユーザー B がサブスクリプションを追加 shopObj.listen("Huawei", function (brand, model) {
    console.log("ユーザー B が受信したメッセージ: " + ブランド + モデル + "携帯電話の価格が値下げされました");
})
//c ユーザーがサブスクリプションを追加しますshopObj.listen("小米", function (brand, model) {
    console.log("ユーザー C が受信したメッセージ: " + ブランド + モデル + "携帯電話の価格が値下げされました");
})
//Double 11 加盟店が Huawei の値下げに関する情報を公開shopObj.publish("Huawei", "p30");
shopObj.publish("小米", "Mix4");

ここに画像の説明を挿入

コードのリファクタリング

//オブザーバー設計パターン var Eevent = {
    //製品リスト[キー:[]]、キーは製品名リスト:[]、
    //サブスクリプションメソッド listen: function (key, fn) { // key は製品モデル、fn はサブスクリプションの動作 if (!this.list[key]) {
            this.list[キー] = [];
        }
        this.list[キー].push(fn);
    },
    //メッセージを発行するメソッド publish: function (key) {
        //var key = arguments[0]; //パラメータキーを渡さない場合は、次のようにすることもできます。var fns = this.list[key];
        // (var i = 0; i < fns.length; i++) の場合 {
        (var i = 0, fn; fn = fns[i++];) の場合 {
            // サブスクライブされた関数 fn argumentmnts を実行してすべての引数を保存します // var fn = fns[i++];
            fn.apply(これ、引数)
        }
    }
}
//オブザーバーオブジェクトの初期化 var initEvent = function (obj) {
    (変数 i 内の Eevent) {
        obj[i] = イベント[i];
    }
}
//パブリッシャー->販売者 var shopObj = {};
イベントを初期化します。
// ユーザーAがサブスクリプションを追加しますshopObj.listen("Huawei", function (brand, model) {
    console.log("ユーザー A が受け取ったメッセージ: " + ブランド + モデル + "携帯電話の価格が値下げされました");
})
// ユーザー B がサブスクリプションを追加 shopObj.listen("Huawei", function (brand, model) {
    console.log("ユーザー B が受信したメッセージ: " + ブランド + モデル + "携帯電話の価格が値下げされました");
})
//c ユーザーがサブスクリプションを追加しますshopObj.listen("小米", function (brand, model) {
    console.log("ユーザー C が受信したメッセージ: " + ブランド + モデル + "携帯電話の価格が値下げされました");
})
//Double 11 加盟店が Huawei の値下げに関する情報を公開shopObj.publish("Huawei", "p30");
shopObj.publish("小米", "Mix4");

ここに画像の説明を挿入

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

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

<<:  SWFObjectを使用すると、HTMLにFlashを挿入する際のブラウザ互換性の問題を完全に解決できます。

>>:  ウェブデザインのための6つのヒント

推薦する

Navicateを使用してAlibaba Cloud Server上のMySQLに接続する

1. まず、サーバーの mysql にアクセスして権限を変更します。 GRANT オプション付きで、...

Zabbix 監視ソリューション - 最新の公式バージョン 4.4 [推奨]

ザビックス2019/10/12 チェンシン参照するhttps://www.zabbix.com/do...

JS を使用した簡単な雪効果の例の詳細な説明

目次序文主な実装コードHTMLコードJSコード序文南の友達の多くは、雪をほとんど見たことがない、ある...

JavaScriptの無限ループを検出して防止する方法の詳細な説明

目次序文for文の無限ループを修正while文の無限ループを修正要約する序文Js デッド ループはど...

forEachでawaitが機能しない問題を解決する

1. はじめに数日前、プロジェクトでトラバーサルに使用したときに落とし穴に遭遇し、解決するのに 1 ...

テーブル内の要素のドラッグと並べ替えの問題について簡単に説明します

最近、要素テーブルを使用すると、並べ替えの問題によく遭遇します。単純な並べ替えであれば、要素の公式が...

MySQL ストレージエンジン InnoDB の設定と使用方法の説明

MyISAM と InnoDB は、MySQL で最も一般的なストレージ エンジンです。前回の記事で...

xtrabackup による MySQL データベースのバックアップと復元

mysqldump バックアップは、その独自の特性 (テーブルのロック、基本的に挿入スクリプトまたは...

同じ IP のアクセス頻度を制限するように nginx を設定する方法

1. nginx.conf の http{} に次のコードを追加します。 limit_conn_zo...

JavaScript で DOM 要素を監視する MutationObServer の詳細

1. 基本的な使い方これは MutationObserver コンストラクターを通じてインスタンス化...

MySQL 最適化接続最適化

記事「MySQL の最適化: キャッシュの最適化」では、システムによってコンパイルされた変数値、また...

Vue-routerルーティングの使い方

目次1. 説明2. インストール3. テスト1. 説明Vue Router は、Vue.js の公式...

Dockerは公式Redisイメージをインストールし、パスワード認証を有効にします

参考: Docker 公式 Redis ドキュメント1. 特別なバージョン要件がある場合は、redi...

Tomcat 例外の解決方法 (リクエスト ターゲットに無効な文字が見つかりました。有効な文字は RFC 7230 および RFC 3986 で定義されています)

1. シナリオ表示Tomcat ログに次の例外情報が時々報告されます。何が起こっているのでしょうか...

ウェブサイトのBGM実装方法

個々のウェブマスターにとって、自分のウェブサイトをいかにユニークで個性あふれるものにするかは、常に絶...