vue中的观察者模式和发布订阅者模式

更新日期: 2021-10-22阅读: 1.6k标签: 模式

观察者模式

目标者对象和观察者对象有相互依赖的关系,观察者对某个对象的状态进行观察,如果对象的状态发生改变,就会通知所有依赖这个对象的观察者

目标者对象 Subject,拥有方法:添加 / 删除 / 通知 Observer;
观察者对象 Observer,拥有方法:接收 Subject 状态变更通知并处理;
目标对象 Subject 状态变更时,通知所有 Observer。

vue中响应式数据变化是观察者模式 每个响应式属性都有dep,dep存放了依赖这个属性的watcher,watcher是观测数据变化的函数,如果数据发生变化,dep就会通知所有的观察者watcher去调用更新方法。因此, 观察者需要被目标对象收集,目的是通知依赖它的所有观察者。那为什么watcher也要存放dep呢?是因为当前正在执行的watcher需要知道此时是哪个dep通知了自己。

在beforeCreate之后,created之前调用observe(data)初始化响应式数据,以下是简化版代码(没有处理数组的劫持)
class Observer {
    // 需要对value的属性描述重新定义
    constructor(value) {
      this.walk(value); // 初始化的时候就对数据进行监控
    }
    walk(data) {
      Object.keys(data).forEach((key) => {
        definereactive(data, key, data[key]);
      });
    }
  }
  
  function defineReactive(data, key, value) {
    // value 可能是一个对象,要递归劫持,所以数据不能嵌套太深
    observe(value);
    let dep = new Dep();
    Object.defineProperty(data, key, {
      get() {
        // 如果有 watcher,就让 watcher 记住 dep,防止产生重复的 dep, 同时 dep 也收集此 watcher
        if (Dep.target) {
          dep.depend();
        }
        return value;
      },
      set(newVal) {
        // 数据没变动则不处理
        if (value === newVal) return;
        observe(newVal); // 如果新值是个对象,递归拦截
        value = newVal; // 设置新的值
        dep.notify(); // 通知收集的 watcher 去更新
      },
    });
}
function observe(data) {
    // 不是对象则不处理,isObject是用来判断是否为对象的函数
    if (Object.prototype.toString.call(data)!== '[object Object]') return;
    // 通过类来实现数据的观测,方便扩展,生成实例
    return new Observer(data);
}
observe(data)
在created之后,mouted之前调用mountComponent挂载组件,以下是简化版代码(没有处理watch和computed的watcher)
class Dep {
    static target = null
    constructor() {
      this.id = id++;
      this.subs = []; // 存放依赖的watcher
    }
    depend() {
      // 让正在执行的watcher记录dep,同时dep也会记录watcher
      Dep.target.addDep(this);
    }
    addSub(watcher) {
      // 添加观察者对象
      this.subs.push(watcher);
    }
    notify() {
      // 触发观察者对象的更新方法
      this.subs.forEach((watcher) => watcher.update());
    }
}
class Watcher {
    constructor(vm, exprOrFn) {
      this.vm = vm;
      this.deps = [];
      // 用来去重,防止多次取同一数据时存入多个相同dep
      this.depId = new Set();
      // exprOrFn是updateComponent
      this.getter = exprOrFn;
      // 更新页面
      this.get();
    }
    get() {
      Dep.target = watcher; // 取值之前,收集 watcher
      this.getter.call(this.vm); // 调用updateComponent更新页面
      Dep.target = null; // 取值完成后,将 watcher 删除
    }
    // dep.depend执行时调用
    addDep(dep) {
        let id = dep.id;
        let has = this.depId.has(id);
        if (!has) {
            this.depId.add(id);
            // watcher存放dep
            this.deps.push(dep);
            // dep存放watcher
            dep.addSub(this);
        }
    }  
    // 更新页面方法,dep.notify执行时调用
    update() {
        this.get(); // 一修改数据就渲染更新
    }
}
function mountComponent(vm) {
    // 渲染更新页面
    let updateComponent = () => {
      let vnode = vm._render(); // 生成虚拟节点 vnode
      vm._update(vnode); // 将vnode转为真实节点
    };
    // 每个组件都要调用一个渲染 watcher
    new Watcher(vm, updateComponent);
}
mountComponent(vm)

 

发布订阅模式

基于一个事件中心,接收通知的对象是订阅者,需要 先订阅某个事件,触发事件的对象是发布者,发布者通过触发事件,通知各个订阅者。 js中事件绑定,就是发布订阅模式

发布订阅模式相比观察者模式多了个事件中心,订阅者和发布者不是直接关联的。

vue中的事件总线就是使用的发布订阅模式

// 事件总线
class Bus {
  constructor() {
    // 用来记录事件和监听该事件的数组
    this.listeners = {};
  }
  // 添加指定事件的监听者
  $on(eventName, handler) {
    this.listeners[eventName].add(handler);
  }
  // 取消监听事件
  $off(eventName, handler) {
    this.listeners[eventName].delete(handler);
  }
  // 触发事件
  $emit(eventName, ...args) {
    this.listeners[eventName].forEach((fn) => fn(...args));
  }
}

 

观察者模式和发布订阅模式的区别

目标和观察者之间是互相依赖的。

发布订阅模式是由统一的调度中心调用,发布者和订阅者不知道对方的存在。

来自:https://www.cnblogs.com/zhengrongbaba/archive/2021/10/21/15428176.html

链接: https://www.fly63.com/article/detial/10756

js设计模式之单例模式,javascript如何将一个对象设计成单例

单例模式是我们开发中一个非常典型的设计模式,js单例模式要保证全局只生成唯一实例,提供一个单一的访问入口,单例的对象不同于静态类,我们可以延迟单例对象的初始化,通常这种情况发生在我们需要等待加载创建单例的依赖。

前端设计模式:从js原始模式开始,去理解Js工厂模式和构造函数模式

工厂模式下的对象我们不能识别它的类型,由于typeof返回的都是object类型,不知道它是那个对象的实例。另外每次造人时都要创建一个独立的person的对象,会造成代码臃肿的情况。

JavaScript设计模式_js实现建造者模式

建造者模式:是将一个复杂的对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示。工厂类模式提供的是创建单个类的模式,而建造者模式则是将各种产品集中起来进行管理,用来创建复合对象

html和xhtml,DOCTYPE和DTD,标准模式和兼容模式

主要涉及知识点: HTML与XHTML,HTML与XHTML的区别,DOCTYPE与DTD的概念,DTD的分类以及DOCTYPE的声明方式,标准模式(Standard Mode)和兼容模式(Quircks Mode),标准模式(Standard Mode)和兼容模式(Quircks Mode)的区别

前端四种设计模式_JS常见的4种模式

JavaScript中常见的四种设计模式:工厂模式、单例模式、沙箱模式、发布者订阅模式

javascript 策略模式_理解js中的策略模式

javascript 策略模式的定义是:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换。 策略模式利用组合,委托等技术和思想,有效的避免很多if条件语句,策略模式提供了开放-封闭原则,使代码更容易理解和扩展, 策略模式中的代码可以复用。

javascript观察者模式_深入理解js中的观察者模式

javascript观察者模式又叫发布订阅模式,观察者模式的好处:js观察者模式支持简单的广播通信,自动通知所有已经订阅过的对象。存在一种动态关联,增加了灵活性。目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用。

Vue中如何使用方法、计算属性或观察者

熟悉 Vue 的都知道 方法methods、计算属性computed、观察者watcher 在 Vue 中有着非常重要的作用,有些时候我们实现一个功能的时候可以使用它们中任何一个都是可以的

我最喜欢的 JavaScript 设计模式

我觉得聊一下我爱用的 JavaScript 设计模式应该很有意思。我是一步一步才定下来的,经过一段时间从各种来源吸收和适应直到达到一个能提供我所需的灵活性的模式。让我给你看看概览,然后再来看它是怎么形成的

Flutter 设计模式 - 简单工厂

在围绕设计模式的话题中,工厂这个词频繁出现,从 简单工厂 模式到 工厂方法 模式,再到 抽象工厂 模式。工厂名称含义是制造产品的工业场所,应用在面向对象中,顺理成章地成为了比较典型的创建型模式

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!