数据双向绑定模拟-优快云博客

本文链接：https://blog.youkuaiyun.com/easonbug/article/details/136825158

---搬运于视频学习demo---

创建js模拟文件 euv.js

/**
 * 观察某个对象的所有属性
 * @param {object} obj
 */
function observe(obj){
  Object.keys(obj).forEach(item => {
    let value = obj[item]
    const funs = []
    Object.defineProperty( obj, item , {
      get: function() {
        // 收集依赖 记录绑定的函数
        if(window.__fun && !funs[window.__fun]){
          funs.push(window.__fun)
        }
        
        return value
      },
      set: function(val){
        value = val
        // 派发更新 运行依赖函数
        funs.forEach(item => {
          item()
        })
      }
    })
  })
}
/**
 * @param {将相关的依赖进行函数注册} fun 
 */
function autoRun(fun){
  window.__fun = fun
  fun()
  window.__fun = null
}

将js文件引入到html 进行使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数据双向绑定模拟</title>
</head>
<body>
  <div class="name"></div>
  <div class="age"></div>
  <div class="height"></div>

  <!-- 通过input 输入值 修改 data数据，数据同步更新到界面 -->
  <input type="text" onchange="data.name = this.value" >  
  <script src="./euv.js"></script>
</body>
<script>
  const data = {
    name: '张三',
    age: 18,
    height: 180
  }

  // 将数据放入观察
  observe(data)

  // 使用数据
  function showName(){
    const name = document.getElementsByClassName('name')[0]
    name.innerText = data.name
  }
  function showAge(){
    const age = document.getElementsByClassName('age')[0]
    age.innerText = data.age
  }
  function showHeight(){
    const height = document.getElementsByClassName('height')[0]
    height.innerText = data.height
  }

  // 注册依赖函数，后续数据更新将会触发依赖，同步更新
  autoRun(showName)
  autoRun(showAge)
  autoRun(showHeight)


</script>
</html>