オブザーバーモードではページ量が変わります

今回はページ量を変更するためのオブザーバーモードについて説明します。ページ量を変更するためにオブザーバーモードで使用する注意事項は何ですか。以下は実際的なケースです。見てみましょう。

この記事の例では、JS

デザインパターンのオブザーバーモードを利用して、ページ上の金額をリアルタイムに変更する方法を説明しています。以下のように、参考のために全員と共有してください:

オブザーバー設計パターンの概念:

パブリッシュ/サブスクライブ パターンとも呼ばれるオブザーバー パターンは、1 対多の依存関係を定義し、複数のオブザーバーが (メイン各場所の口座金額関数) オブジェクトは、特定のトピック オブジェクト (サブ口座金額を変更した後にパブリッシャーが呼び出す配信オブジェクト) も監視します。このトピック オブジェクトは、状態 (deliver メソッドの呼び出し) が変化したときにすべてのオブザーバー オブジェクトに通知し、オブザーバー オブジェクト自体を自動的に更新できるようにします。

会員管理システムでは、メインアカウントからサブアカウントに金額をチャージする機能があります。

シナリオ: メインアカウントの残高が10,000元ある場合、サブアカウントのチャージが1,000元増加すると、メインアカウントの金額は1,000元減額され、9,000元として表示されます。ページ上の多くの場所をリアルタイムで変更する必要があります。どうすればよいでしょうか?

上の図には 3 つの合計残高が表示されます

サブ追加ボタンと減算ボタンを使用してアカウント残高を調整する場合は、これら 3 つの場所の合計残高もそれに応じて変更する必要があります。

最初の方法:

複数の要素オブジェクトを関数に追加することで、繰り返しのコードの呼び出しを簡素化できます。

function modifyPrice(price) {
 $("#a1").html(price);
 $("#a2").html(price);
 $("#a3").html(price);
 $("#a4").html(price);
}

2 番目の方法: 状態が変化した場合、それに関連する依存関係を使用します。

// 订阅者
function a1( price ) {
 console.log( price );
 $("#a1").html(price);
}
// 订阅者
function a2( price ) {
 console.log( price );
 $("#a2").html(price);
}
// 订阅者
function a3( price ) {
 console.log( price );
 $("#a3").html(price);
}
// 订阅者
function a4( price ) {
 console.log( price );
 $("#a4").html(price);
}
// 发布者
function PublisherPrice() {
 this.subscribers = [];
 this.addSubscriber = function( subscriber) {
  // some 如果返回true说明this.subscriber数姐中已经有了相同的订阅者了，当遇到第一个比较值是true就返回true，如果没有遇到true最后返回一个false;
  var isExsit = this.subscribers.some(function( el ){
   return el == subscriber
  });
  if ( !isExsit ) {
   this.subscribers.push( subscriber );
  }
  return this;
 }
 this.deliver = function(
  // forEach 相当于是for循环
  this.subscribers.forEach(function( fn ) {
   fn(price);
  });
  return this;
 }
}

クライアントコール

2 番目の利点は何ですか?

1. 各サブスクライバーは互いに独立しており、パブリッシャーとのみ 1 対多の関係を持ちます。また、1 対 1 の関係になることもあります。 2. 各サブスクライバーは、他のサブスクライバーに影響を与えることなく、自分のニーズに応じてそれを呼び出すことができます。 3. 最初の方法と比較して、2 番目のメソッドのコードはより読みやすく、保守しやすいです。 、あなたはその方法をマスターしました。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:

JSはホテルの宿泊費を自動的に計算します

画像がロードされる前にローディングサークルを表示する効果

JSでパブリックサブシーケンスを作成する方法

以上がオブザーバーモードではページ量が変わりますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。