Detailed explanation of the use of js publisher-subscriber pattern

This time I will bring you a detailed explanation of the use of the js publisher-subscriber model. What are the precautions when using the js publisher-subscriber model? Here are practical cases, let’s take a look.

The publisher-subscriber pattern is a very common pattern, such as:

1. Buying and selling a house

When buying and selling houses in life, intermediaries form a publish-subscriber model. People who buy houses generally need information such as housing availability, price, usable area, etc., and they act as subscribers

The intermediary obtains the seller's house information and notifies the buyer based on the customer contact information on hand (the mobile phone number of the person who buys the house). He acts as a publisher

If the seller wants to sell his house, he needs to tell the agent and give the information to the agent for release

2. Users who subscribe to information on the website

Subscriber role: Internet users who need to subscribe to certain types of information, such as javascript type articles

on a website Publisher role: Mailbox server, notifies users based on user subscription mailboxes collected by the website.

If the website owner wants to tell the information to the subscribers, he needs to tell the email server the relevant content of the article to send

There are so many examples, I won’t list them all

This article uses website subscription to derive the publisher-subscriber framework, and then uses the publisher-subscriber framework to reconstruct a simple shopping cart

var Site = {};
    Site.userList = [];
    Site.subscribe = function( fn ){
      this.userList.push( fn );
    }
    Site.publish = function(){
      for( var i = 0, len = this.userList.length; i <p style="text-align: left;">
Site.userList is used to save subscribers</p><p style="text-align: left;">
Site.subscribe is a specific subscriber. The specific information subscribed by each subscriber is saved in Site.userList</p><p style="text-align: left;">
Site.publish is the publisher: according to the saved userList, traverse (notify) one by one and execute the business logic inside</p><p style="text-align: left;">
But this, publish-subscriber model, has a problem. It cannot subscribe to the desired type. In the above example, I added 2 subscribers (line 11, line 14). As long as the website sends information, all messages can be received, but Some users may only want to receive javascript or html5, so next, we need to continue to improve, hoping to receive specific information. If it is not the type that someone subscribes to, we will not receive it</p><pre class="brush:php;toolbar:false">var Site = {};
    Site.userList = {};
    Site.subscribe = function (key, fn) {
      if (!this.userList[key]) {
        this.userList[key] = [];
      }
      this.userList[key].push(fn);
    }
    Site.publish = function () {
      var key = Array.prototype.shift.apply(arguments),
        fns = this.userList[key];
      if ( !fns || fns.length === 0) {
        console.log( '没有人订阅' + key + "这个分类的文章" );
        return false;
      }
      for (var i = 0, len = fns.length; i <p style="text-align: left;">
Output result:</p><p style="text-align: left;">
[JS master’s road] Advantages of parasitic combined inheritance</p><p style="text-align: left;">
[JS master's road] es6 series tutorials - var, let, const detailed explanation</p><p style="text-align: left;">
No one subscribes to articles in the category html5</p><p style="text-align: left;">
We can see that only those who subscribe to the JavaScript type article can receive the "Advantages of Parasitic Combinatorial Inheritance" article. When publishing the HTML5 type, no one will receive it.</p><p style="text-align: left;">
es6 type, only those who subscribe to es6 can receive </p><p style="text-align: left;">
We already have a basic publish-subscriber framework. Next, we will improve it into a framework so that other functions or the same functions of other website systems can reuse it</p><pre class="brush:php;toolbar:false">var Event = {
      userList : {},
      subscribe : function (key, fn) {
        if (!this.userList[key]) {
          this.userList[key] = [];
        }
        this.userList[key].push(fn);
      },
      publish : function () {
        var key = Array.prototype.shift.apply(arguments),
          fns = this.userList[key];
        if (!fns || fns.length === 0) {
          console.log('没有人订阅' + key + "这个分类的文章");
          return false;
        }
        for (var i = 0, len = fns.length; i <p style="text-align: left;">
Then, let’s refactor a shopping cart instance. Before refactoring, my shopping cart was process-oriented: </p><pre class="brush:php;toolbar:false">nbsp;html>


  <meta>
  <title>Title</title>
  <script></script>


<p>
  </p>

    
•              0              单价:       15元;       小计:       0元     
    
•              0              单价:       10元;       小计:       0元     
    
•              0              单价:       5元;       小计:       0元     
    
•              0              单价:       2元;       小计:       0元     
    
•              0              单价:       1元;       小计:       0元     
  

  

    商品一共     0     件;     一共花费     0     元;     其中最贵的商品单价是0元   

cart.js file:

function getByClass(cName, obj) {
  var o = null;
  if (arguments.length == 2) {
    o = obj;
  } else {
    o = document;
  }
  var allNode = o.getElementsByTagName("*");
  var aNode = [];
  for( var i = 0 ; i <p style="text-align: left;">
The degree of coupling is too high and maintainability is poor.</p><p style="text-align: left;">
Shopping cart after reconstruction: </p><pre class="brush:php;toolbar:false">window.onload = function () {
  var Event = {
    userList: {},
    subscribe: function (key, fn) {
      if (!this.userList[key]) {
        this.userList[key] = [];
      }
      this.userList[key].push(fn);
    },
    publish: function () {
      var key = Array.prototype.shift.apply(arguments),
        fns = this.userList[key];
      if (!fns || fns.length === 0) {
        return false;
      }
      for (var i = 0, len = fns.length; i input:first-child"),
      aBtnPlus = document.querySelectorAll( "#box li>input:nth-of-type(2)"),
      curNum = 0, curUnitPrice = 0;
    for( var i = 0, len = aBtnMinus.length; i  0) && Event.publish( "total-goods-num-minus" );
        --this.parentNode.children[1].innerHTML = 0) && Event.publish( "total-goods-num-plus" );
        this.parentNode.children[1].innerHTML++;
        curUnitPrice = this.parentNode.children[4].innerHTML;
        Event.publish( "plus-num" + this.index, 
          parseInt( curUnitPrice ),
          parseInt( this.parentNode.children[1].innerHTML )
        );
      }
    }
  })();
  (function(){
    var aSubtotal = document.querySelectorAll("#box .subtotal"),
      oGoodsNum = document.querySelector("#goods-num"),
      oTotalPrice = document.querySelector("#total-price");
      Event.subscribe( 'total-goods-num-plus', function(){
        ++oGoodsNum.innerHTML;
      });
      Event.subscribe( 'total-goods-num-minus', function(){
        --oGoodsNum.innerHTML;
      });
    for( let i = 0, len = aSubtotal.length; i <p style="text-align: left;"> 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! </p><p style="text-align: left;">Recommended reading:</p><p><a href="http://www.php.cn/js-tutorial-393280.html" target="_blank">What are the methods of deconstructing es6</a><br></p><p>##Node.js file system operation<a href="http://www.php.cn/js-tutorial-393281.html" target="_blank"></a> <br></p>

The above is the detailed content of Detailed explanation of the use of js publisher-subscriber pattern. For more information, please follow other related articles on the PHP Chinese website!