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

Posted 2023-05-03

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

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

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

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

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

先来看看具体机制：

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

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

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

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

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

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

举个栗子：

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

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

效果：

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

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

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

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

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

Vue.js 关于双向绑定的一些实现细节

Vue.js 双向绑定实现细节

Vue.js 是采用 Object.defineProperty 的 getter 和 setter，并结合观察者模式来实现数据绑定的。

当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。

用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

 

　　Observer ：数据监听器，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者，内部采用Object.defineProperty的getter和setter来实现

　　Compile  ：指令解析器，它的作用对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数

　　Watcher  ：订阅者，作为连接 Observer 和 Compile 的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数

　　Dep ：消息订阅器，内部维护了一个数组，用来收集订阅者（Watcher），数据变动触发notify 函数，再调用订阅者的 update 方法

　　从图中可以看出，当执行 new Vue() 时，Vue 就进入了初始化阶段，一方面Vue 会遍历 data 选项中的属性，并用 Object.defineProperty 将它们转为 getter/setter，实现数据变化监听功能；

　　另一方面，Vue 的指令编译器Compile 对元素节点的指令进行扫描和解析，初始化视图，并订阅 Watcher 来更新视图， 此时Wather 会将自己添加到消息订阅器中(Dep)，初始化完毕。

　　当数据发生变化时，Observer 中的 setter 方法被触发，setter 会立即调用Dep.notify()，Dep 开始遍历所有的订阅者，并调用订阅者的 update 方法，订阅者收到通知后对视图进行相应的更新。