jsパブリッシャー・サブスクライバーパターンの使用方法の詳細な説明

今回は、js パブリッシャー-サブスクライバー モデルの使用方法について詳しく説明します。 js パブリッシャー-サブスクライバー モデルを使用する際の 注意事項 について、実際のケースを見てみましょう。

パブリッシャーとサブスクライバーのモデルは、次のような非常に一般的なモデルです。

1. 家の売買

人生における住宅の売買では、仲介業者は出版・購読者モデルを形成します。住宅を購入する人は一般に、住宅の空室状況、価格、使用可能な面積などの情報を必要とします。彼は購読者の役割を果たします

。 エージェントは売主の住宅情報を取得し、手元にある顧客の連絡先情報（住宅を購入する人の携帯電話番号）を基に買主に通知し、発行者としての役割を果たします

売主が家を売りたい場合は、仲介業者にその旨を伝え、情報を解放してもらう必要があります

2. ウェブサイト上の情報を購読するユーザー

購読者の役割: Web サイトで

javascript タイプの記事

など、特定の種類の情報を購読する必要があるインターネット ユーザー パブリッシャーの役割: メールボックス サーバー。Web サイトによって収集されたユーザー サブスクリプション メールボックスに基づいてユーザーに通知します。

ウェブサイトの所有者が購読者に情報を伝えたい場合は、送信する記事の関連コンテンツを電子メール サーバーに伝える必要があります

例はたくさんあるので、すべてをリストすることはできません

この記事では、Web サイトのサブスクリプションを使用してパブリッシャーとサブスクライバーのフレームワークを導出し、その後、パブリッシャーとサブスクライバーのフレームワークを使用して単純なショッピング カートを再構築します

var Site = {};
    Site.userList = [];
    Site.subscribe = function( fn ){
      this.userList.push( fn );
    }
    Site.publish = function(){
      for( var i = 0, len = this.userList.length; i 
Site.userList は購読者を保存するために使用されます<p style="text-align: left;"></p>
Site.subscribeは特定の購読者であり、各購読者が購読した特定の情報をSite.userListに保存します<p style="text-align: left;"></p>
Site.publish はパブリッシャーです。保存された userList に従って、1 つずつトラバース (通知) し、内部のビジネス ロジックを実行します<p style="text-align: left;"></p>
しかし、このパブリッシュ サブスクライバー モデルには問題があります。上の例では、2 つのサブスクライバー (行 11、行 14) を追加しましたが、Web サイトが情報を送信する限り、すべてのメッセージを受信できます。ただし、JavaScript や HTML5 のみを受信したいユーザーもいるかもしれないので、次は、特定の情報を受信できるように改善し続ける必要があります。誰かが購読しているタイプでなければ、受信できません<p style="text-align: left;"></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;"></p>
【JS Master's Road】寄生組み合わせ継承のメリット<p style="text-align: left;"></p>
【jsマスターへの道】es6シリーズチュートリアル - var、let、constを詳しく解説<p style="text-align: left;"></p>
カテゴリ html5 の記事を購読している人はいません<p style="text-align: left;"></p>
JavaScript タイプの記事を購読した人だけが「寄生組み合わせ継承の利点」記事を受け取ることができることがわかります。HTML5 タイプを公開すると、誰も受け取らないことがわかります。
es6タイプ、es6に加入している方のみ受け取れます<p style="text-align: left;"></p>
基本的なパブリッシャーとサブスクライバーのフレームワークはすでにあります。次に、それを他の機能や他の Web サイト システムの同じ機能で再利用できるようにフレームワークに改良します<p style="text-align: left;"></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;"></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 ファイル:

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;"></p>
再構築後のショッピング カート: <p style="text-align: left;"></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  この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 <p style="text-align: left;"></p>推奨読書: <p style="text-align: left;"></p><p style="text-align: left;">es6を分解する方法とは何ですか</p><p><a href="http://www.php.cn/js-tutorial-393280.html" target="_blank"></a><br>Node.jsファイルシステム操作</p><p><a href="http://www.php.cn/js-tutorial-393281.html" target="_blank"></a></p>

以上がjsパブリッシャー・サブスクライバーパターンの使用方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。