Javascript 設計模式(4) —— 發佈訂閱模式

發佈—訂閱模式可以用一個全局的 Event 對象來實現,訂閱者不需要了解消
息來自哪個發佈者,發佈者也不知道消息會推送給哪些訂閱者,Event 作爲一個類似“中介者”
的角色,把訂閱者和發佈者聯繫起來。

發佈訂閱模式

在這裏插入圖片描述

var Event = (function(){ 
 var clientList = {}, 
	 listen, 
	 trigger, 
	 remove; 
 listen = function( key, fn ){ 
	 if ( !clientList[ key ] ){ 
	 	clientList[ key ] = []; 
	 } 
	 clientList[ key ].push( fn ); 
 }; 
 trigger = function(){ 
	 var key = Array.prototype.shift.call( arguments ), 
	 fns = clientList[ key ]; 
	 if ( !fns || fns.length === 0 ){ 
	 	return false; 
	 } 
	 for( var i = 0, fn; fn = fns[ i++ ]; ){ 
	 	fn.apply( this, arguments ); 
	} 
 }; 
 remove = function( key, fn ){ 
	 var fns = clientList[ key ]; 
	 if ( !fns ){ 
	 	return false; 
	 }
   if ( !fn ){ 
 	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 ); 
	 } 
 	} 
 } 
 };
  return { 
	 listen: listen, 
	 trigger: trigger, 
	 remove: remove 
 } 
})();

功能1 :Event 作爲一個類似“中介者”,把訂閱者和發佈者聯繫起來

Event.listen( 'squareMeter88', function( price ){ // 小紅訂閱消息
 console.log( '價格= ' + price ); // 輸出:'價格=2000000' 
}); 
Event.trigger( 'squareMeter88', 2000000 ); // 售樓處發佈消息

功能2 :模塊間的通信 A → B

比如現在有兩個模塊,a 模塊裏面有一個按鈕,每次點擊按鈕之後,b 模塊裏的 div 中會顯示
按鈕的總點擊次數,我們用全局發佈—訂閱模式完成下面的代碼,使得 a 模塊和 b 模塊可以在保
持封裝性的前提下進行通信。


<body> 
 <button id="count">點我</button> 
 <div id="show"></div> 
</body>

<script type="text/JavaScript">
var a = (function(){
	var count = 0 ;
	var button = document.getElementById('count');
	button.onclick = function(){
		Event.trigger('add',count++)
	}
}();
var b = (function(){
	var div = document.getElementById('show');
	Event.listen('add',function(count){
		div.innerHTML = count ;
	})
})()
</script>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章