JS中的发布-订阅者模式

迷南。 2022-04-23 13:54 208阅读 0赞

## 一、前言 ##

学习vue的时候，对深入响应式原理模模糊糊的，现在简单一下理解。

### 二、简述VUE响应原理。 ###

> vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，  
> 在数据变动时发布消息给订阅者，触发相应的监听回调。

### 三、什么是发布-订阅者模式 ###

简单理解：比如一个商店，会员粉丝经常要询问有什么活动，员工每次都要做一遍解答，工作重复又麻烦，但是把所有会员的邮箱收集成名单，有活动时统一发送邮件。会员就是订阅者，商店就是发布者会在合适的时候遍历名单，依次给会员发布消息。发送邮件通知就是一个的发布—订阅模式

> 多个订阅者（一般是注册的函数）同时监听同一个数据对象，当这个数据对象发生变化的时候会执行一个发布事件，通过这个发布事件会通知到所有的订阅者，使它们能够自己改变对数据对象依赖的部分状态。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsaXNhX2xpc2E_size_16_color_FFFFFF_t_70]

### 四、发布订阅者模式的作用 ###

主要为了处理一对多的场景,应用于不同情况下的不同函数的调用

> 优点：耦合性低，便于代码的维护  
> 缺点：创建订阅者本身要消耗一定的时间和内存，可能订阅的消息未发生，但这个订阅者会始终存在于内存中

### 五、代码示例 ###

*  创建发布-订阅者模式的对象

function Event () { 
    	  this.handlers = { };
    	}

Event .prototype = { 
    	 	// 订阅事件
    	    on: function(eventType, handler){ 
    	        var self = this;
    	        if(!(eventType in self.handlers)) { 
    	           self.handlers[eventType] = [];
    	        }
    	        self.handlers[eventType].push(handler);
    	        return this;
    	    },
    	     // 触发事件(发布事件)
    	    emit: function(eventType){ 
    	       var self = this;
    	       var handlerArgs = Array.prototype.slice.call(arguments,1);
    	       for(var i = 0; i < self.handlers[eventType].length; i++) { 
    	         self.handlers[eventType][i].apply(self,handlerArgs);
    	       }
    	       return self;
    	    },
    	    // 删除订阅事件
    	    off: function(eventType, handler){ 
    	        var currentEvent = this.handlers[eventType];
    	        var len = 0;
    	        if (currentEvent) { 
    	            len = currentEvent.length;
    	            for (var i = len - 1; i >= 0; i--){ 
    	                if (currentEvent[i] === handler){ 
    	                    currentEvent.splice(i, 1);
    	                }
    	            }
    	        }
    	        return this;
    	    }
    	};

*  使用发布-订阅者模式

let Publisher = new Event ();	 
    	//订阅事件a
    	Publisher.on('a', function(e){ 
    	    console.log(1 + e);
    	});
    	Publisher.on('a', function(e){ 
    	    console.log(2 + e);
    	});
    	 
    	//触发事件a
    	Publisher.emit('a', '我是第1次调用');
    	 
    	Publisher.emit('a', '我是第2次调用');

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsaXNhX2xpc2E_size_16_color_FFFFFF_t_70]: /images/20220309/4514edb3da024112be207d89f954da22.png