使用发布订阅模式简单实现类似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)
- 上一篇：android线性布局的实例分析
- 下一篇：CSS布局、盒模型、块元素和内联元素详解
相关文章
图文推荐
- 文章
- 推荐
- 热门新闻