站内搜索:
首页 >> 前端 >> 内容
使用发布订阅模式简单实现类似vue的双向数据绑定(代码教程)

时间:2018/5/11 11:09:57

看代码

var inp = document.querySelector('input');
var p = document.querySelector('p');

//发布订阅对象
var obj = {};
//发布订阅事件列表
obj.list = {};
//定义订阅事件函数
obj.listen = function(eventName,fn){
  obj.list[eventName] = fn;
}
//定义发布事件函数
obj.trigger = function(eventName){
  obj.list[eventName]();
}

//数据
var data = {str:'hello'}
var str = data.str;
//观察数据变动从而触发所订阅事件
Object.defineProperty(data, 'str', {
  get(){
    return str;
  },
  set(newVal){
    str = newVal;
    console.log(data.str);
    obj.trigger('go')
  }
})
//订阅一个事件
obj.listen('go',function(){
  p.innerText = data.str;
  inp.value = data.str;
})

//数据变动
inp.oninput = function(){
  data.str = this.value;
}

setInterval(function(){
  data.str+='a';
},1000)

  • 上一篇:DOM节点循环绑定事件代码分析
  • 下一篇:CSS布局、盒模型、块元素和内联元素详解
  • 返回顶部