JS双向数据绑定

CalabashBrothers_

于 2020-05-14 15:02:01 发布

阅读量180

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/hitler_yuzhan/article/details/106120090

javascript 专栏收录该内容

6 篇文章

订阅专栏

本文介绍两种实现MVVM模式的方法：1. 使用Object.defineProperty方法，通过setter和getter来同步视图和数据模型。2. 利用Proxy对象，实现更灵活的数据拦截和操作。通过实例演示了如何在输入框修改时实时更新DOM元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<p id="getter"></p>
<input type="text" id="setter">

1. defineProperty方法

var p = document.getElementById('getter');
var input = document.getElementById('setter');
mvvm(p, input);
function mvvm(p, input) {
  input.addEventListener('keyup', modelViewViewModel);
  var demo = new Object(null);
  Object.defineProperty(demo, 'val', {
    set: function (value) {
      p.innerText = value; // value，变更后的结果
    },
    get: function () {
      return val;
    }
  })
  function modelViewViewModel() {
    demo['val'] = input.value
  }
}

2. proxy方式

let data = {
  p: document.getElementById('getter'),
  input: document.getElementById('setter')
}
mvvm(data);
function mvvm(data) {
  data.input.addEventListener('keyup', modelViewViewModel); // set
  let demo = new Proxy(data, {
    set(target, key, value) {
      console.log(value);
      data.p.innerText = value
    },
    get(target, key) {
      console.log(target, key, target[key].innerText);
      return target[key].innerText
    }
  })
  console.log(demo.p); // get
  function modelViewViewModel() {
    demo.p = data.input.value
  }
}