JS design pattern: Observer pattern to change the amount in the page in real time. Design Pattern quota

JS design pattern: Observer pattern to change the amount in the page in real time. Design Pattern quota

The example in this article describes how to change the amount in the page in real time in the Observer mode of JS design mode. We will share this with you for your reference. The details are as follows:

Concepts of observer design patterns:

It is sometimes called the publish/subscribe mode. The observer mode defines a one-to-many dependency to allow multiple observers (the primary account amount function at each location) the object listens to a topic object at the same time (the deliver object Publisher called after the subaccount amount is modified ). When the status of the topic object (calling the deliver method) changes, all observer objects are notified so that they can automatically update themselves.

In a member management system, the primary account can recharge the subaccount.

Scenario:The primary account has RMB 10000. If you add RMB 1000 to the subaccount recharge, the primary account amount should be reduced by RMB 1000 to display RMB 9000;

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

There are three total balances to be displayed;

If you adjust the account balance through the subaddition/subtraction button, the total balance of the three items also needs to be changed;

Method 1:Add multiple element objects to a function to simplify calling repeated code;

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

Method 2:With the observer design pattern, if the state changes, the dependencies related to it will also change;

// Subscriber function a1 (price) {console. log (price); $ ("# a1" ).html (price);} // subscriber function a2 (price) {console. log (price); $ ("# a2" pai.html (price);} // subscriber function a3 (price) {console. log (price); $ ("# a3" ).html (price);} // subscriber function a4 (price) {console. log (price); $ ("# a4" ).html (price);} // publisher function PublisherPrice () {this. subscribers = []; this. addSubscriber = function (subscriber) {// some If true is returned, this. the subscriber has the same subscriber. If the first comparison value is true, true is returned. If true is not met, false is returned. var isExsit = this. subscribers. some (function (el) {return el = subscriber}); if (! IsExsit) {this. subscribers. push (subscriber);} return this;} this. deliver = function (// forEach is equivalent to for loop 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 method?

1. Each subscriber is independent of each other and only has a relationship with the publisher. It also has a one-to-one relationship with the publisher.
2. Each subscriber can call the API as needed without affecting other subscriber.
3. Compared with the first method, the second method has strong code readability and maintainability;