成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

切圖崽的自我修養(yǎng)－[MVVM] 如何監(jiān)聽數(shù)據(jù)變化

malakashi / 759人閱讀

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

數(shù)據(jù)監(jiān)聽 
vm模式的核心就是數(shù)據(jù)變化驅動視圖更新，其中關鍵的一點就是，我們如何能知道數(shù)據(jù)發(fā)生了變化?
發(fā)布－訂閱模型

通過事件的發(fā)布/監(jiān)聽的模式來實現(xiàn)數(shù)據(jù)監(jiān)聽. 即數(shù)據(jù)變化后，發(fā)布者會觸發(fā)自定義的某個事件比如valueChage，然后訂閱者捕獲到這個事件后，實現(xiàn)后續(xù)處理(值判斷/視圖更新/其他自定義邏輯). 這其實就是最簡單的事件處理的機制

待補充

GET/SET

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

先來簡單看一看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~~~

參數(shù)介紹:

value:屬性的值

writable:如果為false，屬性的值就不能被重寫

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

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

configurable:如果為false，則任何嘗試刪除目標屬性或修改屬性以下特性（writable, configurable, enumerable）的行為將被無效化

enumerable:是否能在for...in循環(huán)中遍歷出來或在Object.keys中列舉出來

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

實現(xiàn)數(shù)據(jù)驅動

正是因為get/set這種特性，我們就能通過設置set方法來完成數(shù)據(jù)變化－>視圖更新的邏輯

    
    
     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); 
         }
       });

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

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

轉載請注明本文地址：http://systransis.cn/yun/91096.html

相關文章

  • 切圖崽的自我修養(yǎng)－[MVVM] 如何監(jiān)聽數(shù)據(jù)變化

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

    lifefriend_007 評論0 收藏0

  • 切圖崽的自我修養(yǎng)－[MVVM] 進一步認知viewModel

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

    yuanzhanghu 評論0 收藏0

  • 切圖崽的自我修養(yǎng)－[MVVM] 進一步認知viewModel

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

    iKcamp 評論0 收藏0

發(fā)表評論

0條評論

malakashi

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<