Bootstrap

使用发布订阅模式简单实现类似vue的双向数据绑定

看代码

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)

 

悦读

道可道,非常道;名可名,非常名。 无名,天地之始,有名,万物之母。 故常无欲,以观其妙,常有欲,以观其徼。 此两者,同出而异名,同谓之玄,玄之又玄,众妙之门。

;