使用 JavaScript Proxy 实现简单的数据绑定

最新推荐文章于 2022-11-11 09:22:51 发布
最新推荐文章于 2022-11-11 09:22:51 发布
阅读量738 收藏 3
点赞数
分类专栏： javascript 文章标签： proxy javascript vue3.0 数据绑定
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/scorpio_h/article/details/104631871
版权 
<!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) => {
        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>

 

scorpio_h
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript实现简单的双向数据绑定（Ember、Angular、Vue）
尐轩web前端网络日志
06-13 1万+
什么是双向数据绑定呢？ 简单的说 就是UI视图与数据绑定在了一块 也就是数据和视图是同步改变的 双向数据绑定最常见的应用场景就是表单 （应用场景还是很有限的）现在我们要实现这样一个简单的数据绑定 输入栏中输入字符 和它绑定的节点内容同步改变
使用ES6的新特性Proxy来实现一个数据绑定实例
weixin_34015566的博客
11-10 168
项目地址：https://github.com/jrainlau/mog在线体验：http://codepen.io/jrainlau/pe... 作为一个前端开发者，曾踩了太多的“数据绑定”的坑。在早些时候，都是通过jQuery之类的工具手动完成这些功能，但是当数据量非常大的时候，这些手动的工作让我非常痛苦。直到使用了VueJS，这些...
[ES6]探究数据绑定之Proxy
全栈空间
11-17 1603
  知识储备 Proxy 方式实现数据绑定中涉及到 Proxy、Reflect、Set、Map 和 WeakMap，这些都是 ES6 的新特性。 Proxy Proxy 对象代理，在目标对象之前架设一层拦截，外部对目标对象的操作，都会通过这层拦截，我们可以定制拦截行为，每一个被代理的拦截行为都对应一个处理函数。   1   let...
使用 JavaScript Proxy 实现Vue里面简单的数据绑定
qq_38876038的博客
11-26 131
使用 JavaScript Proxy 实现简单的数据绑定 <body> hello,world <input type="text" id="model"> <p id="word"></p> </body> <script> const model = document.getElementById("model") const word = document.getElementById("word") v
前端笔记：使用Proxy实现响应式和双向数据绑定
Naisu的各种笔记
11-11 970
借助于ES6中的Proxy机制可以实现简单的响应式和双向数据绑定功能，这篇文章将对此稍微进行介绍。
js实现数据双向绑定
07-18
**JavaScript 实现数据双向绑定** 数据双向绑定是前端开发中的一个重要概念，它使得视图（View）和模型（Model）之间的数据保持同步，当模型改变时，视图自动更新，反之亦然。这一特性在现代Web应用框架如Angular、...
vue实现动态数据绑定
08-30
在上面的示例中，我们使用 Proxy 对象来拦截对象的读取和写入操作，从而实现数据模型的实时更新。 三、结论 本文详细介绍了 Vue 实现动态数据绑定的方法和技术，包括使用 Object.defineProperty() 方法和使用 ...
详谈Object.defineProperty 及实现数据双向绑定
10-15
随着 ES6 的发布，`Proxy` 对象提供了一种更加灵活且强大方式来拦截对象操作，如读取、设置、枚举、删除属性等，因此 Vue.js 3.x 开始使用 `Proxy` 替代 `Object.defineProperty()` 实现数据双向绑定，提高了性能和...
vue proxy 的优势与使用场景实现
10-15
- **数据绑定**：在 Vue 组件中，使用 `proxy` 可以实现更灵活的数据绑定，尤其是对于动态添加或删除属性的情况。 - **API 拦截**：在库或工具中，`proxy` 可用于拦截 API 调用，进行日志记录、性能分析或异常处理...
JQuery之proxy实现绑定代理方法
11-22
在javascript中，this指代的对象时常会变化，这会造成程序，混乱，一般做法就是先将this保存在一个变量中，就不怕她变了，我们先看一个小例子 var A = function(){ this.star = functiont(){}; this.beg = ...
javascript高级部分07----Proxy的实现
m0_47531829的博客
06-23 465
1.Proxy代理 1 proxy的实现，get方法 let person = { name: '张三' }; let pro = new Proxy(person, { get: function(target, property) { console.log(target); //{name: "张三"} console.log(
利用proxy实现简单的双向绑定
qq_18369669的博客
06-20 562
本文通过proxy对象代理，实现了简单的数据双向绑定。
使用es6的proxy来模拟下vue的数据双向绑定
业余前端的职业经历
04-28 333
vue2.*使用的是object.definedProperty()数据劫持 加 观察者模式实现的。 随着vue3.0离我们越来越近的,前不久又看了尤大神的直播,对vue3.0的重写,感觉要加大学习成本了哈。 es6也出来四五年了，看完vue3.0感觉自己本来就很菜了，哎此处略去很多字。 还是好好学习,增强自己的知识面才是王道。 之前用以前的老方法 实现过 双向绑定 现在使用proxy来简单模拟下...
简单的双向数据绑定 Proxy Reflect
时远
12-16 155
Proxy 是 ES6 中新增的方法，它可以自定义对象中的操作。 Reflect是一个内置的对象，它提供拦截 JavaScript 操作的方法。这些方法与 proxy handlers 的方法相同。 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpor...
使用es6 Proxy代理 完成数据双向绑定
Vue1024的博客
04-08 451
使用es6 Proxy代理 完成数据双向绑定
Vue3 proxy实现双向数据绑定的原理解析
一枚不断学习的小码农一枚~
03-19 8225
1.什么是Proxy？它的作用是？ Proxy可以理解成，在目标对象之前架设一层 "拦截"，当外界对该对象访问的时候，都必须经过这层拦截，而Proxy就充当了这种机制，类似于代理的含义，它可以对外界访问对象之前进行过滤和改写该对象。 2.Object.defineProperty的缺点 深度监听需要一次性递归 (遍历每个对象的每个属性，如果对象嵌套很深的话，需要使用递归调用。) 无法监听新增属性/删除属性(Vue.set Vue.delete，未在 data 中定义的属性会报 undefined) 无法原
4 个实用示例帮助你掌握 JavaScript 中Proxy功能
油墨香^-^的博客
07-29 2336
ownKeys(item)拦截Object.getOwnPropertyNames(proxy),Object.getOwnPropertySymbols(proxy),Object.keys(proxy),for...in等操作，返回一个数组。收到的货物可能含有恐怖分子安放的炸弹，威胁到我们的安全。apply(item,object,args)拦截函数调用操作，如proxy(...args),proxy.call(object,...args),proxy.apply(...)。......
js中使用Proxy代理实现数据双向绑定
我的个人博客
09-15 571
js 中使用Proxy代理实现数据双向绑定 html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-s.
用Proxy模拟VUE中的数据双向绑定
wu1737149371的博客
03-11 463
Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。 Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。 详细介绍也...
通过javaScript实现Vue的双向数据绑定
最新发布
05-22
Vue的双向数据绑定是通过使用数据劫持和发布-订阅模式来实现的。以下是一个简单的实现： 首先，我们需要创建一个观察者对象，它将负责收集依赖项和通知订阅者更新： ```javascript class Watcher { constructor(vm, expOrFn, cb) { this.vm = vm; this.getter = parsePath(expOrFn); this.cb = cb; this.value = this.get(); } get() { Dep.target = this; const value = this.getter.call(this.vm, this.vm); Dep.target = null; return value; } update() { const oldValue = this.value; this.value = this.get(); this.cb.call(this.vm, this.value, oldValue); } } ``` 接下来，我们需要创建一个依赖项对象，它将负责管理依赖项和通知观察者更新： ```javascript class Dep { constructor() { this.subs = []; } addSub(sub) { this.subs.push(sub); } removeSub(sub) { remove(this.subs, sub); } depend() { if (Dep.target) { Dep.target.addDep(this); } } notify() { const subs = this.subs.slice(); for (let i = 0, l = subs.length; i < l; i++) { subs[i].update(); } } } Dep.target = null; ``` 最后，我们需要创建一个代理对象，它将负责将实际的数据对象和观察者对象联系起来： ```javascript function observe(value) { if (!value || typeof value !== 'object') { return; } Object.keys(value).forEach(key => { defineReactive(value, key, value[key]); }); } function defineReactive(obj, key, val) { const dep = new Dep(); Object.defineProperty(obj, key, { enumerable: true, configurable: true, get() { dep.depend(); return val; }, set(newVal) { if (val === newVal) { return; } val = newVal; dep.notify(); }, }); } function proxy(target, sourceKey) { Object.keys(target[sourceKey]).forEach(key => { Object.defineProperty(target, key, { enumerable: true, configurable: true, get() { return target[sourceKey][key]; }, set(newVal) { target[sourceKey][key] = newVal; }, }); }); } class Vue { constructor(options) { this.$options = options; this._data = options.data; observe(this._data); proxy(this, '_data'); } } ``` 这就是一个简单的Vue双向数据绑定的实现。当数据发生变化时，观察者对象将会被通知，并且视图将会自动更新。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值