JS手写实现发布订阅设计模式

最新推荐文章于 2024-08-15 22:33:35 发布

CreatorRay

最新推荐文章于 2024-08-15 22:33:35 发布

阅读量1.9k

点赞数 1

分类专栏：前端面试 vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_46171043/article/details/123719243

版权

前端同时被 3 个专栏收录

268 篇文章 24 订阅

订阅专栏

面试

170 篇文章 3 订阅

订阅专栏

vue

72 篇文章 11 订阅

订阅专栏

大部分前端应该对设计模式了解都不多，但是对Vue理解深刻的同学一定都知道发布订阅模式，因为Vue2的响应式就是基于Object.defineProperty + 发布订阅模式实现的。

今天我们就用JS简单实现一下发布订阅模式

// 观察者 watcher
class Dep {
    constructor(callback) {
        this.subs = [];
        this.callback = callback;
    }

    addSub(sub) {
        this.subs.push(sub);
    }

    notify() {
        this.subs.forEach(item => item.update(this.callback));
    }
}

// 订阅者 complier
class Sub {
    constructor(val) {
        this.val = val;
    }

    update(callback) {
        this.val = callback(this.val);
    }
}

// 发布者 observer
class Pub {
    constructor() {
        this.deps = [];
    }

    addDep(dep) {
        this.deps.push(dep);
    }

    publish(dep) {
        this.deps.forEach(item => item === dep && item.notify());
    }
}