手寫實現基礎的reactive

看一下mdn對proxy的定義：proxy 物件用於定義基本操作的自定義行為（如屬性查詢、賦值、列舉、函式呼叫等）。

語法：

const p =

newproxy
(target, handler)

看一下proxy的基本用法：

let object =

let po =
newproxy
(object,
})

看下呼叫po.x = 5的列印結果：

vue中的reactive也是通過proxy來實現的，我們就把reactive的實現作為乙個練習。

首先是實現基礎的get和set方法：

let object =

let po =
reactive
(object)
function
reactive
(object)
,get
(obj, prop)})
}

然後是監聽set導致的元素內容變化，我們看下基礎實現，定義乙個effect，它可以直接監聽po上的屬性，以代替事件監聽的機制。在effdct中進行callback函式的入棧，看下**：

let callbacks =

let object =
let po =
reactive
(object)
effect((
)=>
)function
effect
(callback)
function
reactive
(object)
return obj[prop];}
,get
(obj, prop)})
}po.x =
5

接下來我們來看一下，如何檢視乙個函式實際用了哪些變數，我們可以在reactive變數的get方法中獲得乙個監聽的效果。

先對effect方法做乙個基本的修改：

let callbacks =

;let usereactivities =
;let object =
let po =
reactive
(object)
effect((
)=>
)function
effect
(callback)
function
reactive
(object)
return obj[prop];}
,get
(obj, prop)})
}

下面補全effect**：

let callbacks =

newmap()
;let usereactivities =
;let object =
let po =
reactive
(object)
effect((
)=>
)function
effect
(callback)if(
!callbacks.
get(reactivity[0]
).has(reactivity[1]
))callbacks.
get(reactivity[0]
).get(reactivity[1]
).push
(callback);}
}function
reactive
(object)
return obj[prop];}
,get
(obj, prop)})
}

但是現在這個函式還是沒有那麼完美，試i想一下如果object當中的a為乙個物件，那麼我們在effect中呼叫po.a.b顯然是監聽不到的，我們需要繼續進行優化。

更新reactive的方法：

function

reactive
(object)
return obj[prop];}
,get
(obj, prop)})
reactivities.
set(object, proxy)
;return proxy;
}

我們在剛才實現的reactive基礎上實現乙個調色盤的case，看下總的**：

"r" type=

"range" min=
0 max=
255/
>
"g" type=
"range" min=
0 max=
255/
>
"b" type=
"range" min=
0 max=
255/
>
"color" style=
"width:100px;height:100px;"
>
<
/div>
let callbacks =
newmap()
;let reactivities =
newmap()
;let usereactivities =
;let object =
let po =
reactive
(object)
effect((
)=>
)effect((
)=>
)effect((
)=>
) document.
getelementbyid
("r").
addeventlistener
("input"
, event => po.r = event.target.value)
; document.
getelementbyid
("g").
addeventlistener
("input"
, event => po.g = event.target.value)
; document.
getelementbyid
("b").
addeventlistener
("input"
, event => po.b = event.target.value)
;effect((
)=>, $
, $)`;
})function
effect
(callback)if(
!callbacks.
get(reactivity[0]
).has(reactivity[1]
))callbacks.
get(reactivity[0]
).get(reactivity[1]
).push
(callback);}
}function
reactive
(object)
return obj[prop];}
,get
(obj, prop)})
reactivities.
set(object, proxy)
;return proxy;
}<
/script>效果圖：
手寫實現bind
bind 方法會建立乙個新函式。當這個新函式被呼叫時，bind 的第乙個引數將作為它執行時的 this，之後的一串行引數將會在傳遞的實參前傳入作為它的引數。來自於 mdn 由此我們可以首先得出 bind 函式的兩個特點 返回乙個函式 可以傳入引數 返回函式的模擬實現 從第乙個特點開始，我們舉個例子 ...
手寫實現RPC 框架
乙個簡易的rpc框架,別的先不多說上github github gitee 註冊中心 zookeeper 使用curator 操作 通訊框架 netty 4.1.25版本 序列化 kryo 以下只寫了大體專案流程,以及展示部分 具體上方github 裡基本都寫了注釋 本rpc框架,有乙個統一的 框架...
Python 純手寫 實現KNN
實現 統計學習方法 p39 例3.1 輸入 資料集，例項x，k值，以及計算距離的方法 輸出 距離最近的k個資料，以及最近距離 首先定義三種計算距離的方法 歐氏距離，曼哈頓距離，以及各個座標值的最大值 對傳入的例項x，計算再不同的距離計算方法下的最近距離，及對應的最近的座標值 import numpy...