JavaScript 实现简单的双向数据绑定

英文原文：

双向数据绑定指的就是，绑定对象属性的改变到用户界面的变化的能力，反之亦然。换种说法，如果我们有一个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比如下面：

                                01                 function DataBinder( object_id ) { 
                
                                02                   // Use a jQuery object as simple PubSub                
              
                                03                   var pubSub = jQuery({});                
              
                                04                                  
              
                                05                   // We expect a `data` element specifying the binding                
              
                                06                   // in the form: data-bind-<object_id>="<property_name>"                
              
                                07                   var data_attr = "bind-" + object_id,                
              
                                08                       message = object_id + ":change";                
              
                                09                                  
              
                                10                   // Listen to change events on elements with the data-binding attribute and proxy                
              
                                11                   // them to the PubSub, so that the change is "broadcasted" to all connected objects                
              
                                12                   jQuery( document ).on( "change", "[data-" + data_attr + "]", function( evt ) { 
                
                                13                     var $input = jQuery( this );                
              
                                14                                  
              
                                15                     pubSub.trigger( message, [ $input.data( data_attr ), $input.val() ] );                
              
                                16                   });                
              
                                17                                  
              
                                18                   // PubSub propagates changes to all bound elements, setting value of                
              
                                19                   // input tags or HTML content of other tags                
              
                                20                   pubSub.on( message, function( evt, prop_name, new_val ) { 
                
                                21                     jQuery( "[data-" + data_attr + "=" + prop_name + "]" ).each( function() { 
                
                                22                       var $bound = jQuery( this );                
              
                                23                                  
              
                                24                       if ( $bound.is("input, textarea, select") ) { 
                
                                25                         $bound.val( new_val );                
              
                                26                       } else { 
                
                                27                         $bound.html( new_val );                
              
                                28                       }                
              
                                29                     });                
              
                                30                   });                
              
                                31                                  
              
                                32                   return pubSub;                
              
                                33                 }

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

                                01                 function User( uid ) { 
                
                                02                   var binder = new DataBinder( uid ),                
              
                                03                                  
              
                                04                       user = { 
                
                                05                         attributes: {},                
              
                                06                                  
              
                                07                         // The attribute setter publish changes using the DataBinder PubSub                
              
                                08                         set: function( attr_name, val ) { 
                
                                09                           this.attributes[ attr_name ] = val;                
              
                                10                           binder.trigger( uid + ":change", [ attr_name, val, this ] );                
              
                                11                         },                
              
                                12                                  
              
                                13                         get: function( attr_name ) { 
                
                                14                           return this.attributes[ attr_name ];                
              
                                15                         },                
              
                                16                                  
              
                                17                         _binder: binder                
              
                                18                       };                
              
                                19                                  
              
                                20                   // Subscribe to the PubSub                
              
                                21                   binder.on( uid + ":change", function( evt, attr_name, new_val, initiator ) { 
                
                                22                     if ( initiator !== user ) { 
                
                                23                       user.set( attr_name, new_val );                
              
                                24                     }                
              
                                25                   });                
              
                                26                                  
              
                                27                   return user;                
              
                                28                 }

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

                                1                 // javascript                
              
                                2                 var user = new User( 123 );                
              
                                3                 user.set( "name", "Wolfgang" );                
              
                                4                                  
              
                                5                 // html                
              
                                6                 <input type="number" data-bind-123="name" />

这样输入值会自动映射到user对象的name属性，反之亦然。到此这个简单实现就完成啦！

不需要jQuery的实现

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

                                01                 function DataBinder( object_id ) { 
                
                                02                   // Create a simple PubSub object                
              
                                03                   var pubSub = { 
                
                                04                         callbacks: {},                
              
                                05                                  
              
                                06                         on: function( msg, callback ) { 
                
                                07                           this.callbacks[ msg ] = this.callbacks[ msg ] || [];                
              
                                08                           this.callbacks[ msg ].push( callback );                
              
                                09                         },                
              
                                10                                  
              
                                11                         publish: function( msg ) { 
                
                                12                           this.callbacks[ msg ] = this.callbacks[ msg ] || []                
              
                                13                           for ( var i = 0, len = this.callbacks[ msg ].length; i < len; i++ ) { 
                
                                14                             this.callbacks[ msg ][ i ].apply( this, arguments );                
              
                                15                           }                
              
                                16                         }                
              
                                17                       },                
              
                                18                                  
              
                                19                       data_attr = "data-bind-" + object_id,                
              
                                20                       message = object_id + ":change",                
              
                                21                                  
              
                                22                       changeHandler = function( evt ) { 
                
                                23                         var target = evt.target || evt.srcElement, // IE8 compatibility                
              
                                24                             prop_name = target.getAttribute( data_attr );                
              
                                25                                  
              
                                26                         if ( prop_name && prop_name !== "" ) { 
                
                                27                           pubSub.publish( message, prop_name, target.value );                
              
                                28                         }                
              
                                29                       };                
              
                                30                                  
              
                                31                   // Listen to change events and proxy to PubSub                
              
                                32                   if ( document.addEventListener ) { 
                
                                33                     document.addEventListener( "change", changeHandler, false );                
              
                                34                   } else { 
                
                                35                     // IE8 uses attachEvent instead of addEventListener                
              
                                36                     document.attachEvent( "onchange", changeHandler );                
              
                                37                   }                
              
                                38                                  
              
                                39                   // PubSub propagates changes to all bound elements                
              
                                40                   pubSub.on( message, function( evt, prop_name, new_val ) { 
                
                                41                     var elements = document.querySelectorAll("[" + data_attr + "=" + prop_name + "]"),                
              
                                42                         tag_name;                
              
                                43                                  
              
                                44                     for ( var i = 0, len = elements.length; i < len; i++ ) { 
                
                                45                       tag_name = elements[ i ].tagName.toLowerCase();                
              
                                46                                  
              
                                47                       if ( tag_name === "input" || tag_name === "textarea" || tag_name === "select" ) { 
                
                                48                         elements[ i ].value = new_val;                
              
                                49                       } else { 
                
                                50                         elements[ i ].innerHTML = new_val;                
              
                                51                       }                
              
                                52                     }                
              
                                53                   });                
              
                                54                                  
              
                                55                   return pubSub;                
              
                                56                 }

除了设置器里调用 jQuery的trigger方法外，模型可以保持一样。调用trigger方法将替代为调用我们定制的具有不同特征的PubSub的publish方法：

                                01                 // In the model's setter:                
              
                                02                 function User( uid ) { 
                
                                03                   // ...                
              
                                04                                  
              
                                05                   user = { 
                
                                06                     // ...                
              
                                07                     set: function( attr_name, val ) { 
                
                                08                       this.attributes[ attr_name ] = val;                
              
                                09                       // Use the `publish` method                
              
                                10                       binder.publish( uid + ":change", attr_name, val, this );                
              
                                11                     }                
              
                                12                   }                
              
                                13                                  
              
                                14                   // ...                
              
                                15                 }

再次说明一下，我们用一般的纯javascript的少于100行的维护代码获得了同样的结果。

本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接

我们的翻译工作遵照，如果我们的工作有侵犯到您的权益，请及时联系我们

你可能感兴趣的文章