資訊專欄INFORMATION COLUMN
摘要：觀察者模式應用場景場景一當觀察的數據對象發生變化時自動調用相應函數。比如的雙向綁定場景二每當調用對象里的某個方法時就會調用相應訪問邏輯。
觀察者模式
應用場景:
場景一: 當觀察的數據對象發生變化時, 自動調用相應函數。比如 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 是對對象的劫持;
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110035.html
摘要：設計模式與開發實踐讀書筆記。發布訂閱模式又叫觀察者模式，它定義了對象之間的一種一對多的依賴關系。附設計模式之發布訂閱模式觀察者模式數據結構和算法系列棧隊列優先隊列循環隊列設計模式系列設計模式之策略模式 《JavaScript設計模式與開發實踐》讀書筆記。 發布-訂閱模式又叫觀察者模式，它定義了對象之間的一種一對多的依賴關系。當一個對象的狀態發生改變時，所有依賴它的對象都將得到通知。 例...
摘要：設計模式與開發實踐讀書筆記?？创宋恼虑埃ㄗh先看設計模式之發布訂閱模式觀察者模式在中，已經介紹了什么是發布訂閱模式，同時，也實現了發布訂閱模式。 《JavaScript設計模式與開發實踐》讀書筆記。 看此文章前，建議先看JavaScript設計模式之發布-訂閱模式（觀察者模式）-Part1 在Part1中，已經介紹了什么是發布-訂閱模式，同時，也實現了發布-訂閱模式。但是，就Part1...
摘要：設計模式與開發實踐讀書筆記。看此文章前，建議先看設計模式之發布訂閱模式觀察者模式在中，已經介紹了什么是發布訂閱模式，同時，也實現了發布訂閱模式。 《JavaScript設計模式與開發實踐》讀書筆記。 看此文章前，建議先看JavaScript設計模式之發布-訂閱模式（觀察者模式）-Part1 在Part1中，已經介紹了什么是發布-訂閱模式，同時，也實現了發布-訂閱模式。但是，就Part1...
閱讀 2470·2021-11-17 09:33
閱讀 757·2021-11-04 16:13
閱讀 1328·2021-10-14 09:50
閱讀 691·2019-08-30 15:53
閱讀 3657·2019-08-30 14:18
閱讀 3267·2019-08-30 14:14
閱讀 2093·2019-08-30 12:46
閱讀 3178·2019-08-26 14:05
