JS代理對象Proxy初體驗簡單的數據驅動視圖
引言
上大學的時候,最流行的框架是JQuery,它是事件驅動類型的,也就是說,當一個數據與DOM的某個內容相關聯的時候,我需要在這個數據改變之後,去操作DOM來進行同步:
<div id="data">數據</div>
var data = "數據" // 通過某種事件數據發生瞭變化 data = "新數據" $("#data").text = data
簡單的交互中,這個方式看起來還是方便,但是一旦交互龐大起來,代碼就臃腫得不行。
而在我快畢業的時候Angular,Vue,React興起,我們發現瞭一種新的方式——數據驅動,也就是說,通過DOM與數據的“綁定”我們可以直接修改數據,DOM內容直接就出現瞭變化。
<div>{{data}}</div>
var data = "數據" // ...某種方式進行瞭綁定 data = "新數據"
DOM中的內容直接就變成瞭新數據。使用起來非常方便,代碼也比較簡潔,在當時看來感覺很神奇。
不同的數據驅動的框架,其綁定原理和過程都各有不同,並且都比較復雜。不過今天我們簡化一下,用JS的Proxy代理對象來實現數據驅動。(順便一提,Vue3的響應式數據就用瞭這個原理,當然,會比今天的例子復雜得多)
Proxy對象是什麼
Proxy 對象用於創建一個對象的代理,從而實現基本操作的攔截和自定義(如屬性查找、賦值、枚舉、函數調用等)。具體的使用方法為:
new Proxy(要代理的對象,代理的事件對象)
可以代理的事件有如下幾個:
事件 | 描述 |
---|---|
get | 讀取屬性 |
set | 設置屬性 |
delete | delete操作符 |
ownKeys | getWonPropertyNames方法和 getOwnPropertySymbols |
construct | new操作符 |
defineProperty | defineProperty方法 |
getOwnPropertyDescriptor | getOwnPropertyDescriptor方法 |
preventExtensions | preventExtensions方法 |
isExtensible | isExtensible方法 |
setPrototypeOf | setPrototypeOf方法(也就是設置.__proto__) |
getPrototypeOf | getPrototypeOf方法(也就是取.__proto__) |
使用Proxy寫一個簡單的數據驅動視圖
既然瞭解瞭Proxy的基本用法瞭,那麼我們就可以使用它來代理對象的setter
來實現數據驅動瞭。
首先定義一個與數據同ID的DOM元素:
<div id="firstName"></div> <div id="age"></div>
為data
設置Proxy代理,代理其setter
,在其中對DOM進行操作:
var data = { firstName: "", age: 0 } var p_data = new Proxy(data, { set: function (obj, prop, newval) { document.getElementById(prop).innerText = newval; obj[prop] = newval;// 別忘瞭實現原有邏輯 return true; // setter代理的要求,處理成功後返回true } })
之後設定初值,並設定相關交互,並且註意,操作的都是代理p_data
而並非data
:
p_data.firstName = "兩秒後顯示姓名……" p_data.age = 25 setTimeout(() => { p_data.firstName = "林語琛" }, 2000) document.getElementById("grow").onclick = function() { p_data.age++ }
這樣就實現瞭數據驅動,隻要任意對p_data
的屬性值進行修改,DOM的內容就可以直接變化瞭:
JS
var data = { firstName: "", age: 0 } var p_data = new Proxy(data, { set: function (obj, prop, newval) { document.getElementById(prop).innerText = newval; obj[prop] = newval; return true } }) p_data.firstName = "兩秒後顯示姓名……" p_data.age = 25 setTimeout(() => { p_data.firstName = "林語琛" }, 2000) document.getElementById("grow").onclick = function() { p_data.age++ }
以上就是JS代理對象Proxy初體驗簡單的數據驅動視圖的詳細內容,更多關於JS Proxy數據驅動視圖的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- javascript實現隨機抽獎功能
- JavaScript Object.defineProperty與proxy代理模式的使用詳細分析
- 淺析vue偵測數據的變化之基本實現
- vue2.x版詳解computed和watch的使用
- js獲取修改title與jQuery獲取修改title的方法