成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

javascript之觀察者模式

Riddler / 3207人閱讀

摘要：觀察者模式應用場景場景一當觀察的數(shù)據(jù)對象發(fā)生變化時自動調(diào)用相應函數(shù)。比如的雙向綁定場景二每當調(diào)用對象里的某個方法時就會調(diào)用相應訪問邏輯。

觀察者模式

應用場景:

場景一: 當觀察的數(shù)據(jù)對象發(fā)生變化時, 自動調(diào)用相應函數(shù)。比如 vue 的雙向綁定;
場景二: 每當調(diào)用對象里的某個方法時, 就會調(diào)用相應"訪問"邏輯。比如給測試框架賦能的 spy 函數(shù);

場景一: 雙向綁定

Object.defineProperty
使用 Object.defineProperty(obj, props, descriptor) 實現(xiàn)觀察者模式, 其也是 vue 雙向綁定 的核心, 示例如下(當改變 obj 中的 value 的時候, 自動調(diào)用相應相關(guān)函數(shù)):

 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("調(diào)用響應函數(shù)")
       Reflect.set(target,key,value,receiver)
     }
   })
   proxy.value = 1

場景二
下面來實現(xiàn) sinon 框架的 spy 函數(shù):

 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}被調(diào)用了${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被調(diào)用了一次
  obj.someFn()
  // my name is someFn
  // someFn 被調(diào)用了2次
每當調(diào)用對象里的某個方法時, 就會調(diào)用相應"訪問"邏輯。給測試框架賦能的 spy 函數(shù);
vue 在 3.0 版本上使用 Proxy 重構(gòu)的原因

首先羅列 Object.defineProperty() 的缺點:

Object.defineProperty() 不會監(jiān)測到數(shù)組引用不變的操作(比如 push/pop 等);

Object.defineProperty() 只能監(jiān)測到對象的屬性的改變, 即如果有深度嵌套的對象則需要再次給之綁定

Object.defineProperty();

關(guān)于 Proxy 的優(yōu)點

可以劫持數(shù)組的改變;

defineProperty 是對屬性的劫持, Proxy 是對對象的劫持;

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/110035.html

相關(guān)文章

  • JavaScript設(shè)計模式之發(fā)布-訂閱模式（觀察者模式）-Part1

    摘要：設(shè)計模式與開發(fā)實踐讀書筆記。發(fā)布訂閱模式又叫觀察者模式，它定義了對象之間的一種一對多的依賴關(guān)系。附設(shè)計模式之發(fā)布訂閱模式觀察者模式數(shù)據(jù)結(jié)構(gòu)和算法系列棧隊列優(yōu)先隊列循環(huán)隊列設(shè)計模式系列設(shè)計模式之策略模式 《JavaScript設(shè)計模式與開發(fā)實踐》讀書筆記。 發(fā)布-訂閱模式又叫觀察者模式，它定義了對象之間的一種一對多的依賴關(guān)系。當一個對象的狀態(tài)發(fā)生改變時，所有依賴它的對象都將得到通知。 例...

    muzhuyu 評論0 收藏0

  • JavaScript設(shè)計模式之發(fā)布-訂閱模式（觀察者模式）-Part2

    摘要：設(shè)計模式與開發(fā)實踐讀書筆記?？创宋恼虑埃ㄗh先看設(shè)計模式之發(fā)布訂閱模式觀察者模式在中，已經(jīng)介紹了什么是發(fā)布訂閱模式，同時，也實現(xiàn)了發(fā)布訂閱模式。 《JavaScript設(shè)計模式與開發(fā)實踐》讀書筆記。 看此文章前，建議先看JavaScript設(shè)計模式之發(fā)布-訂閱模式（觀察者模式）-Part1 在Part1中，已經(jīng)介紹了什么是發(fā)布-訂閱模式，同時，也實現(xiàn)了發(fā)布-訂閱模式。但是，就Part1...

    Charlie_Jade 評論0 收藏0

  • JavaScript設(shè)計模式之發(fā)布-訂閱模式（觀察者模式）-Part2

    摘要：設(shè)計模式與開發(fā)實踐讀書筆記?？创宋恼虑?，建議先看設(shè)計模式之發(fā)布訂閱模式觀察者模式在中，已經(jīng)介紹了什么是發(fā)布訂閱模式，同時，也實現(xiàn)了發(fā)布訂閱模式。 《JavaScript設(shè)計模式與開發(fā)實踐》讀書筆記。 看此文章前，建議先看JavaScript設(shè)計模式之發(fā)布-訂閱模式（觀察者模式）-Part1 在Part1中，已經(jīng)介紹了什么是發(fā)布-訂閱模式，同時，也實現(xiàn)了發(fā)布-訂閱模式。但是，就Part1...

    chemzqm 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<