首页 > 编程语言> > Javascript 设计模式(3) —— 发布订阅模式

Javascript 设计模式(3) —— 发布订阅模式

2019-07-15 14:07:59 作者：互联网

发布—订阅模式可以用一个全局的 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>

标签：function,订阅,fns,Javascript,key,var,设计模式,Event,fn
来源： https://blog.csdn.net/weixin_39100915/article/details/95945909