微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

实现非常简单的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比如下面:

rush:js;"> function DataBinder( object_id ) { // Use a jQuery object as simple PubSub var pubSub = jQuery({}); // We expect a `data` element specifying the binding // in the form: data-bind-="" var data_attr = "bind-" + object_id,message = object_id + ":change"; // Listen to change events on elements with the data-binding attribute and proxy // them to the PubSub,so that the change is "broadcasted" to all connected objects jQuery( document ).on( "change","[data-" + data_attr + "]",function( evt ) { var $input = jQuery( this ); pubSub.trigger( message,[ $input.data( data_attr ),$input.val() ] ); }); // PubSub propagates changes to all bound elements,setting value of // input tags or HTML content of other tags 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 ); } }); }); return pubSub; }

对于上面这个实现来说,下面是一个User模型的最简单的实现方法

rush:js;"> function User( uid ) { var binder = new DataBinder( uid ),user = { attributes: {},// The attribute setter publish changes using the DataBinder PubSub set: function( attr_name,val ) { this.attributes[ attr_name ] = val; binder.trigger( uid + ":change",[ attr_name,val,this ] ); },get: function( attr_name ) { return this.attributes[ attr_name ]; },_binder: binder }; // Subscribe to the PubSub binder.on( uid + ":change",attr_name,new_val,initiator ) { if ( initiator !== user ) { user.set( attr_name,new_val ); } }); return user; }

现在我们如果想要将User模型属性绑定到UI上,我们只需要将适合的数据特性绑定到对应的HTML元素上。

rush:js;"> // javascript var user = new User( 123 ); user.set( "name","Wolfgang" ); // html

这样输入值会自动映射到user对象的name属性,反之

亦然。到此这个简单实现就完成啦!

不需要jQuery的实现

在如今的大多数项目里,可能已经使用了jQuery,因此上面的例子完全可以接受。不过,如果我们需要试着向另一个极端做,并且还删除对jQuery的依赖,那么怎么做呢?好,证实一下这么做并不难(尤其是在我们限制只支持IE 8及以上版本的情况下)。最终,我们必须使用一般的javascript实现一个定制的PubSub并且保留了DOM事件:

rush:js;"> function DataBinder( object_id ) { // Create a simple PubSub object var pubSub = { 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 ( var i =,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 ) { var target = evt.target || evt.srcElement,// IE compatibility prop_name = target.getAttribute( data_attr ); if ( prop_name && prop_name !== "" ) { pubSub.publish( message,target.value ); } }; // Listen to change events and proxy to PubSub if ( document.addEventListener ) { document.addEventListener( "change",changeHandler,false ); } else { // IE uses attachEvent instead of addEventListener document.attachEvent( "onchange",changeHandler ); } // PubSub propagates changes to all bound elements pubSub.on( message,new_val ) { var elements = document.querySelectorAll("[" + data_attr + "=" + prop_name + "]"),tag_name; for ( var i =,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方法外,模型可以保持一样。调用trigger方法将替代为调用我们定制的具有不同特征的PubSub的publish方法

rush:js;"> // In the model's setter: function User( uid ) { // ... user = { // ... set: function( attr_name,val ) { this.attributes[ attr_name ] = val; // Use the `publish` method binder.publish( uid + ":change",this ); } } // ... }

我们又一次通过一百行不到,又可维护的纯javascript完成了我们想要的结果。

以上内容就是关于js双向数据绑定的相关教程,希望对大家学习有所帮助。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐