手撕Vue-数据驱动界面改变上

经过上一篇的介绍,已经实现了监听数据的变化,接下来就是要实现数据变化后,界面也跟着变化,这就是数据驱动界面改变。

想要实现数据变化之后更新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方法。

构造器中定义了一个数组,用于管理某个属性所有的观察者对象。

好了,现在我们已经定义了观察者类和发布订阅类,先到此为止,下一篇文章再继续。

相关推荐
王哈哈^_^1 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie2 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic2 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿3 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具3 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
customer083 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
清灵xmf3 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据4 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161774 小时前
防抖函数--应用场景及示例
前端·javascript
334554324 小时前
element动态表头合并表格
开发语言·javascript·ecmascript