原生js实现双向数据绑定

原理

本篇是使用Object.defineProperty()来实现双向绑定

该方法提供一个对象的get&set回调， 即当对象发生变化时会调取这两个方法， 以此来实现修改对应的dom

源代码

    
  
  

    
      1
      2
      12
      13
    
  

var obj = {}

bindDomWithObject({
  id: 'bv2d',
  obj: obj,
  prop: 'name',
  type: 'change',
  updated: function(obj, prop, dom) {
  },
  callback: function(options, obj, dom) {
    obj[options.prop] = '12'; // 可以在这里给dom添加默认值
  }
})

bindDomWithObject({
  id: 'bv2d2',
  obj: obj,
  prop: 'name',
  type: 'input',
  updated: function(obj) {
  },
  callback: function(options) {
    obj[options.prop] = 'namns';
  }
})


/**
 * 
 * @param {object} options
 *  
 */
function bindDomWithObject(options) {

  var dom = document.getElementById(options.id); // 获取dom id
  var obj = options.obj; // 需要绑定的obj
  var prop = options.prop; // 需要绑定的obj 的属性
  var callback = options.callback; // 绑定成功后调用
  var type = options.type; // 绑定的事件类型
  var updated = options.updated; // 更新成功后调用


  Object.defineProperty(obj, prop, {
    get: function() { return dom.value; },
    set: function(value) { dom.value = value; },
    configurable: true
  })

  dom.addEventListener(type, function() { 
    obj[prop] = obj[prop]; 
    if(typeof updated === 'function') {
      updated(obj, prop, dom); // 传入对象， 修改的属性， 以及dom节点
    }

  });

  if(typeof callback === 'function') {
    callback(options, obj, dom);
  }

} 

以下是原文章

let dom = document.createElement('input');
dom.setAttribute('id', 'dom_input');
document.body.appendChild(dom)  
let user = {};
bindDomWithObject(dom, user, 'name')
user.name = 'json'
function bindDomWithObject(dom, obj, prop) {
  Object.defineProperty(obj, prop, {
    get: function() { return dom.value; },
    set: function(value) { dom.value = value; },
    configurable: true
  })
  dom.addEventListener('input', function() { obj.name = obj.name; log(obj) })
}