JavaScript代理对象Proxy怎么创建使用
这篇文章主要讲解了“JavaScript代理对象Proxy怎么创建使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript代理对象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++
}
感谢各位的阅读,以上就是“JavaScript代理对象Proxy怎么创建使用”的内容了,经过本文的学习后,相信大家对JavaScript代理对象Proxy怎么创建使用这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341