原生js雙向數據綁定

前面咱們介紹過存儲器屬性(從新認識javascript對象（一）——對象及其屬性)，以及如何用Object.defineProperty()定義一個存儲器屬性，今天咱們介紹如何用Object.defineProperty()實現雙向數據綁定。

咱們知道一個存儲器屬性有四個屬性描述符：get，set，configurable，enumerable。咱們來複習一下如何建立一個存儲器屬性：

var user = {
    name: ''
}
Object.defineProperty(user, 'nickname', {
    configurable: true,
    enumerable: true,
    get: function() {
        return this.name
    },
    set: function(value) {
        this.name = value
    }
})
複製代碼

以上代碼咱們給user建立了一個名爲nickname的存儲器屬性。

接下來咱們改寫get和set，讓它們與DOM綁定，並實現雙向數據綁定，如下爲具體實現的僞代碼：

<input type="text" id="foo">

<script>
    var user = {}
    Object.defineProperty(user, 'inputValue', {
        configurable: true,
        get: function() {
            return document.getElementById('foo').value
        },
        set: function(value) {
            document.getElementById('foo').value = value
        }
    })
</script>
複製代碼

咱們打開控制檯，改變user.inputValue的值，會發現input輸入框裏的值也發生變化；一樣咱們在input輸入框裏面輸入值，在控制檯打印user.inputValue，會發現user.inputValue也發生了變化。這樣咱們就實現了雙向的數據綁定。

若是多個DOM綁定同一個數據，咱們能夠監聽input輸入框的keyup事件，只要觸發了keyup事件咱們就把user.inputValue的值賦給另外一個DOM，具體實現以下：

<input type="text" id="foo">
<p id="test"></p>

<script>
    var user = {}
    Object.defineProperty(user, 'inputValue', {
        configurable: true,
        get: function() {
            return document.getElementById('foo').value
        },
        set: function(value) {
            document.getElementById('foo').value = value
            document.getElementById('test').innerHTML = value
        }
    })
    document.getElementById('foo').addEventListener('keyup',function() {
        document.getElementById('test').innerHTML = user.inputValue
    })
複製代碼

最後附上源碼圖片

思考：其實實現雙向數據綁定並不必定要用Object.defineProperty()，其主要是運用存儲器屬性的get和set，如下代碼也能夠實現雙向數據綁定：

<input type="text" id="foo">
<p id="test"></p>

<script>
    var user = {
      get inputValue() { 
        return document.getElementById('foo').value
      },
      set inputValue(value) {
        document.getElementById('foo').value = value
        document.getElementById('test').innerHTML = value
      }
    }
    document.getElementById('foo').addEventListener('keyup',function() {
      document.getElementById('test').innerHTML = user.inputValue
    })
</script>
複製代碼