切图崽的自我教养－[MVVM] 怎样监听数据变化

2024年3月19日 82次阅读 来源: 大切图崽

数据监听

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框架，就是封装并优化了这一个步骤.

    原文作者：大切图崽
    原文地址: https://segmentfault.com/a/1190000007288195
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞