实现非常简单的js双向数据绑定
双向数据绑定指的就是，绑定对象属性的改变到用户界面的变化的能力，反之亦然。换种说法，如果我们有一个user对象和一个name属性，一旦我们赋了一个新值给user.name,在UI上就会显示新的姓名了。同样地，如果UI包含了一个输入用户姓名的输入框，输入一个新值就应该会使user对象的name属性做出相应的改变。
很多热门的JS框架客户端如Ember.js，Angular.js或者KnockoutJS，都在最新特性上刊登了双向数据绑定。这并不意味着从零实现它很难，也不是说需要这些功能的时候，采用这些框架是唯一的选择。下面的想法实际上很基础，可以被认为是3步走计划：
我们需要一个UI元素和属性相互绑定的方法
我们需要监视属性和UI元素的变化
我们需要让所有绑定的对象和元素都能感知到变化
还是有很多方法能够实现上面的想法，有一个简单有效的方法就是使用PubSub模式。这个思路很简单：我们使用数据特性来为HTML代码进行绑定，所有被绑定在一起的JavaScript对象和DOM元素都会订阅一个PubSub对象。只要JavaScript对象或者一个HTML输入元素监听到数据的变化时，就会触发绑定到PubSub对象上的事件，从而其他绑定的对象和元素都会做出相应的变化。
用jQuery做一个简单的实现
对于DOM事件的订阅和发布，用jQuery实现起来是非常简单的，接下来我们就是用Jquery比如下面：
functionDataBinder(object_id){
//UseajQueryobjectassimplePubSub
varpubSub=jQuery({});
//Weexpecta`data`elementspecifyingthebinding
//intheform:data-bind-<object_id>="<property_name>"
vardata_attr="bind-"+object_id,
message=object_id+":change";
//Listentochangeeventsonelementswiththedata-bindingattributeandproxy
//themtothePubSub,sothatthechangeis"broadcasted"toallconnectedobjects
jQuery(document).on("change","[data-"+data_attr+"]",function(evt){
var$input=jQuery(this);
pubSub.trigger(message,[$input.data(data_attr),$input.val()]);
});
//PubSubpropagateschangestoallboundelements,settingvalueof
//inputtagsorHTMLcontentofothertags
pubSub.on(message,function(evt,prop_name,new_val){
jQuery("[data-"+data_attr+"="+prop_name+"]").each(function(){
var$bound=jQuery(this);
if($bound.is("input,textarea,select")){
$bound.val(new_val);
}else{
$bound.html(new_val);
}
});
});
returnpubSub;
}
对于上面这个实现来说，下面是一个User模型的最简单的实现方法：
functionUser(uid){
varbinder=newDataBinder(uid),
user={
attributes:{},
//TheattributesetterpublishchangesusingtheDataBinderPubSub
set:function(attr_name,val){
this.attributes[attr_name]=val;
binder.trigger(uid+":change",[attr_name,val,this]);
},
get:function(attr_name){
returnthis.attributes[attr_name];
},
_binder:binder
};
//SubscribetothePubSub
binder.on(uid+":change",function(evt,attr_name,new_val,initiator){
if(initiator!==user){
user.set(attr_name,new_val);
}
});
returnuser;
}
现在我们如果想要将User模型属性绑定到UI上，我们只需要将适合的数据特性绑定到对应的HTML元素上。
//javascript
varuser=newUser(123);
user.set("name","Wolfgang");
//html
<inputtype="number"data-bind-123="name"/>
这样输入值会自动映射到user对象的name属性，反之
亦然。到此这个简单实现就完成啦！
不需要jQuery的实现
在如今的大多数项目里，可能已经使用了jQuery，因此上面的例子完全可以接受。不过，如果我们需要试着向另一个极端做，并且还删除对jQuery的依赖，那么怎么做呢？好，证实一下这么做并不难（尤其是在我们限制只支持IE8及以上版本的情况下）。最终，我们必须使用一般的javascript实现一个定制的PubSub并且保留了DOM事件:
functionDataBinder(object_id){
//CreateasimplePubSubobject
varpubSub={
callbacks:{},
on:function(msg,callback){
this.callbacks[msg]=this.callbacks[msg]||[];
this.callbacks[msg].push(callback);
},
publish:function(msg){
this.callbacks[msg]=this.callbacks[msg]||[]
for(vari=,len=this.callbacks[msg].length;i<len;i++){
this.callbacks[msg][i].apply(this,arguments);
}
}
},
data_attr="data-bind-"+object_id,
message=object_id+":change",
changeHandler=function(evt){
vartarget=evt.target||evt.srcElement,//IEcompatibility
prop_name=target.getAttribute(data_attr);
if(prop_name&&prop_name!==""){
pubSub.publish(message,prop_name,target.value);
}
};
//ListentochangeeventsandproxytoPubSub
if(document.addEventListener){
document.addEventListener("change",changeHandler,false);
}else{
//IEusesattachEventinsteadofaddEventListener
document.attachEvent("onchange",changeHandler);
}
//PubSubpropagateschangestoallboundelements
pubSub.on(message,function(evt,prop_name,new_val){
varelements=document.querySelectorAll("["+data_attr+"="+prop_name+"]"),
tag_name;
for(vari=,len=elements.length;i<len;i++){
tag_name=elements[i].tagName.toLowerCase();
if(tag_name==="input"||tag_name==="textarea"||tag_name==="select"){
elements[i].value=new_val;
}else{
elements[i].innerHTML=new_val;
}
}
});
returnpubSub;
}
除了设置器里调用jQuery的trigger方法外，模型可以保持一样。调用trigger方法将替代为调用我们定制的具有不同特征的PubSub的publish方法：
//Inthemodel'ssetter:
functionUser(uid){
//...
user={
//...
set:function(attr_name,val){
this.attributes[attr_name]=val;
//Usethe`publish`method
binder.publish(uid+":change",attr_name,val,this);
}
}
//...
}
我们又一次通过一百行不到，又可维护的纯javascript完成了我们想要的结果。
以上内容就是关于js双向数据绑定的相关教程，希望对大家学习有所帮助。