proxy.js,javascript proxy

　　本文给大家带来了一些关于javascript的知识，主要介绍了JS代理对象Proxy的简单数据驱动视图。有需要的朋友可以借鉴一下。下面就来看看吧，希望对你有帮助。

　　【相关推荐：javascript视频教程，web前端】

　　JQuery，它是事件驱动型的，也就是当一条数据和DOM中的某个东西有关联的时候，我需要操作DOM在这条数据发生变化之后进行同步：

　　div= data data/div var data= data

　　//数据通过某种事件发生了变化

　　数据=新数据

　　$(#data )。text=data在简单的交互中，这种方法看起来还是很方便的，但是一旦交互庞大，代码就臃肿了。

　　而在我即将毕业的时候，Angular，Vue，React React rose，我们发现了一条新的路，——数据驱动。也就是说，通过DOM和数据的“绑定”，我们可以直接修改数据，DOM的内容直接发生了变化。

　　Div{{data}}/divvar data= data

　　//.以某种方式被束缚。

　　data= new data DOM中的内容直接变成了新数据。用起来非常方便，代码也很简洁，在当时看来很神奇。

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

Proxy对象是什么

　　ProxyObject用于为对象创建代理，从而实现对基本操作(如属性查找、赋值、枚举、函数调用等)的拦截和定制。).具体使用方法是：

　　新代理(对象到代理，事件对象到代理)可以代理以下事件：

　　事件描述get read属性set property set property delete operator ownKeysgetWonPropertyNames方法和getownpropertymolsstructnew operator definerpropertydefineproperty方法getOwnPropertyDescript orgetownpropertydescript方法preventextensions spreadtextensions方法Isextendible方法setPrototypeOfsetPrototypeOf方法(即设置。_ _ proto _ _)getprototype of getPrototypeOf方法(即采取。__proto__)

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

　　现在我们知道了Proxy的基本用法，可以用它来代理对象的setter，实现数据驱动。

　　首先，定义一个与数据具有相同ID的DOM元素：

　　div id=名字/div

　　Div id=age/div为数据设置代理，代理其setter，并在其中操作DOM:

　　var数据={

　　名字：，

　　年龄：0岁

　　}

　　var p_data=新代理(数据，{

　　set: function (obj，prop，newval) {

　　document.getElementById(prop)。innerText=newval

　　obj[prop]=new val；//不要忘记实现原来的逻辑

　　返回truesetter代理的请求，处理成功后返回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的内容：

　　射流研究…