牛客JS题（三十八）双向绑定

代码对我眨眼睛

于 2024-08-12 15:00:00 发布

阅读量564

点赞数 7

分类专栏： # JavaScript 文章标签： javascript 前端刷题 js进阶

本文链接：https://blog.csdn.net/m0_73756108/article/details/141125251

版权

JavaScript 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

注释很详细，直接上代码

涉及知识点：

浅度监听
作用域链
Object.defineProperty

题干：
在这里插入图片描述

我的答案

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <style>
      ul {
        list-style: none;
      }
    </style>
    <input type="text" />
    <ul></ul>

    <script>
      /**
       * 我们在JS33做过一个难度更高的深度监听对象，这里就写个简单的浅监听吧
       * 关于监听原理与注意事项，可以参考JS33
       * 抛开原理不谈，咱来说说怎么实现的双向绑定
       * 修改input的值，调用方法修改person.weight的值，
       * 属性值发生变化在set中调用_render函数，在该函数将内容渲染上去
       *
       * 如果是直接改变了属性值，触发set调用_render函数，不仅更新了页面文字的值还更新了输入框的值
       */
      var ul = document.querySelector("ul");
      var person = {
        sex: "男",
        age: "25",
        name: "王大锤",
        height: 28,
        weight: 32,
      };
      var inp = document.querySelector("input");
      inp.value = person.weight;
      const _render = () => {
        var str = `<li>姓名：<span>${person.name}</span></li>
                           <li>性别：<span>${person.sex}</span></li>
                           <li>年龄：<span>${person.age}</span></li>
                           <li>身高：<span>${person.height}</span></li>
                           <li>体重：<span>${person.weight}</span></li>`;
        ul.innerHTML = str;
        inp.value = person.weight;
      };
      _render(ul);
      // 补全代码
      inp.oninput = () => {
        person.weight = inp.value;
      };

      const updateview = (obj) => {
        Object.keys(obj).forEach((item) => {
          let value = obj[item];
          Object.defineProperty(obj, item, {
            get: () => value,
            set: (newValue) => {
              value = newValue;
              _render();
            },
          });
        });
      };
      updateview(person);
      person.weight = 999;
    </script>
  </body>
</html>