發佈—訂閱模式可以用一個全局的 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>