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

最新推荐文章于 2023-09-10 18:01:22 发布

Judy1623

最新推荐文章于 2023-09-10 18:01:22 发布

阅读量110

点赞数 1

分类专栏： js js之设计模式前端知识点 javascript 设计模式文章标签：发布订阅

js 同时被 3 个专栏收录

40 篇文章 0 订阅

订阅专栏

前端知识点

34 篇文章 0 订阅

订阅专栏

js之设计模式

9 篇文章 1 订阅

订阅专栏

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

Judy1623

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript 设计模式(4) —— 发布订阅模式

发布—订阅模式可以用一个全局的 Event 对象来实现，订阅者不需要了解消息来自哪个发布者，发布者也不知道消息会推送给哪些订阅者，Event 作为一个类似“中介者”的角色，把订阅者和发布者联系起来。发布订阅模式var Event = (function(){ var clientList = {}, listen, trigger, remove; list...
复制链接

扫一扫

专栏目录