javascript之观察者模式

Riddler 发布于2019-08-26 14:05 / 3249人阅读

摘要：观察者模式应用场景场景一当观察的数据对象发生变化时自动调用相应函数。比如的双向绑定场景二每当调用对象里的某个方法时就会调用相应访问逻辑。

观察者模式

应用场景:

场景一: 当观察的数据对象发生变化时, 自动调用相应函数。比如 vue 的双向绑定;
场景二: 每当调用对象里的某个方法时, 就会调用相应"访问"逻辑。比如给测试框架赋能的 spy 函数;

场景一: 双向绑定

Object.defineProperty
使用 Object.defineProperty(obj, props, descriptor) 实现观察者模式, 其也是 vue 双向绑定的核心, 示例如下(当改变 obj 中的 value 的时候, 自动调用相应相关函数):

</>复制代码 
 var obj ={
    data: {list:[]}
  }
  Object.defineProperty(obj,"list",{
    get(){
      return this.data["list"]
    },
    set(val){
      console.log("值被更改了")
      this.data["list"] = val
    }
  })

Proxy
Proxy/Reflect 是 ES6 引入的新特性, 也可以使用其完成观察者模式, 示例如下(效果同上):

</>复制代码 
   var obj = {
     value: 0
   }
   var proxy = new Proxy(obj,{
     set: function(target,key,value,receiver){
       console.log("调用响应函数")
       Reflect.set(target,key,value,receiver)
     }
   })
   proxy.value = 1

场景二
下面来实现 sinon 框架的 spy 函数:

</>复制代码 
 const sinon = {
     analyze: {},
     spy:function(obj,fnName){
      const that = this
      const oldFn = Object.getOwnPropertyDescriptor(obj,fnName).value
      Object.defineProperty(obj,fnName,{
        value:function(){
          oldFn()
          if(that.analyze[fnName]){
            that.analyze[fnName].count = ++that.analyze[fnName].count
          }else{
            that.analyze[fnName] = {}
            that.analyze[fnName].count = 1
          }
          console.log(`${fnName}被调用了${that.analyze[fnName].count}`)
        }
      })
     }
   }
   const obj = {
     someFn: function(){
      console.log(`my name is someFn`)
     }
   }
   sinon.spy(obj,"someFn")
   obj.someFn()
  //  my name is someFn
  // someFn被调用了一次
  obj.someFn()
  // my name is someFn
  // someFn 被调用了2次
每当调用对象里的某个方法时, 就会调用相应"访问"逻辑。给测试框架赋能的 spy 函数;

vue 在 3.0 版本上使用 Proxy 重构的原因

首先罗列 Object.defineProperty() 的缺点:

Object.defineProperty() 不会监测到数组引用不变的操作(比如 push/pop 等);

Object.defineProperty() 只能监测到对象的属性的改变, 即如果有深度嵌套的对象则需要再次给之绑定

Object.defineProperty();

关于 Proxy 的优点

可以劫持数组的改变;

defineProperty 是对属性的劫持, Proxy 是对对象的劫持;

GPU云服务器云服务器设计模式观察者模式观察者模式 php观察者模式 ios观察者模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110035.html

JavaScript设计模式之发布-订阅模式（观察者模式）-Part1

摘要：设计模式与开发实践读书笔记。发布订阅模式又叫观察者模式，它定义了对象之间的一种一对多的依赖关系。附设计模式之发布订阅模式观察者模式数据结构和算法系列栈队列优先队列循环队列设计模式系列设计模式之策略模式《JavaScript设计模式与开发实践》读书笔记。发布-订阅模式又叫观察者模式，它定义了对象之间的一种一对多的依赖关系。当一个对象的状态发生改变时，所有依赖它的对象都将得到通知。例...

muzhuyu 2019-08-20 12:06 评论0 收藏0
JavaScript设计模式之发布-订阅模式（观察者模式）-Part2

摘要：设计模式与开发实践读书笔记。看此文章前，建议先看设计模式之发布订阅模式观察者模式在中，已经介绍了什么是发布订阅模式，同时，也实现了发布订阅模式。《JavaScript设计模式与开发实践》读书笔记。看此文章前，建议先看JavaScript设计模式之发布-订阅模式（观察者模式）-Part1 在Part1中，已经介绍了什么是发布-订阅模式，同时，也实现了发布-订阅模式。但是，就Part1...

Charlie_Jade 2019-08-20 13:45 评论0 收藏0
JavaScript设计模式之发布-订阅模式（观察者模式）-Part2

摘要：设计模式与开发实践读书笔记。看此文章前，建议先看设计模式之发布订阅模式观察者模式在中，已经介绍了什么是发布订阅模式，同时，也实现了发布订阅模式。《JavaScript设计模式与开发实践》读书笔记。看此文章前，建议先看JavaScript设计模式之发布-订阅模式（观察者模式）-Part1 在Part1中，已经介绍了什么是发布-订阅模式，同时，也实现了发布-订阅模式。但是，就Part1...

chemzqm 2019-08-01 16:12 评论0 收藏0