经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
JS代理对象Proxy初体验简单的数据驱动视图
来源:jb51  时间:2022/8/22 18:18:44  对本文有异议

引言

上大学的时候,最流行的框架是JQuery,它是事件驱动类型的,也就是说,当一个数据与DOM的某个内容相关联的时候,我需要在这个数据改变之后,去操作DOM来进行同步:

  1. <div id="data">数据</div>
  1. var data = "数据"
  2. // 通过某种事件数据发生了变化
  3. data = "新数据"
  4. $("#data").text = data

简单的交互中,这个方式看起来还是方便,但是一旦交互庞大起来,代码就臃肿得不行。

而在我快毕业的时候Angular,Vue,React兴起,我们发现了一种新的方式——数据驱动,也就是说,通过DOM与数据的“绑定”我们可以直接修改数据,DOM内容直接就出现了变化。

  1. <div>{{data}}</div>
  1. var data = "数据"
  2. // ...某种方式进行了绑定
  3. data = "新数据"

DOM中的内容直接就变成了新数据。使用起来非常方便,代码也比较简洁,在当时看来感觉很神奇。

不同的数据驱动的框架,其绑定原理和过程都各有不同,并且都比较复杂。不过今天我们简化一下,用JS的Proxy代理对象来实现数据驱动。(顺便一提,Vue3的响应式数据就用了这个原理,当然,会比今天的例子复杂得多)

Proxy对象是什么

Proxy 对象用于创建一个对象的代理,从而实现基本操作的拦截和自定义(如属性查找、赋值、枚举、函数调用等)。具体的使用方法为:

  1. new Proxy(要代理的对象,代理的事件对象)

可以代理的事件有如下几个:

事件描述
get读取属性
set设置属性
deletedelete操作符
ownKeysgetWonPropertyNames方法和 getOwnPropertySymbols
constructnew操作符
definePropertydefineProperty方法
getOwnPropertyDescriptorgetOwnPropertyDescriptor方法
preventExtensionspreventExtensions方法
isExtensibleisExtensible方法
setPrototypeOfsetPrototypeOf方法(也就是设置.__proto__)
getPrototypeOfgetPrototypeOf方法(也就是取.__proto__)

使用Proxy写一个简单的数据驱动视图

既然了解了Proxy的基本用法了,那么我们就可以使用它来代理对象的setter来实现数据驱动了。

首先定义一个与数据同ID的DOM元素:

  1. <div id="firstName"></div>
  2. <div id="age"></div>

data设置Proxy代理,代理其setter,在其中对DOM进行操作:

  1. var data = {
  2. firstName: "",
  3. age: 0
  4. }
  5. var p_data = new Proxy(data, {
  6. set: function (obj, prop, newval) {
  7. document.getElementById(prop).innerText = newval;
  8. obj[prop] = newval;// 别忘了实现原有逻辑
  9. return true; // setter代理的要求,处理成功后返回true
  10. }
  11. })

之后设定初值,并设定相关交互,并且注意,操作的都是代理p_data而并非data:

  1. p_data.firstName = "两秒后显示姓名……"
  2. p_data.age = 25
  3. setTimeout(() => {
  4. p_data.firstName = "林语琛"
  5. }, 2000)
  6. document.getElementById("grow").onclick = function() {
  7. p_data.age++
  8. }

这样就实现了数据驱动,只要任意对p_data的属性值进行修改,DOM的内容就可以直接变化了:

JS

  1. var data = {
  2. firstName: "",
  3. age: 0
  4. }
  5. var p_data = new Proxy(data, {
  6. set: function (obj, prop, newval) {
  7. document.getElementById(prop).innerText = newval;
  8. obj[prop] = newval;
  9. return true
  10. }
  11. })
  12. p_data.firstName = "两秒后显示姓名……"
  13. p_data.age = 25
  14. setTimeout(() => {
  15. p_data.firstName = "林语琛"
  16. }, 2000)
  17. document.getElementById("grow").onclick = function() {
  18. p_data.age++
  19. }

 以上就是JS代理对象Proxy初体验简单的数据驱动视图的详细内容,更多关于JS Proxy数据驱动视图的资料请关注w3xue其它相关文章!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号