js设计模式-观察者模式来模拟vue的双向数据绑定

客官°小女子只卖身不卖艺 2021-09-19 00:36 139阅读 0赞

vue的双向数据绑定大家应该很熟悉了，当一方的值发生改变时，另一方绑定的值也会随之变化，用起来是挺嗨的。

但是在原生中我们怎么使用这种机制呢？

最近有个需求是通过对接websocket获取后台服务器实时变化的值，推送给web端使用。

基于这个需求，我使用到了js中的设计模式-观察者模式。

那么，让我们来一起了解一下吧。

先来看看具体机制：

//发布订阅模式的代码
    var observer = {
    	//订阅(订阅功能)
    	addSubscriber:function(callback){
    		this.subscribers.push(callback);
    	},
    	//退订
    	removeSubscriber:function(callback){
    		let index = this.subscribers.indexOf(callback);
    		this.subscribers.splice(index,1);
    	},
    	//发布
    	publish:function(what){
    		for(let i in this.subscribers){
    			if(typeof this.subscribers[i]==="function"){
    				this.subscribers[i](what);
    			}
    		}
    	},
    	//让某个对象具备发布订阅功能
    	make:function(obj){
    		for(let key in this){
    			obj[key] = this[key];
    		}
    		obj.subscribers = [];
    	}
    }

这里对象定义了四个属性，分别绑定四个函数。

1、订阅：订阅方通过传递回调函数，观察者模式把这个回调函数push到自身的订阅功能里，以此来得知谁订阅了，然后判断是否要推送。

2、退订：找到对应的回调函数，然后在自身的订阅功能里把当前函数删除掉

3、发布：循环所有的订阅方，当发布方进行发送的时候，把对应的数据推送给订阅方

4、发布订阅：定义一个对象，使其具备订阅并且发布的功能

流程是这样，说起来头头是道的，问题是怎么使用？

举个栗子：

我想定义一个对象，使其具备发布订阅功能，发布方数值改变的时候，订阅方得到平方值得变化

<!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>设计模式-观察者模式案例</title>
    </head>
    <body>
    	请输入一个数：<input type="text"  id="num"><br/>	
    	平方：<input type="text"  id="sqrtnum"><br/>	
    	立方：<input type="text"  id="cubenum"><br/>	
    </body>
    </html>
    <script type="text/javascript" src="js/tools.js"></script>
    <script type="text/javascript" src="js/observer.js"></script>
    <script type="text/javascript">
    	window.onload = function(){
    
    		// 定义一个JavaScript对象，使其具有发布和订阅功能
    		let numObj = {};
    		observer.make(numObj);
    
    		//订阅一个平方功能
    		numObj.addSubscriber(function(num){
    			$("#sqrtnum").value = num*num;
    		});
    		//订阅一个立方功能
    		numObj.addSubscriber(function(num){
    			$("#cubenum").value = num*num*num;
    		});
    
    		//在文本框的内容发生变化时，进行发布
    		$("#num").oninput = function(){
    			numObj.publish(this.value);
    		}
    	}
    </script>

这里通过input框的change事件，模拟了数据的实时变更，然后把当前值进行发布，这边一发布，订阅方就能通过回调函数得到实时变化的值，然后得到值进行相应的操作。

效果：

![2019041909460499.gif][]

这样就能简单实现数据变更推送功能了。

注：文件中引入的observer的js是最上面提到的观察者模式的那一套流程，tools的js大家可以不必在意，是我自己原生封装的$函数，用来获取dom元素的。

具体需求，大家还需要变通，稍作修改。

好了，以上就是js的观察者模式实现的双向数据绑定。

如有问题，请指出，接受批评。

个人微信公众号：

![20200824115603482.png][]

[2019041909460499.gif]: /images/20210812/040b51061d314469b53a9bf4f111235c.png
[20200824115603482.png]: /images/20210812/a6dc72785ba7465d9373c32149b6f27d.png