發(fā)布者訂閱者模式，是一種很常見的模式，比如:

一、買賣房子

生活中的買房，賣房，中介就構(gòu)成了一個(gè)發(fā)布訂閱者模式，買房的人，一般需要的是房源，價(jià)格，使用面積等信息，他充當(dāng)了訂閱者的角色

中介拿到賣主的房源信息，根據(jù)手頭上掌握的客戶聯(lián)系信息(買房的人的手機(jī)號(hào))，通知買房的人，他充當(dāng)了發(fā)布者的角色

賣主想賣掉自己的房子，就需要告訴中介，把信息交給中介發(fā)布

二，網(wǎng)站訂閱信息的用戶

訂閱者角色：需要訂閱某類信息的網(wǎng)民，如某個(gè)網(wǎng)站的javascript類型文章

發(fā)布者角色：郵箱服務(wù)器，根據(jù)網(wǎng)站收集到的用戶訂閱郵箱，通知用戶.

網(wǎng)站主想把信息告訴訂閱者，需要把文章相關(guān)內(nèi)容告訴郵箱服務(wù)器去發(fā)送

等等非常多的例子，不一一列舉

本文用網(wǎng)站訂閱的方式，推導(dǎo)發(fā)布者-訂閱者框架，然后用發(fā)布者-訂閱者框架來(lái)重構(gòu)一個(gè)簡(jiǎn)單的購(gòu)物車

var Site = {};    Site.userList = [];    Site.subscribe = function( fn ){      this.userList.push( fn );    }    Site.publish = function(){      for( var i = 0, len = this.userList.length; i < len; i++ ){        this.userList[i].apply( this, arguments );      }     }    Site.subscribe( function( type ){      console.log( "網(wǎng)站發(fā)布了" + type + "內(nèi)容" );    });    Site.subscribe( function( type ){      console.log( "網(wǎng)站發(fā)布了" + type + "內(nèi)容" );    });    Site.publish( 'javascript' );    Site.publish( 'html5' );

Site.userList就是用來(lái)保存訂閱者

Site.subscribe就是具體的訂閱者，把每一個(gè)訂閱者訂閱的具體信息保存在Site.userList

Site.publish就是發(fā)布者：根據(jù)保存的userList，一個(gè)個(gè)遍歷(通知)，執(zhí)行里面的業(yè)務(wù)邏輯

但是這個(gè)，發(fā)布訂閱者模式，有個(gè)問(wèn)題，不能訂閱想要的類型，上例我加了2個(gè)訂閱者(第11行,第14行)，只要網(wǎng)站發(fā)了信息，全部能收到，但是有些用戶可能只想收到j(luò)avascript或者h(yuǎn)tml5的，所以，接下來(lái)，我們需要繼續(xù)完善，希望能夠接收到具體的信息，不是某人訂閱的類型，就不接收

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( '沒(méi)有人訂閱' + key + "這個(gè)分類的文章" );        return false;      }      for (var i = 0, len = fns.length; i < len; i++) {        fns[i].apply(this, arguments);      }    }    Site.subscribe( "javascript", function( title ){      console.log( title );    });    Site.subscribe( "es6", function( title ){      console.log( title );    });    Site.publish( "javascript", "[js高手之路]寄生組合式繼承的優(yōu)勢(shì)" );    Site.publish( "es6", "[js高手之路]es6系列教程 - var, let, const詳解" );    Site.publish( "html5", "html5新的語(yǔ)義化標(biāo)簽" );