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

lifefriend_007 發布于2019-08-01 15:54 / 2720人閱讀

摘要：數據監聽模式的核心就是數據變化驅動視圖更新，其中關鍵的一點就是，我們如何能知道數據發生了變化發布訂閱模型通過事件的發布監聽的模式來實現數據監聽即數據變化后，發布者會觸發自定義的某個事件比如，然后訂閱者捕獲到這個事件后，實現后續處理值判斷視圖

數據監聽

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方法來完成數據變化－>視圖更新的邏輯

     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框架，就是封裝并優化了這一個步驟.

GPU云服務器云服務器切圖崽 js 監聽數據變化監聽參數變化圖像識別數學修養

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50189.html

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

摘要：數據監聽模式的核心就是數據變化驅動視圖更新，其中關鍵的一點就是，我們如何能知道數據發生了變化發布訂閱模型通過事件的發布監聽的模式來實現數據監聽即數據變化后，發布者會觸發自定義的某個事件比如，然后訂閱者捕獲到這個事件后，實現后續處理值判斷視圖數據監聽 vm模式的核心就是數據變化驅動視圖更新，其中關鍵的一點就是，我們如何能知道數據發生了變化? 發布－訂閱模型通過事件的發布/監聽的模式來...

malakashi 2019-08-22 10:42 評論0 收藏0
切圖崽的自我修養－[MVVM] 進一步認知viewModel

摘要：前言上一篇講到了但其實一直還對中的部分存在一些理解問題敲了一遍的之后，加深了對的理解例子現在需求如下，有一個按鈕，點擊之后，發送請求，并將接收到的結果更新到中傳統寫法在上綁定點擊事件一旦捕獲到點擊事件，向后臺發送一條請求得到后臺返回的數據操前言上一篇講到了MVC/MVP/MVVM, 但其實一直還對MVVM中的VM部分存在一些理解問題, 敲了一遍vue的demo之后，加深了對VM的理...

yuanzhanghu 2019-08-29 11:26 評論0 收藏0
切圖崽的自我修養－[MVVM] 進一步認知viewModel

摘要：前言上一篇講到了但其實一直還對中的部分存在一些理解問題敲了一遍的之后，加深了對的理解例子現在需求如下，有一個按鈕，點擊之后，發送請求，并將接收到的結果更新到中傳統寫法在上綁定點擊事件一旦捕獲到點擊事件，向后臺發送一條請求得到后臺返回的數據操前言上一篇講到了MVC/MVP/MVVM, 但其實一直還對MVVM中的VM部分存在一些理解問題, 敲了一遍vue的demo之后，加深了對VM的理...

iKcamp 2019-08-20 11:37 評論0 收藏0