欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS代理對(duì)象Proxy初體驗(yàn)簡單的數(shù)據(jù)驅(qū)動(dòng)視圖

 更新時(shí)間:2022年08月22日 16:01:49   作者:林語琛  
這篇文章主要為大家介紹了JS代理對(duì)象Proxy初體驗(yàn)簡單的數(shù)據(jù)驅(qū)動(dòng)視圖,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

引言

上大學(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è)置屬性
deletedelete操作符
ownKeysgetWonPropertyNames方法和 getOwnPropertySymbols
constructnew操作符
definePropertydefineProperty方法
getOwnPropertyDescriptorgetOwnPropertyDescriptor方法
preventExtensionspreventExtensions方法
isExtensibleisExtensible方法
setPrototypeOfsetPrototypeOf方法(也就是設(shè)置.__proto__)
getPrototypeOfgetPrototypeOf方法(也就是取.__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)文章

最新評(píng)論