觀察者模式(observer mode)指的是函式自動觀察資料物件,一旦物件有變化,函式就會自動執行。
const person =
observable()
;function
print()
, $`)
}observe
(print)
;person.name =
'李四'
;// 輸出
// 李四, 20
上面**中,資料物件person是觀察目標,函式print是觀察者。一旦資料物件發生變化,print就會自動執行。
下面,使用 proxy 寫乙個觀察者模式的最簡單實現,即實現observable和observe這兩個函式。思路是observable函式返回乙個原始物件的 proxy **,攔截賦值操作,觸發充當觀察者的各個函式。
const queuedobservers =
newset()
;const
observe
= fn => queuedobservers.
add(fn)
;const
observable
= obj =>
newproxy
(obj,);
function
set(target, key, value, receiver)
上面**中,先定義了乙個set集合,所有觀察者函式都放進這個集合。然後,observable函式返回原始物件的**,攔截賦值操作。攔截函式set之中,會自動執行所有觀察者。 es6 Proxy 學習筆記
proxy 可以理解成,在目標物件之前架設一層 攔截 外界對物件的訪問都必須先通過這層攔截,通過這種 操作的機制,可以對外界的訪問進行過濾和修改。let person let obj new proxy person,obj.name lilei obj.age 暫無該值 proxy例項通過prox...
proxy的觀察者模式探索
vueconf大會,尤小右實錘vue3.0將改defineprototype為proxy。1.在vue中,object.defineproperty無法監控到陣列下標的變化,導致直接通過陣列的下標給陣列設定值,不能實時響應。為了解決這個問題,經過vue內部處理後可以使用以下幾種方法來監聽陣列。事實上...
es6 proxy的簡單使用
proxy,顧名思義是 的意思 也就是對乙個操作的 比如當我們對乙個物件要進行操作的時候,我們是這樣寫的 展示出來的效果是這樣的 瀏覽器有點問題,所以在node的環境下執行 在使用了proxy後,我們的會變成這樣 結果如下 流程的大概是這樣,1.當我們用了上面的寫法後 不要問為什麼這麼寫,遵守是唯一...