扁平化网站psd,招聘类网站怎么做,建设网站里的会员系统,做的比较好的企业网站经过上一篇的介绍#xff0c;已经实现了观察者模式的基本内容#xff0c;接下来要完成的就是将上一篇的发布订阅模式运用到 Nue 中#xff0c;实现数据驱动界面改变。 在监听数据变化的章节当中#xff0c;根据指定的区域和数据去编译渲染界面 这个步骤处#xff0c;我写了… 经过上一篇的介绍已经实现了观察者模式的基本内容接下来要完成的就是将上一篇的发布订阅模式运用到 Nue 中实现数据驱动界面改变。 在监听数据变化的章节当中根据指定的区域和数据去编译渲染界面 这个步骤处我写了一个注释这个注释是这样的第一步给外界传入的所有数据都添加get/set方法第二步就是在第一步的基础上给所有属性都添加观察者对象当数据发生变化时发布订阅触发观察者对象的回调函数重新渲染界面。 先处理下 v-model 的情况找到 CompilerUtil 中的 model 方法将其修改添加观察者对象代码: model: function (node, value, vm) {// 第二部在第一次渲染的时候, 就给所有的属性添加观察者new Watcher(vm, value, (newValue, oldValue) {node.value newValue;});node.value this.getValue(vm, value);
}, 这样就完成了第二步接下来第三步就是将当前属性的所有观察者对象都放到当前属性的发布订阅对象中管理起来 在创建观察者对象的时候在构造函数当中会调用 getOldValue 方法会调用 CompilerUtil.getValue 方法这个方法就是用于获取属性值的在编译模板之前已经给所有属性添加了 get/set 方法所以在获取属性值的时候就会触发 get 方法我们就可以在 get 方法中将当前属性的观察者对象添加到当前属性的发布订阅对象中管理起来。 在 Observer 类中的 defineRecative 方法中添加如下代码: defineReactive(obj, attr, value) {this.observer(value);// 第三步将当前属性的所有观察者对象都放到当前属性的发布订阅对象中管理起来// 创建属于当前属性的发布订阅对象let dep new Dep();Object.defineProperty(obj, attr, {get() {Dep.target dep.addSub(Dep.target);return value;},set: (newValue) {if (value ! newValue) {this.observer(newValue);value newValue;dep.notify();console.log(监听到数据的变化, 需要去更新UI);}}})
} 在上述代码中创建了一个属于当前属性的发布订阅对象然后在 get 方法中判断 Dep.target 是否存在如果存在就将当前属性的观察者对象添加到当前属性的发布订阅对象中管理起来。Dep.target 就是当前属性的观察者对象这里该需要在改造一下观察者的类将观察者对象添加到 Dep.target 中放在全局中管理起来。等到所有的属性都添加完观察者对象之后就将 Dep.target 置为 null。 改造观察者类中的 getOldValue 方法, 这样在 get 方法中就可以将当前属性的观察者对象添加到当前属性的发布订阅对象中管理起来了: getOldValue() {Dep.target this;let oldValue CompilerUtil.getValue(this.vm, this.attr);Dep.target null;return oldValue;
} 这样就完成了数据驱动界面改变的功能接下来我们就来测试一下打开浏览器控制台更改下数据看看是否会触发界面的重新渲染如下图所示: 好了到此为止我们已经完成了 v-model 数据驱动界面改变的功能。 下面我将以 debugger 的形式来讲解一下整个数据驱动界面改变的过程, 在 defineReactive get 方法中打上断点如下图所示: 返回浏览器主要关注调用栈如下图所示: 自己从下依次往上看就可以看到整个数据驱动界面改变的过程了这里我就不一一截图了大家可以自己去看一下。 如上是 get 方法代码的执行流程那么 set 的我也可以说明一下set 方法的 debugger 不是打在 defineReactive 中而是打在 Watcher 类中的 update 方法中所执行的回调函数当中如下图所示: 返回浏览器打开控制台更改数据触发 set 方法发布订阅触发 update 方法 这次也是主要关注调用栈自己从下依次往上看就可以看到整个数据驱动界面改变的过程了这里我就不一一截图了大家可以自己去看一下如下图所示:
