輕鬆實作javascript資料雙向綁定_javascript技巧-js教程-PHP中文網

輕鬆實作javascript資料雙向綁定_javascript技巧

WBOY

發布： 2016-05-16 15:32:41

原創

1367 人瀏覽過

雙向資料綁定指的是當物件的屬性發生變化時能夠同時改變對應的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事件，同時我們也可以定制一個：

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 chagne events on elements with data-binding attribute and proxy
  // then to the PubSub, so that the change is "broadcasted" to all connected objects
  jQuery(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 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("")){
        $bound.val(new_val);
      }else{
        $bound.html(new_val);
      }
    });
  });
  return pubSub;
}

登入後複製

至於javascript對象，以下是最小化的user資料模型實現的例子：

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 PubSub
  binder.on(uid+":change",function(evt,attr_name,new_val,initiator){
    if(initiator!==user){
      user.set(attr_name,new_val);
    }
  });

  return user;
}

登入後複製

現在，無論何時我們想要綁定一個物件的屬性到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，那該怎麼實作呢？好吧，事實上其實也不難辦到（特別是當我們把對IE的支援只提供IE8以上的支援）。最後，我們只是要透過發布訂閱者模式來觀察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 = 0, 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, // IE8 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 {
  // IE8 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 = 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;
}

登入後複製

資料模型可以保持不變，除了在setter中對jQuery中trigger方法的調用，我們可以透過我們在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完成了我們想要的結果，希望對大家實現javascript數據雙向綁定有所幫助。