简单用javascript实现数据双向绑定.docxVIP

双向数据绑定指的是当对象的属性发生变化时能够同时改变对应的UI，反之亦然。换句话说，如果我们有一个user对象，这个对象有一个name属性，无论何时你对user.name设置了一个新值，UI也会展示这个新的值。同样的，如果UI包含一个用于数据用户名字的输入框，输入一个新值也会导致user对象的name属性发生相应的改变。许多流行的javascript框架，像Ember.js,Angular.js或者KnockoutJS都会把双向数据绑定作为其中的主要特性来宣传。这并不意味着从头开始实现它很难，也不意味着当我们需要这种功能的时候，使用这些框架是我们唯一的选择。内部的潜在思想事实上是相当基础的，实现它可以归纳为以下三点：我们需要一种方式确定哪个UI元素绑定在哪个属性上。我们需要监控属性和UI的变化我们需要把所有绑定的对象和UI元素的变化传播出去。尽管有好多种方式去实现这几点，一种简单高效的方法是我们通过发布订阅者模式来实现。方法很简单：我们可以使用定制的data属性作为HTML代码中需要绑定的属性。所有的绑定在一起的Javascript对象和DOM元素将会订阅这个发布订阅对象。任何时候我们检测到无论是Javascript对象亦或是HTML的input元素的变化，我们都是把事件代理传递给发布订阅对象，然后通过它把所有发生在绑定的对象和元素的的变化传递和广播出去。一个用jQuery实现的简单例子通过jQuery实现我们上面讨论的东西是相当简单明了的，因为作为一个流行的库，它让我们很简单的实现订阅和发布DOM事件，同时我们也可以定制一个：functionDataBinder(object_id){// Use a jQuery object as simple PubSubvarpubSub=jQuery({});// We expect a `data` element specifying the binding// in the form:data-bind-object_id=property_namevardata_attr=bind-+object_id,message=object_id+:change;// Listen to chagne events on elements with data-binding attribute and proxy// then to the PubSub, so that the change is broadcasted to all connected objectsjQuery(document).on(change,[data-]+data_attr+],function(eve){var$input=jQuery(this);pubSub.trigger(message,[$input.data(data_attr),$input.val()]); });// PubSub propagates chagnes to all bound elemetns,setting value of// input tags or HTML content of other tagspubSub.on(message,function(evt,prop_name,new_val){jQuery([data-+data_attr+=+prop_name+]).each(function(){var$bound=jQuery(this);if($bound.is()){$bound.val(new_val);}else{$bound.html(new_val); } }); });returnpubSub;}至于javascript对象，下面是最小化的user数据模型实现的例子：functionUser(uid){var binder=newDataBinder(uid),user={attributes:{},// The attribute setter publish changes using the DataBinderPubSubset: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 };// Subscribe to PubSubbin