快捷導(dǎo)航

實現(xiàn)非常簡單的js雙向數(shù)據(jù)綁定

更新時間：2015年11月06日 15:23:04 投稿：mrr

Angular實現(xiàn)了雙向綁定機制。所謂的雙向綁定，無非是從界面的操作能實時反映到數(shù)據(jù)，數(shù)據(jù)的變更能實時展現(xiàn)到界面。本文給大家詳細(xì)介紹js雙向數(shù)據(jù)綁定，感興趣的朋友參考下

雙向數(shù)據(jù)綁定指的就是，綁定對象屬性的改變到用戶界面的變化的能力，反之亦然。換種說法，如果我們有一個user對象和一個name屬性，一旦我們賦了一個新值給user.name,在UI上就會顯示新的姓名了。同樣地，如果UI包含了一個輸入用戶姓名的輸入框，輸入一個新值就應(yīng)該會使user對象的name屬性做出相應(yīng)的改變。

很多熱門的JS框架客戶端如Ember.js，Angular.js 或者KnockoutJS ，都在最新特性上刊登了雙向數(shù)據(jù)綁定。這并不意味著從零實現(xiàn)它很難，也不是說需要這些功能的時候，采用這些框架是唯一的選擇。下面的想法實際上很基礎(chǔ)，可以被認(rèn)為是3步走計劃：

我們需要一個UI元素和屬性相互綁定的方法
我們需要監(jiān)視屬性和UI元素的變化
我們需要讓所有綁定的對象和元素都能感知到變化

還是有很多方法能夠?qū)崿F(xiàn)上面的想法，有一個簡單有效的方法就是使用PubSub模式。這個思路很簡單：我們使用數(shù)據(jù)特性來為HTML代碼進行綁定，所有被綁定在一起的JavaScript對象和DOM元素都會訂閱一個PubSub對象。只要JavaScript對象或者一個HTML輸入元素監(jiān)聽到數(shù)據(jù)的變化時，就會觸發(fā)綁定到PubSub對象上的事件，從而其他綁定的對象和元素都會做出相應(yīng)的變化。

用jQuery做一個簡單的實現(xiàn)

對于DOM事件的訂閱和發(fā)布，用jQuery實現(xiàn)起來是非常簡單的，接下來我們就是用Jquery比如下面：

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-<object_id>="<property_name>"
 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;
}

對于上面這個實現(xiàn)來說，下面是一個User模型的最簡單的實現(xiàn)方法：

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", function( evt, attr_name, new_val, initiator ) {
 if ( initiator !== user ) {
  user.set( attr_name, new_val );
 }
 });
 return user;
}

現(xiàn)在我們?nèi)绻胍獙ser模型屬性綁定到UI上，我們只需要將適合的數(shù)據(jù)特性綁定到對應(yīng)的HTML元素上。

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

這樣輸入值會自動映射到user對象的name屬性，反之

亦然。到此這個簡單實現(xiàn)就完成啦！

不需要jQuery的實現(xiàn)

在如今的大多數(shù)項目里，可能已經(jīng)使用了jQuery，因此上面的例子完全可以接受。不過，如果我們需要試著向另一個極端做，并且還刪除對jQuery的依賴，那么怎么做呢？好，證實一下這么做并不難（尤其是在我們限制只支持IE 8及以上版本的情況下）。最終，我們必須使用一般的javascript實現(xiàn)一個定制的PubSub并且保留了DOM事件:

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, prop_name, 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, function( evt, prop_name, 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;
}

除了設(shè)置器里調(diào)用 jQuery的trigger方法外，模型可以保持一樣。調(diào)用trigger方法將替代為調(diào)用我們定制的具有不同特征的PubSub的publish方法：

// 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", attr_name, val, this );
 }
 }
 // ...
}

我們又一次通過一百行不到，又可維護的純javascript完成了我們想要的結(jié)果。

以上內(nèi)容就是關(guān)于js雙向數(shù)據(jù)綁定的相關(guān)教程，希望對大家學(xué)習(xí)有所幫助。

您可能感興趣的文章: