利用ES6中的Proxy和Reflect 实现简单的双向数据绑定
2024-09-02 22:22:56
利用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
最新文章
- ";飞机大战";游戏_Java实现_详细注释
- 一鼓作气 博客--第七篇 note7
- 普通用户ssh无密码登录设置
- Sublime Text的心得经验。 全面
- archlinux 安装手记
- 不知道数据库中表的列类型的前提下,使用JDBC正确的取出数据
- ADO 事务
- 实例源码--Android理财工具源码
- CxImage的使用
- 2014年度辛星全然解读html第七节
- oracle 数据库安装环境,需要大汇总
- TortoiseGit - 分支管理 -增加分支
- spring EL表达式,null-safe表达式
- 使用 Node.js 搭建一个 API 网关
- SQLServer之锁简介
- js中数值类型相加变成拼接字符串的问题
- MySQL binlog_format (Mixed,Statement,Row)[转]
- 在powerDesigner中通过SQL生成pdm
- 20165215 2017-2018-2 《Java程序设计》第九周学习总结
- Windows 2016 无域故障转移群集部署方法 超详细图文教程 (一)
热门文章
- 关于Redux到底是个什么鬼
- Codeforces 946 A.Partition
- GRDB使用SQLite的WAL模式
- CentOS 笔记
- 启动weblogic域不需要输入密码设置方法
- Lucene 源码分析之倒排索引(一)
- bootstrap3分页
- web微信开发
- 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法(转载) IEnumerable,ICollection,IList接口问题 不吹不擂,你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理
- 兔子-svnserver,client搭建