JavaScript中双向数据绑定详解
2020-03-05 16:00:43来源:爱站网 阅读 ()
双向数据绑定是可以大大提高开发效率,我们还想学习其他的双向数据绑定,那么JavaScript中双向数据绑定详解,大家知道吗?下面就让大家跟着爱站技术频道小编进入下文了解。
双向数据绑定指的是将对象属性变化绑定到UI,或者反之。换句话说,如果我们有一个拥有name属性的user对象,当我们给user.name赋予一个新值是UI也会相应的显示新的名字。同样的,如果UI包括了一个输入字段用来输入用户名,输入一个新的值会导致user对象中的那么属性发生变化。
许多流行的客户端JavaScript框架例如Ember.js,AngularJS以及KnockoutJS都将双向数据绑定作为自己的头号特性。但是这并不意味着从零开始实现双向数据绑定就很困难,同样的当我们需要双向数据绑定时并不是只能够选择这些框架其中的一个。双向数据绑定底层的思想非常的基本,它可以被压缩成为三个步骤:
1.我们需要一个方法来识别哪个UI元素被绑定了相应的属性
2.我们需要监视属性和UI元素的变化
3.我们需要将所有变化传播到绑定的对象和元素
虽然实现的方法有很多,但是最简单也是最有效的途径是使用发布者-订阅者模式。思想很简单:我们可以使用自定义的data属性在HTML代码中指明绑定。所有绑定起来的JavaScript对象以及DOM元素都将“订阅”一个发布者对象。任何时候如果JavaScript对象或者一个HTML输入字段被侦测到发生了变化,我们将代理事件到发布者-订阅者模式,这会反过来将变化广播并传播到所有绑定的对象和元素。
使用jQuery的简单实现
使用jQuery来实现双向数据绑定非常的直接且简单,因为这个流行的库能够是我们轻松的订阅和发布DOM事件,以及我们自定义的事件:
function DataBinder(object_id){ //使用一个jQuery对象作为简单的订阅者发布者 var pubSub = jQuery({}); //我们希望一个data元素可以在表单中指明绑定:data-bind-<object_id>="<property_name>" var data_attr = "bind-" + object_id, message = object_id + ":change"; //使用data-binding属性和代理来监听那个元素上的变化事件 // 以便变化能够“广播”到所有的关联对象 jQuery(document).on("change","[data-" + data_attr + "]",function(evt){ var input = jQuery(this); pubSub.trigger(message, [ $input.data(data_attr),$input.val()]); }); //PubSub将变化传播到所有的绑定元素,设置input标签的值或者其他标签的HTML内容 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,text area,select")){ $bound.val(new_val); }else{ $bound.html(new_val); } }); }); return pubSub; }
在这个实验中可以按照以下代码简单的实现一个User模型:
function User(uid){ var binder = new DataBinder(uid), user = { atttibutes: {}, //属性设置器使用数据绑定器PubSub来发布变化 set: function(attr_name,val){ this.attriures[attr_name] = val; binder.trigger(uid + ":change", [attr_name, val, this]); }, get: function(attr_name){ return this.attributes[attr_name]; }, _binder: binder }; binder.on(uid +":change",function(vet,attr_name,new_val,initiator){ if(initiator !== user){ user.set(attr_name,new_val); } }) }
现在,无论我们什么时候想把模型的属性绑定到UI的一部分上,我们只需要在相应的HTML元素上设置一个合适的data属性即可。
//JavaScript var user = new User(123); user.set("name","Wolfgang"); //html <input type="number" data-bind-123="name" />
input字段的值会自动反映出user对象的name属性,反之亦然。任务完成了!
不使用jQuery来创建数据双向绑定
在入如今的大多数项目中,都可能已经用到了jQuery,因此完全可以借用前面的例子。但是如果我们更进一步,移除对jQuery的依赖会怎样呢?事实上,这并不是太困难(尤其是当我们限定只支持IE8以上的版本)。最终,我们需要使用原生的JavaScript来实现一个自定义的PubSub以及观察DOM事件。
function DataBinder(object_id){ //创建一个简单地PubSub对象 var pubSub = { callbacks: {}. on: function(msg,calssback){ this.callbacks[msg] = this.callbacks[msg] || []; this.callbacks[msg].push(callback); }, publish: function(msg){ this.callbacks[msg] = this.callbacks[msg] || []; for(var i = 0, len = this.callbacks[msg].length; i<lenli++){ this.callbacks[msg][i].apply(this,arguments); } } }, data_attr = "data-bind-" + object_id, message = object_id + ":change", changeHandler = function(evt){ var target = evt.target || evt.srcElemnt, //IE8兼容 prop_name = target.getAttribute(data_attr); if(prop_name && prop_name !== ""){ pubSub.publish(message,prop_name,target.value); } }; //监听变化事件并代理到PubSub if(document.addEventListener){ document.addEventListener("change",changeHandler,false); }else{ //IE8使用attachEvent而不是addEventListener document.attachEvent("onchange",changeHandler); } //PubSub将变化传播到所有绑定元素 pubSub.on(message,function(vet,prop_name,new)_val){ var elements = document.querySelectorAll("[" + data_attr + "=" + prop_name + "]"), tah_name; for(var i = 0,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; } } }); return pubSub; }
模型可以和勤勉你的例子保持一直,除了在设置器中调用那个jQuery的trigger方法之外,它需要通过调用一个自定义的PubSub的publish方法来实现:
//在model的设置器中 function User(uid){ //... user = { //... set: function(attr_name,val){ this.attribute[attr_name] = val; //使用“publish”方法 binder.publish(uid+ ":change", attr_name, val,this); } } //... }
再一次,我们使用原生的JavaScript代码实现了相同的结果,而不是使用臃肿的JavaScript框架。
今天爱站技术频道就为大家介绍到这里了,JavaScript中双向数据绑定详解是非常不错的哦,爱站技术频道小编为大家推荐。
原文链接:https://js.aizhan.com/develop/JavaScript/11925.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- javascript面向对象入门基础详细介绍 2020-03-29
- JavaScript函数表达式详解及实例 2020-03-25
- 如何用javascript连接access数据库 2020-03-20
- js中去掉字串左右空格 2020-03-20
- Javascript中的经典技巧 2020-03-20
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash