JavaScript 實現(xiàn)一個響應(yīng)式系統(tǒng)的解決方案
第一階段目標(biāo)
- 數(shù)據(jù)變化重新運(yùn)行依賴數(shù)據(jù)的過程
第一階段問題
- 如何知道數(shù)據(jù)發(fā)生了變化
- 如何知道哪些過程依賴了哪些數(shù)據(jù)
第一階段問題的解決方案
- 我們可用參考現(xiàn)有的響應(yīng)式系統(tǒng)（vue）
vue2 是通過
Object.defineProperty實現(xiàn)數(shù)據(jù)變化的監(jiān)控，詳細(xì)查看 Vue2官網(wǎng)。vue3 是通過
Proxy實現(xiàn)數(shù)據(jù)變化的監(jiān)控，詳細(xì)查看 Vue3官網(wǎng)。 - 本次示例使用
Proxy實現(xiàn)數(shù)據(jù)監(jiān)控,Proxy詳細(xì)信息查看官網(wǎng)。 - 根據(jù)解決方案，需要改變第一階段目標(biāo)為->
Proxy對象變化重新運(yùn)行依賴數(shù)據(jù)的過程 - 問題變更->如何知道
Proxy發(fā)生了變化 - 問題變更->如何知道哪些函數(shù)依賴了哪些
Proxy
如何知道 Proxy 對象發(fā)生了變化，示例代碼
//這里傳入一個對象，返回一個Proxy對象，對Proxy對象的屬性的讀取和修改會觸發(fā)內(nèi)部的get，set方法
function relyOnCore(obj) {
if (typeof obj !== "object" || obj === null) {
return obj;
}
return new Proxy(obj, {
get(target, key, receiver) {
return target[key];
},
set(target, key, value, receiver) {
//這里需要返回是否修改成功的Boolean值
return Reflect.set(target, key, value);
},
});
}數(shù)據(jù)監(jiān)控初步完成，但是這里只監(jiān)控了屬性的讀取和設(shè)置，還有很多操作沒有監(jiān)控，以及數(shù)據(jù)的 this 指向，我們需要完善它
//完善后的代碼
export function relyOnCore(obj) {
if (typeof obj !== "object" || obj === null) {
return obj;
}
return new Proxy(obj, {
get(target, key, receiver) {
if (typeof target[key] === "object" && target[key] !== null) {
//當(dāng)讀取的值是一個對象，需要重新代理這個對象
return relyOnCore(target[key]);
}
return Reflect.get(target, key, receiver);
},
set(target, key, value, receiver) {
return Reflect.set(target, key, value, receiver);
},
ownKeys(target) {
return Reflect.ownKeys(target);
},
getOwnPropertyDescriptor(target, key) {
return Reflect.getOwnPropertyDescriptor(target, key);
},
has(target, p) {
return Reflect.has(target, p);
},
deleteProperty(target, key) {
return Reflect.deleteProperty(target, key);
},
defineProperty(target, key, attributes) {
return Reflect.defineProperty(target, key, attributes);
},
});
}如何知道哪些函數(shù)依賴了哪些 Proxy 對象
問題：依賴 Proxy 對象的函數(shù)要如何收集
在收集依賴 Proxy 對象的函數(shù)的時候出現(xiàn)了一個問題： 無法知道數(shù)據(jù)在什么環(huán)境使用的，拿不到對應(yīng)的函數(shù)
解決方案
既然是因為無法知道函數(shù)的執(zhí)行環(huán)境導(dǎo)致的無法找到對應(yīng)函數(shù)，那么我們只需要給函數(shù)一個固定的運(yùn)行環(huán)境就可以知道函數(shù)依賴了哪些數(shù)據(jù)。
示例
//定義一個變量
export let currentFn;
export function trackFn(fn) {
return function FnTrackEnv() {
currentFn = FnTrackEnv;
fn();
currentFn = null;
};
}自此，我們的函數(shù)調(diào)用期間 Proxy 對象監(jiān)聽到的數(shù)據(jù)讀取在 currentFn 函數(shù)內(nèi)部發(fā)生的。
同樣，我們的目標(biāo)從最開始的 數(shù)據(jù)變化重新運(yùn)行依賴數(shù)據(jù)的過程 -> Proxy 對象變化重新運(yùn)行依賴收集完成的函數(shù)
完善函數(shù)調(diào)用環(huán)境
直接給全局變量賦值，在函數(shù)嵌套調(diào)用的情況下，這個依賴收集，會出現(xiàn)問題
let obj1 = relyOnCore({ a: 1, b: 2, c: { d: 3 } });
function fn1() {
let a = obj1.a;
function fn2() {
let b = obj1.b;
}
//這里的c會無法收集依賴
let c = obj1.c;
}我們修改一下函數(shù)收集
export const FnStack = [];
export function trackFn(fn) {
return function FnTrackEnv() {
FnStack.push(FnTrackEnv);
fn();
FnStack.pop(FnTrackEnv);
};
}第二階段目標(biāo)
- 在合適的時機(jī)觸發(fā)合適的函數(shù)
第二階段問題
- 在什么時間觸發(fā)函數(shù)
- 到達(dá)觸發(fā)時間時，應(yīng)該觸發(fā)什么函數(shù)
第一個問題：在什么時間觸發(fā)函數(shù)
必然是在修改數(shù)據(jù)完成之后觸發(fā)函數(shù)
第二個問題：應(yīng)該觸發(fā)什么函數(shù)
當(dāng)操作會改變函數(shù)讀取的信息的時候，需要重新運(yùn)行函數(shù)。因此，我們需要建立一個映射關(guān)系
{
//對象
"obj": {
//屬性
"key": {
//對屬性的操作
"handle": ["fn"] //對應(yīng)的函數(shù)
}
}
}
在數(shù)據(jù)改變的時候，我們只需要根據(jù)映射關(guān)系，循環(huán)運(yùn)行 handle 內(nèi)的函數(shù)
數(shù)據(jù)讀取和函數(shù)建立聯(lián)系
我們可以創(chuàng)建一個函數(shù)用于建立這種聯(lián)系
export function track(object, handle, key, fn) {}這個函數(shù)接收 4 個參數(shù)，object(對象),handle(對數(shù)據(jù)的操作類型) key(操作了對象的什么屬性)，fn(需要關(guān)聯(lián)的函數(shù))
我們現(xiàn)在來創(chuàng)建映射關(guān)系
export const ObjMap = new WeakMap();
export const handleType = {
GET: "GET",
SET: "SET",
Delete: "Delete",
Define: "Define",
Has: "Has",
getOwnPropertyDescriptor: "getOwnPropertyDescriptor",
ownKeys: "ownKeys",
};
export function track(object, handle, key, fn) {
setObjMap(object, key, handle, fn);
}
function setObjMap(obj, key, handle, fn) {
if (!ObjMap.has(obj)) {
ObjMap.set(obj, new Map());
}
setKeyMap(obj, key, handle, fn);
}
const setKeyMap = (obj, key, handle, fn) => {
let keyMap = ObjMap.get(obj);
if (!keyMap.has(key)) {
keyMap.set(key, new Map());
}
setHandle(obj, key, handle, fn);
};
const setHandle = (obj, key, handle, fn) => {
let keyMap = ObjMap.get(obj);
let handleMap = keyMap.get(key);
if (!handleMap.has(handle)) {
handleMap.set(handle, new Set());
}
setFn(obj, key, handle, fn);
};
const setFn = (obj, key, handle, fn) => {
let keyMap = ObjMap.get(obj);
let handleMap = keyMap.get(key);
let fnSet = handleMap.get(handle);
fnSet.add(fn);
};現(xiàn)在已經(jīng)實現(xiàn)了數(shù)據(jù)和函數(shù)之間的關(guān)聯(lián)只需要在讀取數(shù)據(jù)時調(diào)用這個方法去收集依賴就可以，代碼如下：
export function relyOnCore(obj) {
if (typeof obj !== "object" || obj === null) {
return obj;
}
return new Proxy(obj, {
get(target, key, receiver) {
track(target, handleType.GET, key, FnStack[FnStack.length - 1]);
if (typeof target[key] === "object" && target[key] !== null) {
return relyOnCore(target[key]);
}
return Reflect.get(target, key, receiver);
},
//....這里省略剩余代碼
});
}接下來我們需要建立數(shù)據(jù)改變->影響哪些數(shù)據(jù)的讀取之間的關(guān)聯(lián)
export const TriggerToTrackMap = new Map([
[handleType.SET, [handleType.GET, handleType.getOwnPropertyDescriptor]],
[
handleType.Delete,
[
handleType.GET,
handleType.ownKeys,
handleType.Has,
handleType.getOwnPropertyDescriptor,
],
],
[handleType.Define, [handleType.ownKeys, handleType.Has]],
]);建立這樣關(guān)聯(lián)后，我們只需要在數(shù)據(jù)變動的時候，根據(jù)映射關(guān)系去尋找需要重新運(yùn)行的函數(shù)就可以實現(xiàn)響應(yīng)式。
export function trigger(object, handle, key) {
let keyMap = ObjMap.get(object);
if (!keyMap) {
return;
}
let handleMap = keyMap.get(key);
if (!handleMap) {
return;
}
let TriggerToTrack = TriggerToTrackMap.get(handle);
let fnSet = new Set();
TriggerToTrack.forEach((handle) => {
let fnSetChiren = handleMap.get(handle);
if (fnSetChiren) {
fnSetChiren.forEach((fn) => {
if (fn) {
fnSet.add(fn);
}
});
}
});
fnSet.forEach((fn) => {
fn();
});
}總結(jié)
以上簡易的實現(xiàn)了響應(yīng)式系統(tǒng)，只是粗略的介紹了如何實現(xiàn)，會存在一些 bug
到此這篇關(guān)于JavaScript 如何實現(xiàn)一個響應(yīng)式系統(tǒng)的文章就介紹到這了,更多相關(guān)JavaScript 響應(yīng)式系統(tǒng)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
今天在編碼時，遇到一個問題，特記錄下。希望對朋友有所幫助。2010-12-12
js遍歷table的所有元素的代碼，方便我們控制table的所有元素，顏色，樣式等2008-07-07
下面小編就為大家?guī)硪黄猨s實現(xiàn)各種復(fù)制到剪貼板的方法(分享)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
井字棋作為我們在上學(xué)時代必玩的一款連珠游戲，承載了很多人的童年記憶。本文我們就用HTML、css、js來實現(xiàn)一款井字棋游戲，感興趣的可以動手嘗試一下2022-04-04
JS數(shù)字千分位格式化實現(xiàn)方法總結(jié)
這篇文章主要介紹了JS數(shù)字千分位格式化實現(xiàn)方法,結(jié)合實例形式總結(jié)分析了JS實現(xiàn)數(shù)字千分位格式化的常用技巧,包括字符串的分割、拼接、遍歷及正則操作等相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2016-12-12
有時候我們在使用Canvas繪制一段文本時，會需要通過measureText()方法獲取文本的寬度，本文主要介紹了在小程序Canvas中使用measureText的方法示例，需要的朋友可以參考下2018-10-10
本文介紹的方法基于javascript，css和myFunction結(jié)合可實現(xiàn)頁面展示轉(zhuǎn)換，下面有個示例，大家可以參考下2014-07-07
JavaScript Cookie的讀取和寫入函數(shù)
Cookie的讀取和寫入實現(xiàn)函數(shù)。2009-12-12
這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)緩動動畫效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了bootstrap table分頁模板和獲取表中的ID方法,需要的朋友可以參考下2017-01-01