>[success] # 發布訂閱模式實現通用模型 ~~~ 1.剛才的代碼有個問題不能復用，將代碼封裝復用(js設計模式與開發實踐書中例子) ~~~ >[danger] ##### 代碼實現 ~~~ 1.下面代碼定義了一個'event' 對象,這個對象是一個發布訂閱模型， 然后定義了一個方法'installEvent' 給那些需要發布訂閱模型的對象賦值 2.也可以用繼承的方式 ~~~ ~~~ var event = { clientList:{}, listen:function (key, fn) { if(!this.clientList[key]){ this.clientList[key] = [] } this.clientList[key].push(fn) }, trigger:function () { var key = Array.prototype.shift.call(arguments) fns = this.clientList[key] if(!fns||fns.length ===0){ return false } for(var i=0 ,fn;fn=fns[i++];){ fn.apply(this,arguments) } } } // installEvent 用來給所有函數增加動態安裝發布功能 var installEvent = function (obj) { for(var i in event){ obj[i] = event[i] } } // 聲明一個售樓處對象 salesOffices var salesOffices = {} installEvent(salesOffices) salesOffices.listen('squareMeter88',function (price) { console.log('價格='+price) }) salesOffices.listen('squareMeter188',function (price) { console.log('價格='+price) }) salesOffices.trigger('squareMeter88',200000) salesOffices.trigger('squareMeter188',300000) ~~~ >[danger] ##### 進一步去完善這個發布訂閱模式 -- 取消訂閱事件 ~~~ 1.現在我們有發布對象他的構成： 1.1.'用來緩存對象的屬性'， 1.2.'用來記錄訂閱者需求，并且把這些需求記錄到緩存對象中' 1.3.'用來發布對應消息的方法' 2.如果我雖然訂閱了，但突然想取消接受，這時候我們需要做一個'取消訂閱事件' 3.增加一個取消訂閱事件需要考慮，三點 3.1.如果要取消的事件本身不存在 3.2.如果沒有指定要取消的具體事件 3.2.如果找到了具體訂閱事件回調 ~~~ ~~~ /** * 1.做一個發布者 * 1.1.儲存訂閱者的地方 -- 數據庫類似 * 1.2.保存這些訂閱者 -- 新增 * 1.3.可以刪除這些訂閱者 -- 刪除 * 1.4.同意調用這些訂閱者 -- 符合定義一個對象改變，其依賴對象發生變化 * **/ var event = { clientList:{}, listen:function (key, fn) { if(!this.clientList[key]){ this.clientList[key] = [] } this.clientList[key].push(fn) }, trigger:function () { var key = Array.prototype.shift.call(arguments) fns = this.clientList[key] if(!fns||fns.length ===0){ return false } for(var i=0 ,fn;fn=fns[i++];){ fn.apply(this,arguments) } } } // 增加了一個取消訂閱方法 event.remove = function( key, fn ){ var fns = this.clientList[ key ]; if ( !fns ){ // 如果 key 對應的消息沒有被人訂閱，則直接返回 return false; } if ( !fn ){ // 如果沒有傳入具體的回調函數，表示需要取消 key 對應消息的所有訂閱 fns && ( fns.length = 0 ); }else{ for ( var l = fns.length - 1; l >=0; l-- ){ // 反向遍歷訂閱的回調函數列表 var _fn = fns[ l ]; if ( _fn === fn ){ fns.splice( l, 1 ); // 刪除訂閱者的回調函數 } } } }; var salesOffices = {}; var installEvent = function( obj ){ for ( var i in event ){ obj[ i ] = event[ i ]; } } installEvent( salesOffices ); salesOffices.listen( 'squareMeter88', fn1 = function( price ){ // 小明訂閱消息 console.log( '價格= ' + price ); }); salesOffices.listen( 'squareMeter88', fn2 = function( price ){ // 小紅訂閱消息 console.log( '價格= ' + price ); }); salesOffices.remove( 'squareMeter88', fn1 ); // 刪除小明的訂閱 salesOffices.trigger( 'squareMeter88', 2000000 ); // 輸出：2000000 ~~~