Proxy实现数据变化驱动视图更新

guojun@07

已于 2022-12-28 10:41:13 修改

阅读量148

点赞数

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

于 2022-12-28 10:39:57 首次发布

本文链接：https://blog.csdn.net/guojun19900715/article/details/128465356

版权

Proxy简单实现数据变化视图随之更新

<!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-scale=1.0">
  <title>隐藏滚动条</title>
  </title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
  </style>
</head>

<body>
  <div class="main"></div>
  <script>
    let main = document.querySelector('.main')
    let obj = {
      text: '文本'
    }
    const handler = {
      get: function (value, prop) {
        console.log('get被触发了')
        main.innerHTML = value.text // get被触发时刷新视图
      },
      set: function (obj, prop, value) {
        obj[prop] = value;
        main.innerHTML = value // set函数被触发时更新视图
        return true;
      }
    }
    let textProxy = new Proxy(obj, handler)
    textProxy.text // 代理后获取其属性触发get函数
    setTimeout(() => {
      textProxy.text = '视频' // 倒计时5秒, 触发set函数
    }, 5000)
  </script>
</body>

</html>