美文网首页
如何用js手动实现一个数据双向绑定

如何用js手动实现一个数据双向绑定

作者: 雪中无处寻 | 来源:发表于2020-04-01 12:31 被阅读0次

双向数据绑定:

我们这里拿vue举例,vue中的双向数据绑定主要是利用Object.defineProperty()这个方法进行数据劫持,进而实现双向数据绑定,我们先来看一幅图:

a.png

我们手动实现一个简易的双向数据绑定

<body>
  <input type="text" id="input" placeholder="请输入内容">
  <p id="p"></p>
</body>
<script>
  let input  = document.getElementById('input')
  let p = document.getElementById('p')
  let obj = {
    name: '曹操'
  }
  
  p.innerText = obj.name
  input.value = obj.name

  // v -> M 视图到数据
  input.oninput = function () {
    obj.name = input.value
  }

  // M -> v 数据到视图
  let temp = obj.name
  // 参数1:把属性添加到哪个对象上去
  // 参数2:添加的属性
  // 参数3:属性描述符 对象形式
  Object.defineProperty(obj, 'name', {
    get () {
      return temp
    },
    set (value) {
      temp = value
      p.innerText = value
      input.value = value
    }
  })
</script>

效果:

1585710196165.gif
我们可以看到,以上代码中对数据操作的主要是Object.defineProperty这个方法中的get和set方法。

MVVM

相应大家有工作经验的朋友都知道原来主要的用架构模式都是MVC或者MVP模式,在功能逐渐增多的情况下,Controller的工作量大大的增加,已经变的不易维护,使得无数的开发者头疼,直到MVVM模式的框架出现,极大的减轻了开发者的工作量,深受喜爱,它的核心功能就是双向数据绑定,因为这一特性得到广泛应用。


MVVM.png

MVVM设计模式:

5af2bcdd0001ccfd19201080.jpg
运行概述:Observer会实时监听data中的数据变化,Observer背后其实还是Object.defineProperty,当data中的数据变化时会触发Object.defineProperty中的set函数,set会执行对观察者列表Dep(由被观察的对象组成)的触发,Dep中的列表页是由Watcher添加的,Dep得到通知后会执行更新函数,也就是Watcher给的回调函数,Watcher根据回调函数拿到的更新数据,就可以去更新View了。

相关文章

网友评论

      本文标题:如何用js手动实现一个数据双向绑定

      本文链接:https://www.haomeiwen.com/subject/obmouhtx.html