利用ES6中的Proxy (代理) 和 Reflect 实现一个简单的双向数据绑定demo。

好像vue3也把 obj.defineProperty()  换成了Proxy+Reflect。

话不多说，直接上代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>proxy</title>

</head>

<body>

    <h1>使用Proxy 和 Reflect 实现双向数据绑定</h1>

    <input type="text" id="input">

    <h2>您输入的内容是： <i id="txt"></i></h2>

    <script>

        //获取dom元素

        let oInput = document.getElementById("input");

        let oTxt = document.getElementById("txt");

        //初始化代理对象

        let obj = {};

        //给obj增加代理对象

        let newProxy = new Proxy(obj,{

            get: (target,key,recevier)=>{

                //console.log("get:"+ key)

                return Reflect.get(target,key,recevier);

            },

            set: (target,key,value,recevier)=>{

                //监听newProxy是否有新的变化

                if(key == "text"){

                    oTxt.innerHTML = value;

                }

                //将变化反射回原有对象

                return Reflect.set(target,key,value,recevier);

            }

        })

        //监听input输入事件

        oInput.addEventListener("keyup",(e)=>{

            //修改代理对象的值

            newProxy.text = e.target.value;

        })

    </script>

</body>

</html>

实现的效果：

监听input 的时候修改newProxy的值，检测到newProxy 重新设置了值得时候，因为newProxy代理了obj这个对象， 所以可以调用Reflcet 反射到原obj.

所以我修改了Input 的值后，然后控制台输入obj,会打印出input的值。

newProxy

利用ES6中的Proxy和Reflect 实现简单的双向数据绑定的更多相关文章

  1. es6学习笔记-Proxy、Reflect、Promise

    Proxy Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程. Proxy 可以理解成,在目标对象之前 ...

  2. ES6中的proxy

    1 概述 Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写. Proxy 这个词的原意是代理,用在这 ...

  3. 利用ES6中的Array.find/ Array.findIndex来判断数组中已存在某个对象

    前端开发过程中,我们会经常遇到这样的情景:比如选中某个指标obj,将其加入到数组checkedArr中({id: 1234, name: 'zzz', ...}),但是在将其选中之前要校验该指标是否已 ...

  4. es6中的Proxy和vue中的数据代理的异同

    1:概述 1-1:Proxy 用于修改某些操作的默认行为,Proxy可以说在对对象进行各种访问或者操作的时候在外层进行一层拦截,在操作之前都需要经过这种拦截.proxy返回的是一个新对象,可以通过操作 ...

  5. 浅谈ES6中的Proxy

    Proxy是一个很有趣的对象,它能够修改某些操作的默认行为,等同于在语言层面做出修改,属于一种‘元编程’,即对编程语言进行编程. Proxy其实很好理解,就是在目标对象之前架设一层拦截,外界的访问都得 ...

  6. es6 语法 （Proxy和Reflect 的对比）

    { //原始对象 let obj={ time:'2017-03-11', name:'net', _r:123 }; //(代理商)第一个参数代理对象,第二个参数真正代理的东西 let monito ...

  7. 利用node中的内置模块fs实现对简单文件的读取 拷贝 创建等功能

    1.文件的读取 我们想要根据如下一种目录生成一种json数据 代码如下 //此函苏是对目录进行读取的 //我们想要生成的是一个根据目录所创建的json数据 const fs = require(&qu ...

  8. ES6中的元编程-Proxy & Reflect

    前言 ES6已经出来好久了,但是工作中比较常用的只有let const声明,通过箭头函数改this指向,使用promise + async 解决异步编程,还有些数据类型方法...所以单独写一篇文章学习 ...

  9. 详解es6中Proxy代理对象的作用

    在es6中新添加了Proxy,那么它有什么作用啊?Proxy本意为代理,而es6中的Proxy也就是代理对象,那么代理对象感觉听起来很模糊,在这里就解释一下Proxy代理对象的作用. Proxy的主要 ...

随机推荐

  1. 微信小程序之微信支付C#后台（统一下单）

    一.微信小程序支付 1.微信小程序端请求支付接口 商户在小程序中先调用该接口在微信支付服务后台生成预支付交易单,返回正确的预支付交易后调起支付.具体可以查看接口示例. 接口传入参数示例: <xm ...

  2. 基于sklearn的分类器实战

    已迁移到我新博客,阅读体验更佳基于sklearn的分类器实战 完整代码实现见github:click me 一.实验说明 1.1 任务描述 1.2 数据说明 一共有十个数据集,数据集中的数据属性有全部 ...

  3. MX

    A mail exchanger record (MX record) is a type of resource record in the Domain Name System that spec ...

  4. Java程序员从笨鸟到菜鸟之（五十二）细谈Hibernate（三）Hibernate常用API详解及源码分析--csdn 曹胜欢

    新接触一个框架的目的就是想利用这个框架来为我们做一些工作,或者是让他来简化我们的工作,利用这个框架无非就是要利用这个框架所给我们提供的API去操作我们的数据,所以利用一个框架的好坏很大一部分取决于你对 ...

  5. 老毛桃winpe优盘启动系统个性修改全攻略.（全）

    博主从05年开始接触计算机,不能说是高手也算个老菜了,当时装系统还是用蕃茄花园的光盘安装系统,后来在学校管理机房,哪台电脑坏了就硬盘对拷. 时到今日,重启系统的方法五花八门,其中使用最广的莫过于PE优 ...

  6. DIV浮动IE文本产生3象素的bug

    描写叙述:DIV浮动IE文本产生3象素的bug    左边对象浮动.右边採用外补丁的左边距来定位,右边对象(div)会离左边有3px的间距 复现:在开发者工具里把文本模式设置了杂项后会出现3像素的bu ...

  7. UVA - 10603 Fill(隐式图搜索)

    题目大意:经典的倒水问题. 给你三个瓶子,体积为a,b,c. 刚開始a.b是空的,c是满的,如今要求你到出体积为d的水.倒水的规则为,要么倒水方为空,要么接水方满 问倒到容量为d时,倒水的最小体积是多 ...

  8. myeclipse2014破解

    去年出现的struts2 bug问题,在过去的项目中一直没做调整,前段时间发现受到影响了.本想这个bug都已经这么长时间了,工具中的包应该也已经被替换了吧,于是下载了最新的myeclipse2014, ...

  9. 在jsp中拿到applicationContext

    WebApplicationContext wac = (WebApplicationContext)config.getServletContext().getAttribute(WebApplic ...

  10. hdu 1548

    A strange lift Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) T ...