JS代理對(duì)象Proxy初體驗(yàn)簡單的數(shù)據(jù)驅(qū)動(dòng)視圖
引言
上大學(xué)的時(shí)候,最流行的框架是JQuery,它是事件驅(qū)動(dòng)類型的,也就是說,當(dāng)一個(gè)數(shù)據(jù)與DOM的某個(gè)內(nèi)容相關(guān)聯(lián)的時(shí)候,我需要在這個(gè)數(shù)據(jù)改變之后,去操作DOM來進(jìn)行同步:
<div id="data">數(shù)據(jù)</div>
var data = "數(shù)據(jù)" // 通過某種事件數(shù)據(jù)發(fā)生了變化 data = "新數(shù)據(jù)" $("#data").text = data
簡單的交互中,這個(gè)方式看起來還是方便,但是一旦交互龐大起來,代碼就臃腫得不行。
而在我快畢業(yè)的時(shí)候Angular,Vue,React興起,我們發(fā)現(xiàn)了一種新的方式——數(shù)據(jù)驅(qū)動(dòng),也就是說,通過DOM與數(shù)據(jù)的“綁定”我們可以直接修改數(shù)據(jù),DOM內(nèi)容直接就出現(xiàn)了變化。
<div>{{data}}</div>
var data = "數(shù)據(jù)" // ...某種方式進(jìn)行了綁定 data = "新數(shù)據(jù)"
DOM中的內(nèi)容直接就變成了新數(shù)據(jù)。使用起來非常方便,代碼也比較簡潔,在當(dāng)時(shí)看來感覺很神奇。
不同的數(shù)據(jù)驅(qū)動(dòng)的框架,其綁定原理和過程都各有不同,并且都比較復(fù)雜。不過今天我們簡化一下,用JS的Proxy代理對(duì)象來實(shí)現(xiàn)數(shù)據(jù)驅(qū)動(dòng)。(順便一提,Vue3的響應(yīng)式數(shù)據(jù)就用了這個(gè)原理,當(dāng)然,會(huì)比今天的例子復(fù)雜得多)
Proxy對(duì)象是什么
Proxy 對(duì)象用于創(chuàng)建一個(gè)對(duì)象的代理,從而實(shí)現(xiàn)基本操作的攔截和自定義(如屬性查找、賦值、枚舉、函數(shù)調(diào)用等)。具體的使用方法為:
new Proxy(要代理的對(duì)象,代理的事件對(duì)象)
可以代理的事件有如下幾個(gè):
事件 | 描述 |
---|---|
get | 讀取屬性 |
set | 設(shè)置屬性 |
delete | delete操作符 |
ownKeys | getWonPropertyNames方法和 getOwnPropertySymbols |
construct | new操作符 |
defineProperty | defineProperty方法 |
getOwnPropertyDescriptor | getOwnPropertyDescriptor方法 |
preventExtensions | preventExtensions方法 |
isExtensible | isExtensible方法 |
setPrototypeOf | setPrototypeOf方法(也就是設(shè)置.__proto__) |
getPrototypeOf | getPrototypeOf方法(也就是取.__proto__) |
使用Proxy寫一個(gè)簡單的數(shù)據(jù)驅(qū)動(dòng)視圖
既然了解了Proxy的基本用法了,那么我們就可以使用它來代理對(duì)象的setter
來實(shí)現(xiàn)數(shù)據(jù)驅(qū)動(dòng)了。
首先定義一個(gè)與數(shù)據(jù)同ID的DOM元素:
<div id="firstName"></div> <div id="age"></div>
為data
設(shè)置Proxy代理,代理其setter
,在其中對(duì)DOM進(jìn)行操作:
var data = { firstName: "", age: 0 } var p_data = new Proxy(data, { set: function (obj, prop, newval) { document.getElementById(prop).innerText = newval; obj[prop] = newval;// 別忘了實(shí)現(xiàn)原有邏輯 return true; // setter代理的要求,處理成功后返回true } })
之后設(shè)定初值,并設(shè)定相關(guān)交互,并且注意,操作的都是代理p_data
而并非data
:
p_data.firstName = "兩秒后顯示姓名……" p_data.age = 25 setTimeout(() => { p_data.firstName = "林語琛" }, 2000) document.getElementById("grow").onclick = function() { p_data.age++ }
這樣就實(shí)現(xiàn)了數(shù)據(jù)驅(qū)動(dòng),只要任意對(duì)p_data
的屬性值進(jìn)行修改,DOM的內(nèi)容就可以直接變化了:
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代理對(duì)象Proxy初體驗(yàn)簡單的數(shù)據(jù)驅(qū)動(dòng)視圖的詳細(xì)內(nèi)容,更多關(guān)于JS Proxy數(shù)據(jù)驅(qū)動(dòng)視圖的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JavaScript單例模式能不能去實(shí)例只留單原理解析
這篇文章主要為大家介紹了JavaScript單例模式能不能去實(shí)例只留單原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12微信小程序 input表單與redio及下拉列表的使用實(shí)例
這篇文章主要介紹了微信小程序 input表單與redio及下拉列表的使用實(shí)例的相關(guān)資料,希望通過本文能幫助到大家,需要的朋友可以參考下2017-09-09微信小程序?qū)崿F(xiàn)錨點(diǎn)定位樓層跳躍的實(shí)例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)錨點(diǎn)定位樓層跳躍的實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-05-05用javascript制作qq注冊動(dòng)態(tài)頁面
這篇文章主要介紹了用javascript制作qq注冊動(dòng)態(tài)頁面,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-04-04網(wǎng)頁的標(biāo)準(zhǔn),IMG不支持onload標(biāo)簽怎么辦
網(wǎng)頁的標(biāo)準(zhǔn),IMG不支持onload標(biāo)簽怎么辦...2006-06-06微信小程序 wxapp內(nèi)容組件 progress詳細(xì)介紹
這篇文章主要介紹了微信小程序 wxapp內(nèi)容組件 progress詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2016-10-10