网站群 主要功能,html静态页面的制作,西安网站群建设,网络哪家公司最好经过上一篇的介绍#xff0c;已经实现了监听数据的变化#xff0c;接下来就是要实现数据变化后#xff0c;界面也跟着变化#xff0c;这就是数据驱动界面改变。 想要实现数据变化之后更新UI界面#xff0c;我们可以使用发布订阅模式来实现#xff0c;先定义一个观察者类,… 经过上一篇的介绍已经实现了监听数据的变化接下来就是要实现数据变化后界面也跟着变化这就是数据驱动界面改变。 想要实现数据变化之后更新UI界面我们可以使用发布订阅模式来实现先定义一个观察者类, 再定义一个发布订阅类, 然后再通过发布订阅的类来管理观察者类。 接下来我们就来实现这个代码。 定义一个观察者类观察属性的变化当属性变化时触发回调函数。 class Watcher {constructor(vm, attr, cb) {this.vm vm;this.attr attr;this.cb cb;// 在创建观察者对象的时候就去获取当前的旧值this.oldValue this.getOldValue();}getOldValue() {return CompilerUtil.getValue(this.vm, this.attr);}/*** 更新的方法, 用于判断新值和旧值是否相同* 如果不相同, 那么就调用回调函数*/update() {let newValue CompilerUtil.getValue(this.vm, this.attr);if (newValue ! this.oldValue) {this.cb(newValue, this.oldValue);}}
} 上方的类中主要有三个属性分别是vm, attr, cbvm是Vue的实例attr是属性名cb是回调函数。 定义了一个getOldValue方法用于获取旧值这个方法在创建观察者对象的时候就会调用用于获取旧值。 定义了一个update方法用于更新数据当数据发生变化时就会调用这个方法用于判断新值和旧值是否相同如果不相同就调用回调函数。 接下来我们就来定义一个发布订阅类用于管理观察者对象。 class Dep {constructor() {// 这个数组就是专门用于管理某个属性所有的观察者对象的this.subs [];}/*** 订阅观察的方法* param watcher 观察者对象*/addSub(watcher) {this.subs.push(watcher);}/*** 发布订阅的方法*/notify() {this.subs.forEach(watcher watcher.update());}
} 上方的类中主要有两个方法分别是addSub和notify addSub方法用于订阅观察的方法将观察者对象添加到数组中。notify方法用于发布订阅的方法遍历数组中的观察者对象调用观察者对象的update方法。 构造器中定义了一个数组用于管理某个属性所有的观察者对象。 好了现在我们已经定义了观察者类和发布订阅类先到此为止下一篇文章再继续。
