js数据响应式

根据input数据实时更新试图

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div class="card">
  <p id="firstName"></p>
  <p id="lastName"></p>
  <p id="age"></p>
  <label>姓名：</label>
  <input type="text" onchange="user.name = this.value">
  <label>生日：</label>
  <input type="text" onchange="user.birth = this.value" placeholder="yyyy-MM-dd">
</div>

<script>
  const user = {
    name: '刘旭',
    birth: '1998-02-02'
  }

  // 挟持对象的属性
  objectServe(user)

  // 展示姓
  function showFirstName() {
    const firstName = document.querySelector('#firstName')
    firstName.textContent = `姓 : ${user.name[0]}`
  }

  // 展示名
  function showLastName() {
    const lastName = document.querySelector('#lastName')
    lastName.textContent = `名 : ${user.name.slice(1)}`
  }

  // 展示年龄
  function showAge() {
    const birthday = new Date(user.birth)
    const today = new Date()
    today.setHours(0)
    today.setMinutes(0)
    today.setMilliseconds(0)
    const thisYearBirthday = Math.abs(new Date(today - birthday).getFullYear() - 1970)
    const age = document.querySelector('#age')
    age.textContent = `年龄 : ${thisYearBirthday}`
  }

  // 挟持对象的属性
  function objectServe(obj) {
    // 遍历对象的每个属性
    for (const key in obj) {
      // 存储属性的内部值
      let internalValue = obj[key];
      // 创建一个集合用于存储与属性相关的函数
      const funcList = new Set();
      // 为属性定义getter和setter
      Object.defineProperty(obj, key, {
        get: function () {
          // 在访问时将当前函数添加到集合中
          funcList.add(window.__func);
          return internalValue;
        },
        set: function (val) {
          // 更新内部值
          internalValue = val;
          // 在设置值时调用集合中的所有函数
          for (const func of funcList) {
            if (func !== null) {
              func();
            }
          }
          // 返回更新后的内部值
          return internalValue;
        }
      });
    }
  }

  // 初始化
  autoRun(showFirstName)
  autoRun(showLastName)
  autoRun(showAge)

  // 自动运行函数，传入的参数是一个函数 fn
  function autoRun(fn) {
  // 将传入的函数设置为全局变量 window.__func
    window.__func = fn
    // 立即调用传入的函数
    fn()
    // 在函数执行后，将全局变量 window.__func 设为 null
    window.__func = null
  }

</script>
</body>
</html>