Observer mode changes the page amount

This time I will bring you Observer modeChange the page amount, Observer mode changes the page amountWhat are the precautions, the following is a practical case, one Get up and take a look.

The example of this article describes the method of the observer mode of JSdesign pattern to realize real-time change of the amount in the page. Share it with everyone for your reference, as follows:

Concept of Observer Design Pattern:

Sometimes called the publish/subscribe pattern, the observer pattern defines a One-to-many dependency allows multiple observer (main account amount function at each location) objects to monitor a certain topic object (deliver object Publisher called after modifying the sub-account amount) at the same time. This topic object will notify all observer objects when the state (calling the deliver method) changes, allowing them to automatically update themselves.

In a membership management system, the main account has the function of recharging the amount of money to the sub-account.

Scenario: The main account has 10,000 yuan. If the recharge of the sub-account is increased by 1,000 yuan, then the amount of the main account should be reduced by 1,000 yuan and displayed as 9,000 yuan;

There are many places on the page that need to be changed in real time. What should I do?

There are three total balances to be displayed in the above picture;

If you adjust the account balance through the sub-add and subtract buttons, the total balance of these three places will also be Relative changes are needed;

The first way:Add multiple element objects in a function, which can be a facade mode to simplify calling repeated code;

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

Second way: Use the observer design pattern. If the state changes, the dependencies related to it will also change;

// 订阅者
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;
 }
}

Client call

var publisherPrice = new PublisherPrice();
publisherPrice.addSubscriber(a1);
publisherPrice.addSubscriber(a2);
publisherPrice.addSubscriber(a3);
publisherPrice.addSubscriber(a4);
publisherPrice.deliver("￥200.00");

What are the advantages of the second one?

1. Each subscriber is independent of each other and only has a relationship with the publisher. It has a one-to-many relationship with the publisher, or it can also be a one-to-one relationship.
2. Each subscriber can call according to its own needs without affecting other subscribers.
3. Compared with the first method, the code of the second method is more readable and maintainable. ;

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

JS automatically calculates hotel accommodation costs

##The effect of displaying the loading circle before the picture is loaded

How to make a public subsequence in JS

The above is the detailed content of Observer mode changes the page amount. For more information, please follow other related articles on the PHP Chinese website!