双向数据绑定是指将对象属性的变化与用户界面的变化绑定的能力，反之亦然。下面这篇文章主要介绍一种js项目中双向数据绑定的简单实现方法，有需要的朋友可以参考一下。
目录
前言发布订户模式结果调用
摘要
序
双向数据绑定是指当一个对象的属性改变时，对应的UI可以同时改变，反之亦然。换句话说，如果我们有一个user对象，它有一个name属性，每当您为user.name设置一个新值时，UI都会显示这个新值。类似地，如果UI包含数据用户名的输入框，输入新值也会导致用户对象的name属性相应地改变。
许多流行的javascript框架，如Ember.js、Angular.js或KnockoutJS，都将双向数据绑定作为其主要功能。这并不意味着很难从头实现它，也不意味着当我们需要这种功能时，使用这些框架是我们唯一的选择。内势思想其实挺基础的，它的实现可以归纳为以下三点：
我们需要一种方法来确定哪个UI元素绑定到哪个属性。
我们需要监控属性和UI的变化。
我们需要传播所有绑定对象和UI元素的更改。
订户模式
发布-订阅模型实际上是对象之间一对多的依赖关系。当一个对象的状态发生变化时，所有依赖于它的对象都会收到状态变化的通知。
订阅者在调度中心(事件通道)注册(订阅)自己想要订阅的事件，当发布者将事件发布到调度中心时，即事件触发时，调度中心统一调度(触发事件)订阅者在调度中心注册的处理代码。
结果
转移
Html呼叫者绑定数据-bind-phone='name '
保险商实验所
李='阻止手机修复bd-bottom '
Label=' j _验证电话' data-bind-phone=' tishi ' span手机号码/span/label
input class=' fix 1 ' id=' J _ verification phone ' data-bind-phone=' name ' name=' phone ' type=' text '/
button class=' right J _ clickTime ' type=' button '
获取验证码/span
class=' award-messages-btn2j _ messages btn2 none ' i60/is后重新发送/span
/按钮
/李
li class='块验证修复'
Label=' j _验证码' span验证码/span/label
input class=' fix 1 ' data-bind-code=' tishi ' id=' J _ verification code ' data-bind-phone=' name ' name=' verification-code ' class=' ' type=' '/
/李
/ul
Js调用。请参见以下代码注释
/**
*函数verficationCallback回调方法
* [$btn1描述]
* data-bind-phone='name '
* @ message {[type]}更改了现场电话
* @ prop_name {[type]}字段的值名称
* @ target {[type]}目标jsdom对象；
* @ targetValue {[type]}目标jsdom对象的值
*///监听回调函数，函数会得到目标js dom对象targetvalue的值，方便对改变后的字段进行操作！
var User=require('././entry/module/two way audio . js ')；
var phone=新用户(' phone '，verification callback)；
函数验证回调(消息，属性名称，目标，目标值){
}
介绍源代码双向音频
函数DataBinder(object_id，verification callback){
//创建一个简单的pubSub对象
var pubSub={
回调：{}，
on:函数(消息，回调){
this . callbacks[msg]=this . callbacks[msg]| |[]；
this.callbacks[msg]。推送(回调)；
},
发布：函数(消息){
\
this . callbacks[msg]=this . callbacks[msg]| |[]；
for (var i=0，len=this.callbacks[msg].长度；我leni ) {
this.callbacks[msg][i]。应用(这个，论据)；
};
}
},
data_attr='数据绑定-'对象标识，
message=object_id ':change '，
changeHandler=函数(事件){
var=event . target | | event . srcelement，//IE8兼容
prop _ name=target . get attribute(data _ attr)；
if(道具名道具名！=='') {
if(验证回调){
var目标值=目标值
验证回调(消息，prop_name，目标，目标值)；
}
publish(消息，属性名，目标。值)；
}
};
//监听事件变化，并代理到公共订阅
if (document.addEventListener) {
文档。addevent侦听器(' keyup '，changeHandler，false)；
}否则{
//IE8使用附加事件而不是addEventListenter
document.attachEvent('onkeyup '，更改处理程序)；
};
//pubSub将变化传播到所有绑定元素
pubSub.on(消息，函数（事件，属性名，新值){
var元素=文档。查询选择器all('[' data _ attr '=' prop _ name ']')，
标签名称
for (var i=0，len=elements.length我leni ) {
tag _ name=elements[I]。标记名。tolowercase()；
if(tag _ name===' input ' | | tag _ name===' textarea ' | | tag _ name===' select '){
要素[我].值=新值
}否则{
要素[我].innerHTML=new _ val
};
};
})
返回公共订阅
}
函数用户(uid，验证回调){
var binder=new DataBinder(uid，verficationCallback)，
用户={
属性：{},
//属性设置器使用数据绑定器公共订阅来发布
set : function(attr_name，val) {
这个。属性[属性名称]=val；
binder.publish(uid ':change '，attr_name，val，this)；
},
get : function(attr_name) {
返回这个。属性[属性名称];
},
_粘合剂：粘合剂
};
binder.on(uid ':change '，function(event，attr_name，new_val，initiator) {
如果（发起者！==用户){
用户设置(属性名，新值);
}
});
返回用户；
}
模块.导出=用户
//phone.set( 'name '，' lwl ')；
//phone.set( 'tishi '，'提示' );
替代解决方案
上面只是在掩饰双向数据绑定，其实这种需求可以更简单的实现嘿嘿
$('.block-phone #phone')[0].oninput=function(){
console.log($(this))
}
总结
到此这篇关于射流研究…项目中双向数据绑定的简单实现方法的文章就介绍到这了，更多相关射流研究…双向数据绑定实现内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。