Proxy实现数据双向绑定

zxo_apple

已于 2023-08-03 11:37:34 修改

阅读量346

点赞数

文章标签： javascript 前端开发语言

于 2023-08-03 11:25:55 首次发布

本文链接：https://blog.csdn.net/zxo_apple/article/details/132079719

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="content"></div>

  <script>
    const content = document.getElementById('content')
    const info = {
      name: 'zz',
      age: 18
    }
    const i1 = new Proxy(info, {
      get(target, property, receiver) {
        return info[property]
      },
      set(target, property, value, receiver) {
        info[property]= value
        content.innerText = value
      }
    })
    i1.name = 'yy'
    console.log('i1', info, i1)
  </script>
</body>
</html>

proxy是一个实例，接受两个参数，一个是当前要修改的对象(info)，一个是修改对象的和获取对象的方法(get和set)
get接受三个参数，set接受四个参数，property代表要修改的属性名
修改i1和info属性都能实现数据的双向绑定

在这里插入图片描述

/* ES Module 和 Common JS */
    /*
    * ES Module通常是浏览器环境运行
      export default {
        a: 1,
        b: 2
      }
      export const a = 1
      export const fn () {}

      import {a, fun} from 'xxx'
      import AModule from 'xxx'
    * Common JS(nodejs环境运行)
      module.exports = {
        a: 1,
        b: 2
      }
      exports.a = 1
      const AModule = require('xxx')
    */