利用ES6中的Proxy和Reflect 实现简单的双向数据绑定

利用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

原文地址:https://www.cnblogs.com/zzd0916/p/10120584.html

时间: 2024-10-10 02:20:20

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

浅谈ES6中的Proxy

Proxy是一个很有趣的对象,它能够修改某些操作的默认行为,等同于在语言层面做出修改,属于一种‘元编程’,即对编程语言进行编程. Proxy其实很好理解,就是在目标对象之前架设一层拦截,外界的访问都得通过这层拦截,所以我们可以实现对外界访问的过滤和改写. Proxy的使用其实很简单,举几个栗子你就清楚了: 我们重新定义属性的读取(get)和设置(set)行为,当我读取Person对象的age属性时,当age属性值大于100时,就让它等于99: var person = { name:'fancy

ES6中的代理模式-----Proxy

什么是代理模式 代理模式(英语:Proxy Pattern)是程序设计中的一种设计模式. 所谓的代理者是指一个类别可以作为其它东西的接口.代理者可以作任何东西的接口:网络连接.内存中的大对象.文件或其它昂贵或无法复制的资源. 著名的代理模式例子为引用计数(英语:reference counting)指针对象. 当一个复杂对象的多份副本须存在时,代理模式可以结合享元模式以减少内存用量.典型作法是创建一个复杂对象及多个代理者,每个代理者会引用到原本的复杂对象.而作用在代理者的运算会转送到原本对象.一

ES6(Proxy 和 Reflect)

Proxy 和 Reflect 1.Proxy 和 Reflect 的概念 Proxy 意为 ‘代理’,连接了用户和真实对象之间的一个层 Reflect 意为‘反射’   反射的是Object 2.适用场景 一.Proxy 语法 1.类似于供应商的原始对象 obj ,通过 Proxy 新生成对象,这个对象是映射 Object 的,用户访问 monitor, 通过 Proxy ,再传递给 obj 对象. 2.设置最简单的代理操作(拦截读取作用) 真实的为 2017-03-11,通过‘代理’的作用,

ES6--Set、Map、Symbol、Proxy及Reflect

九.Set和Map数据结构 Set ES6提供了新的数据结构Set.它类似于数组,但是成员的值都是唯一的,没有重复的值.之前的博文曾阐述过使用ES5实现JavaScript数据结构-集合. new Set([iterable]); var items = new Set([1,2,3,4,5,5,5,5]); console.log(items.size); // 5 console.log(items); // Set {1, 2, 3, 4, 5} console.log([...items

ES6中的Symbol类型

前面的话 ES5中包含5种原始类型:字符串.数字.布尔值.null和undefined.ES6引入了第6种原始类型--Symbol ES5的对象属性名都是字符串,很容易造成属性名冲突.比如,使用了一个他人提供的对象,想为这个对象添加新的方法,新方法的名字就有可能与现有方法产生冲突.如果有一种机制,保证每个属性的名字都是独一无二的,这样就从根本上防止了属性名冲突.这就是ES6引入Symbol的原因,本文将详细介绍ES6中的Symbol类型 创建 Symbol 值通过Symbol函数生成.这就是说,

ES6系列_13之Proxy进行预处理(简单学习)

1.理解什么是预处理? 当我们在操作一个对象或者方法时会有几种动作,比如:在运行函数前初始化一些数据,在改变对象值后做一些善后处理.这些都算钩子函数,Proxy的存在就可以让我们给函数加上这样的钩子函数. Proxy进行预处理可以简单理解为:执行方法前,先预处理代码(预热工作). 2.对比引入Proxy 我们先来回顾一下定义对象的方法. var obj={ add:function(val){ return val+100; }, name:"小红" }; console.log(ob

162、Proxy 和 Reflect

来源 http://caibaojian.com/es6/proxy.html Proxy 同一个拦截器对象,可以设置拦截多个操作. 1.Proxy var obj = new Proxy({}, { get: function (target, key, receiver) { /* target:目标对象 property:属性名 receiver:操作行为所针对的对象,一般指proxy实例本身 */ if (key === 'prototype') { return Object.prot

ES6中的迭代器(Iterator)和生成器(Generator)

前面的话 用循环语句迭代数据时,必须要初始化一个变量来记录每一次迭代在数据集合中的位置,而在许多编程语言中,已经开始通过程序化的方式用迭代器对象返回迭代过程中集合的每一个元素 迭代器的使用可以极大地简化数据操作,于是ES6也向JS中添加了这个迭代器特性.新的数组方法和新的集合类型(如Set集合与Map集合)都依赖迭代器的实现,这个新特性对于高效的数据处理而言是不可或缺的,在语言的其他特性中也都有迭代器的身影:新的for-of循环.展开运算符(...),甚至连异步编程都可以使用迭代器 本文将详细介

ES6中Arguments和Parameters用法解析

原文链接 译文 ECMAScript 6 (也称 ECMAScript 2015) 是ECMAScript 标准的最新版本,显著地完善了JS中参数的处理方式.除了其它新特性外,我们还可以使用rest参数.默认值.解构赋值等. 本教程中,我们将详细探索arguments和parameters,看看ES6是如果改善升级它们的. 对比 Arguments 和 Parameters 通常情况下提到 Arguments 和 Parameters, 都认为是可以互换使用的.然而,基于本教程的目的,我们做了明