摘要：許多流行的框架，像或者都會把雙向數(shù)據(jù)綁定作為其中的主要特性來宣傳。盡管有好多種方式去實(shí)現(xiàn)這幾點(diǎn)，一種簡單高效的方法是我們通過發(fā)布訂閱者模式來實(shí)現(xiàn)。方法很簡單我們可以使用定制的屬性作為代碼中需要綁定的屬性。

原文：Easy Two-Way Data Binding in Javascript

雙向數(shù)據(jù)綁定指的是當(dāng)對象的屬性發(fā)生變化時(shí)能夠同時(shí)改變對應(yīng)的UI，反之亦然。換句話說，如果我們有一個user對象，這個對象有一個name屬性，無論何時(shí)你對user.name設(shè)置了一個新值，UI也會展示這個新的值。同樣的，如果UI包含一個用于數(shù)據(jù)用戶名字的輸入框，輸入一個新值也會導(dǎo)致user對象的name屬性發(fā)生相應(yīng)的改變。

許多流行的javascript框架，像Ember.js,Angular.js或者KnockoutJS都會把雙向數(shù)據(jù)綁定作為其中的主要特性來宣傳。這并不意味著從頭開始實(shí)現(xiàn)它很難，也不意味著當(dāng)我們需要這種功能的時(shí)候，使用這些框架是我們唯一的選擇。內(nèi)部的潛在思想事實(shí)上是相當(dāng)基礎(chǔ)的，實(shí)現(xiàn)它可以歸納為以下三點(diǎn)：

我們需要一種方式確定哪個UI元素綁定在哪個屬性上。

我們需要監(jiān)控屬性和UI的變化

我們需要把所有綁定的對象和UI元素的變化傳播出去。

盡管有好多種方式去實(shí)現(xiàn)這幾點(diǎn)，一種簡單高效的方法是我們通過發(fā)布訂閱者模式來實(shí)現(xiàn)。方法很簡單：我們可以使用定制的data屬性作為HTML代碼中需要綁定的屬性。所有的綁定在一起的Javascript對象和DOM元素將會訂閱這個發(fā)布訂閱對象。任何時(shí)候我們檢測到無論是Javascript對象亦或是HTML的input元素的變化，我們都是把事件代理傳遞給發(fā)布訂閱對象，然后通過它把所有發(fā)生在綁定的對象和元素的的變化傳遞和廣播出去。

通過jQuery實(shí)現(xiàn)我們上面討論的東西是相當(dāng)簡單明了的，因?yàn)樽鳛橐粋€流行的庫，它讓我們很簡單的實(shí)現(xiàn)訂閱和發(fā)布DOM事件，同時(shí)我們也可以定制一個：

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-=""
    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數(shù)據(jù)模型實(shí)現(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 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)在，無論何時(shí)我們想要綁定一個對象的屬性到UI上，我們只要在對應(yīng)的HTML元素上設(shè)置合適的data屬性。

// javascript 
var user=new User(123);
user.set("name","Wolfgang");

// html

input輸入框上值得變化會自動的映射到user的name屬性，反之亦然。大功告成！

現(xiàn)在的大部分項(xiàng)目一般jQuery都已經(jīng)在使用啦，所以上面的例子是完全可以接受的。但是如果我們需要完全不依賴jQuery，那么該怎么實(shí)現(xiàn)呢？好吧，事實(shí)上其實(shí)也不難辦到（特別是當(dāng)我們把對IE的支持只提供IE8以上的支持）。最后，我們只是要通過發(fā)布訂閱者模式來觀察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;
}

數(shù)據(jù)模型可以保持不變，除了在setter中對jQuery中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 );
    }
  }

  // ...
}

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