切圖崽的自我修養－[MVVM] 如何監聽數據變化

數據監聽

vm模式的核心就是數據變化驅動視圖更新，其中關鍵的一點就是，咱們如何能知道數據發生了變化?

發佈－訂閱模型

經過事件的發佈/監聽的模式來實現數據監聽. 即數據變化後，發佈者會觸發自定義的某個事件好比valueChage，而後訂閱者捕獲到這個事件後，實現後續處理(值判斷/視圖更新/其餘自定義邏輯). 這其實就是最簡單的事件處理的機制

待補充

---

GET/SET

監測數據的變化還有一種簡單且較爲完美的實現，而且目前十分火熱的Vm框架Vue也是應用了這種方式.那就是Es5中對對象的新增的擴展方法Object.defineProperty(). 它帶來了無數可能性.經過對對象的屬性設置改方法，咱們也能輕易的實現數據變化後的邏輯處理.

先來簡單看一看Object.defineProperty()的簡單使用

Object.defineProperty(obj, prop, descriptor)

var obj = {};
  Object.defineProperty(obj, "name", {
    enumerable: true,
    configurable: true,
    get: function () {
      console.log('get#');
      return name;
    },
    set: function (newValue) {
      console.log('set#');
      name = newValue + "~~~";
    }
  });


  obj.name = 'Xie' // set#
  console.log(obj.name); //get# Xie~~~
  obj.name = 'Min' // set#
  console.log(obj.name); //get# Min~~~

參數介紹:

• value:屬性的值

• writable:若是爲false，屬性的值就不能被重寫

• get: 一旦目標屬性被訪問就會調回此方法，並將此方法的運算結果返回用戶

• set:一旦目標屬性被賦值，就會調用此方法

• configurable:若是爲false，則任未嘗試刪除目標屬性或修改屬性如下特性（writable, configurable, enumerable）的行爲將被無效化

• enumerable:是否能在for...in循環中遍歷出來或在Object.keys中列舉出來

P.s writeble/value不能和get/set共存，由於object不容許有兩種訪問機制存在.

實現數據驅動

正是由於get/set這種特性，咱們就能經過設置set方法來完成數據變化－>視圖更新的邏輯

<input id='input'>
    <p id="output"></p>

var obj = {};
     $('#input').on('input',function(){
         obj.data = $(this).val();
     });

     Object.defineProperty(obj, "data", {
         enumerable: true,
         configurable: true,
         get: function () {
           return data;
         },
         set: function (newData) {              
           data = newData;
           $('#output').text(data); 
         }
       });

數據變化驅動視圖更新是MVVM模式中VM的核心邏輯，這種模式下的任什麼時候候，咱們都不該該直接以操縱DOM節點的方式來改變視圖， 而是必須經過改變數據狀態的方式，驅動數據狀態變化來改變視圖(具體方式上面已經提到了，捕獲valueChage事件/SET等) Angular/Vue/Avalone/等等之類的MVVM框架，就是封裝並優化了這一個步驟.