浅析vue项目中的观察者模式

Posted prinny

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了浅析vue项目中的观察者模式相关的知识,希望对你有一定的参考价值。

一、什么是观察者模式

  定义

    “观察者模式是软件设计模式的一种。在此种模式中,一个目标对象管理所有相依于它的观察者对象,并且在它本身的状态改变时主动发出通知。这通常透过呼叫各观察者所提供的方法来实现。此种模式通常被用来实时事件处理系统。”    -------------Wikipedia

  技术分享图片

 

  作用

  • 当抽象个体有两个互相依赖的层面时。封装这些层面在单独的对象内将可允许程序员单独地去变更与重复使用这些对象,而不会产生两者之间交互的问题。
  • 当其中一个对象的变更会影响其他对象,却又不知道多少对象必须被同时变更时。
  • 当对象应该有能力通知其他对象,又不应该知道其他对象的实做细节时。

二、vue中观察者模式浅析

  以下代码为vue中dep和watcher的观察者模式示例,watcher订阅dep,dep通知watcher执行update。

  dep.js

 1 /**
 2  * A dep is an observable that can have multiple
 3  * directives subscribing to it.
 4  */
 5 export default class Dep {
 6   static target: ?Watcher;
 7   id: number;
 8   subs: Array<Watcher>;
 9 
10   constructor () {
11     this.id = uid++
12     this.subs = []
13   }
14   
15   addSub (sub: Watcher) {        //添加订阅者
16     this.subs.push(sub)
17   }
18 
19   removeSub (sub: Watcher) {      //删除订阅者
20     remove(this.subs, sub)
21   }
22 
23   depend () {
24     if (Dep.target) {
25       Dep.target.addDep(this)
26     }
27   }
28 
29   notify () {               //通知订阅者
30     // stabilize the subscriber list first
31     const subs = this.subs.slice()
32     if (process.env.NODE_ENV !== ‘production‘ && !config.async) {
33       // subs aren‘t sorted in scheduler if not running async
34       // we need to sort them now to make sure they fire in correct
35       // order
36       subs.sort((a, b) => a.id - b.id)
37     }
38     for (let i = 0, l = subs.length; i < l; i++) {
39       subs[i].update()         //订阅者update方法
40     }
41   }
42 }

 

  watcher.js中的update方法

 1 /**
 2    * Subscriber interface.
 3    * Will be called when a dependency changes.
 4    */
 5   update () {                                  //watcher作为订阅者的update方法
 6     /* istanbul ignore else */
 7     if (this.lazy) {
 8       this.dirty = true
 9     } else if (this.sync) {
10       this.run()
11     } else {
12       queueWatcher(this)
13     }
14   }

 

三、优缺点浅析

  观察者和被观察者之间耦合小,二者没有十分紧密的联系,能够十分方便地扩展自身,但当观察者增多的时候性能会有下降。

以上是关于浅析vue项目中的观察者模式的主要内容,如果未能解决你的问题,请参考以下文章

Retrofit的浅析 —— 针对面试

[转] 浅析JavaScript设计模式——发布-订阅/观察者模式

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

js设计模式-观察者模式来模拟vue的双向数据绑定

vue的双向绑定原理浅析与简单实现

浅析Java响应式编程(Reactive Programming)