[譯]簡單的用javascript實現的數據雙向綁定

原文：Easy Two-Way Data Binding in Javascript

雙向數據綁定指的是當對象的屬性發生變化時可以同時改變對應的UI，反之亦然。換句話說，若是咱們有一個user對象，這個對象有一個name屬性，不管什麼時候你對user.name設置了一個新值，UI也會展現這個新的值。一樣的，若是UI包含一個用於數據用戶名字的輸入框，輸入一個新值也會致使user對象的name屬性發生相應的改變。

許多流行的javascript框架，像Ember.js,Angular.js或者KnockoutJS都會把雙向數據綁定做爲其中的主要特性來宣傳。這並不意味着從頭開始實現它很難，也不意味着當咱們須要這種功能的時候，使用這些框架是咱們惟一的選擇。內部的潛在思想事實上是至關基礎的，實現它能夠概括爲如下三點：

1. 咱們須要一種方式肯定哪一個UI元素綁定在哪一個屬性上。

2. 咱們須要監控屬性和UI的變化

3. 咱們須要把全部綁定的對象和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完成了咱們想要的結果。