オブザーバーパターンとは何ですか?
シナリオシミュレーション
コードの実装//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 のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: SWFObjectを使用すると、HTMLにFlashを挿入する際のブラウザ互換性の問題を完全に解決できます。
ウェブサイトを作成するユーザーの多くが、このような問題に遭遇すると思います。Chrome のデフォル...
最近、私たちの小さなチームは、サーバー上の共有フォルダーを共有して、全員がパブリックリソースドキュメ...
目次ユーティリティ: vue での使用:説明する:画像安定化:スロットル:ユーティリティ: // 手...
mongoイメージを取得する sudo docker pull mongo mongodbサービスを...
背景情報最近、Windows パフォーマンスに関する本を読み直しています。以前は SCOM 監視を使...
個人的には、WeChat アプレットの開発フレームワークは VUE と概ね似ていると感じていますが、...
目次1. Bootstrap5 ブレークポイント1.1 モバイルファースト1.2 ブートストラップブ...
序文この記事では主に、Linux/Mac に MySQL をインストールするときにパスワードを忘れた...
目次1. ハーバーの紹介1. ハーバーが民間倉庫を建設3. 港湾の維持管理4. Harborユーザー...
パート 1 SSH ポート転送の概要カフェで無料Wi-Fiを利用しているとき、誰かがあなたのパスワー...
目次序文コンストラクタ、プロトタイプオブジェクト、インスタンスオブジェクトの関係プロトタイプチェーン...
注 1: 上の画像の背景全体がこの Web ページのフルサイズであり、中央の小さなボックスがブラウザ...
この記事では、二次リンク効果を実現するためのReact+tsの具体的なコードを参考までに共有します。...
Django Web開発の過程で、HTMLを書く際にバックエンドから同じ名前のリスト変数が渡されるが...
1. 切断理由WebSocket が切断される理由は多数あります。WebSocket が切断されたと...