iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 5
0
Modern Web

我或許沒那麼懂 Web系列 第 5

JS Object.defineProperty(): (4) 資料繫結

要在前端上實作簡易的資料繫結(資料綁定、Data Binfing),其實就只要透過 Object.defineProperty()get()set() 方法的設計。簡單來說,就是用 get() 取得網頁某個元素的資訊,然後用 set() 去更改他的資料。用個簡易的程式碼為例:

<div>
  <p>hello, <span id="targetName">world</span></p>
</div>

<script>
  'use strict'

  let data = {}

  Object.defineProperty(data, 'name', {
    get: function(){
        return document.getElementById('targetName').innerHTML;
    },
    set: function(value){
        document.getElementById('targetName').innerHTML = value
    }
  })

  console.log(data.name)
  data.name = 'ironman'
  console.log(data.name)

  // Console output:
  //   world
  //   ironman
</script>

這段程式碼最後會在頁面上顯示 hello, ironman 的文字。

這只是一個比較簡單的範例,在實際處理上可能會再有更多分層,而不是向本範例一樣直接修改 DOM。比如說資料可能就存在某個資料物件,get() 統一透過該物件去查詢,然後 set() 就是更新該資料物件,在去呼叫其他分層去統一更新介面的渲染之類的。一樣寫個簡單的程式碼為範例:

<div>
  <p>hello, <span id="targetName">world</span></p>
</div>

<script>
  'use strict'

  let _data = {}
  let data = {}

  Object.defineProperty(data, 'name', {
    get: function(){
        return _data.name
    },
    set: function(value){
      _data.name = value
      callSomethingToUpdateRender()
    }
  })

  data.name = 'ironman'
</script>

至於 Vue.js 實際上是怎麼實作的,明天我們再探討看看實際的原始碼吧。


上一篇
JS Object.defineProperty(): (3) value V.S. getter & setter
下一篇
JS Object.defineProperty(): (5) 相關方法
系列文
我或許沒那麼懂 Web31

尚未有邦友留言

立即登入留言