经过上一篇的介绍,已经实现了监听数据的变化,接下来就是要实现数据变化后,界面也跟着变化,这就是数据驱动界面改变。
想要实现数据变化之后更新UI界面,我们可以使用发布订阅模式来实现,先定义一个观察者类, 再定义一个发布订阅类, 然后再通过发布订阅的类来管理观察者类。
接下来我们就来实现这个代码。
定义一个观察者类,观察属性的变化,当属性变化时,触发回调函数。
javascript
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, cb,vm是Vue的实例,attr是属性名,cb是回调函数。
定义了一个getOldValue方法,用于获取旧值,这个方法在创建观察者对象的时候就会调用,用于获取旧值。
定义了一个update方法,用于更新数据,当数据发生变化时,就会调用这个方法,用于判断新值和旧值是否相同,如果不相同,就调用回调函数。
接下来我们就来定义一个发布订阅类,用于管理观察者对象。
javascript
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方法。
构造器中定义了一个数组,用于管理某个属性所有的观察者对象。
好了,现在我们已经定义了观察者类和发布订阅类,先到此为止,下一篇文章再继续。