0
点赞
收藏
分享

微信扫一扫

前端歌谣的刷题之路-第一百零九题-双向数据绑定


 

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 本题目源自于牛客网 微信公众号前端小歌谣

题目

请补全JavaScript代码,要求如下:
1. 监听对象属性的变化
2. 当"person"对象属性发生变化时,页面中与该属性相关的数据同步更新
3. 将输入框中的值与"person"的"weight"属性绑定且当输入框的值发生变化时,页面中与该属性相关的数据同步更新
注意:
1. 必须使用Object.defineProperty实现且触发set方法时更新视图
2. 必须使用DOM0级标准事件(oninput)
3. 可以使用预设代码"_render"函数

前端歌谣的刷题之路-第一百零九题-双向数据绑定_属性值

前端歌谣的刷题之路-第一百零九题-双向数据绑定_输入框_02编辑

核心代码

<!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>
</head>
<style>
  ul {
      list-style: none;
  }
</style>
<body>
  <input type="text">
  <ul></ul>
<!-- 
  
    创建”Observe“函数,接收一个对象参数,首先判断该对象参数是否合法,之后通过遍历对象的所有属性进行拦截操作。尽管可以直接使用Object.defineProperty
    函数对”person“对象进行拦截,但是可以通过创建”Observe“函数来封装对某个对象的属性劫持功能,之后可以复用此函数。
    创建“defineReactive”函数,接收三个参数分别为该对象、对象属性、对象属性值。该函数内部使用Object.defineProperty函数对该对象的属性值进行拦截,
    且每当触发set时,调用”render“方法重新渲染视图
    给"inp"对象添加”oninput“事件,当输入内容时,”person“的”weight“属性同步被改变,触发页面的重新渲染

 -->
  <script>
  
    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);
    // 补全代码
    function Observe(target) {
      if (typeof target !== 'object' || target == null) {
        return target
      }
      for (var key in target) {
        defineReactive(target, key, target[key])
      }
    }

    function defineReactive(target, key, value) {
      Object.defineProperty(target, key, {
        get: function () {
          return value
        },
        set: function (newVal) {
          if (newVal !== value) {
            value = newVal
            _render()
          }

        }

      })
    }
    Observe(person);

    inp.oninput = function () {
      person.weight = this.value
    }
  </script>
</body>

</html>

前端歌谣的刷题之路-第一百零九题-双向数据绑定_输入框_03

总结

和监听对象那道题有相似之处 可以对比学习

   创建”Observe“函数,接收一个对象参数,首先判断该对象参数是否合法,之后通过遍历对象的所有属性进行拦截操作。尽管可以直接使用Object.defineProperty
    函数对”person“对象进行拦截,但是可以通过创建”Observe“函数来封装对某个对象的属性劫持功能,之后可以复用此函数。
    创建“defineReactive”函数,接收三个参数分别为该对象、对象属性、对象属性值。该函数内部使用Object.defineProperty函数对该对象的属性值进行拦截,
    且每当触发set时,调用”render“方法重新渲染视图
    给"inp"对象添加”oninput“事件,当输入内容时,”person“的”weight“属性同步被改变,触发页面的重新渲染


举报

相关推荐

0 条评论