您的位置：首页 > 编程语言 > Java开发

JavaSript数据双向绑定

2017-10-09 16:40 141 查看

数据双向绑定

顾名思义，数据源变动绑定数据对象也应该变动

下面是我认为的数据绑定较为简单的实现

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据双向绑定</title>
<style>
div{
padding: 10px;
margin: 10px 0 ;
}
div:nth-child(even){
background: #ccc;
}
</style>
</head>
<body>
<input type="text" id="input2">
<div m-model="data" ></div>
<div m-model="data"></div>
<div m-model="data"></div>
<div m-model="data"></div>
<script>
//事件聚合理论 负责事件回调
function Event(name){
var handlers = [];
this.getName = function(){
return name;
}
this.addHandler =  function(handler){
handlers.push(handler);
}
this.removeHandler = function(handler){
handler.filter((items)=>{
return items!==handler
})
}
this.fire = function(eventArgs){
handlers.forEach((h)=>{
h(eventArgs);
})
}
}
function EventAggregator(){
var events = [];
function getEvent(eventName){
return events.filter((item)=>{
return item.getName()==eventName;
})
}
//发布方法
this.publish = function(eventName,eventArgs){
var event = getEvent(eventName)[0];
if(!event){
event = new Event(eventName);
}
event.fire(eventArgs);
}
//注册方法
this.subscribe = function(eventName,handler){
var event = getEvent(eventName)[0];
if(!event){
event = new Event(eventName);
events.push(event);
}
event.addHandler(handler);
}
}
function DataContorller(data,eventArgs){
//注册数据改变方法
eventArgs.subscribe('dataChange',function(eventArgs){
var elems = document.querySelectorAll("[m-model="+dataChange+"]");
elems.forEach((elem)=>{
elem.innerHTML = eventArgs.data;
})
})
}
function DataBinder(eventArgs){
function dataChange(){
var data = this.value;
eventArgs.publish('dataChange',{data:data})
}
document.getElementById('input2').addEventListener('input',dataChange,false);
}
var eventAggregator = new EventAggregator(),
dataContorller = new DataContorller("data",eventAggregator),
DataBinder = new DataBinder(eventAggregator);
</script>
</body>
</html>

虽然尝试着使用观察者模式实现了，但总感觉整个代码是为了实现而实现

不知道是哪里出了问题。

希望有大神能指点迷津，先谢过。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航