Analyser le principe de liaison bidirectionnelle des données d'observateur dans Vue (partage de code)

• 🎜Modèle éditeur-abonné (backbone.js</code >)🎜 </li><li>🎜Vérification des valeurs sales (<code>angular.js)🎜
• 🎜Détournement de données (vue.js)🎜

• 🎜objL'objet cible qui doit être utilisé🎜
• 🎜prop< /code >Le nom de l'attribut qui doit être défini ou modifié sur l'objet cible. 🎜</li><li>🎜<code>descripteurLe descripteur de l'attribut à définir ou à modifier🎜

<strong>descripteur</strong>

• 🎜configurable si et seulement si l'attribut est configurable Lorsqu'il est true, le descripteur d'attribut peut être modifié, et l'attribut peut également être supprimé de l'objet correspondant. La valeur par défaut est false. 🎜
• 🎜enumerableCet attribut peut apparaître dans l'objet si et seulement si le enumerable de l'attribut est true dans l'énumération propriétés. La valeur par défaut est false. Le descripteur de données a également les valeurs clés facultatives suivantes : 🎜
• 🎜valueLa valeur correspondant à cet attribut. Peut être n'importe quelle valeur JavaScript valide (numéro, objet, fonction, etc.). La valeur par défaut est non défini. 🎜
• 🎜writableSi et seulement si le writable de l'attribut est true, l'attribut peut se voir attribuer l'opérateur Change. La valeur par défaut est false. Le descripteur d'accès a également les valeurs clés facultatives suivantes : 🎜
• 🎜getUne méthode qui fournit un getter pour la propriété, s'il n'y a pas de < code>getter est non défini. La valeur de retour de cette méthode est utilisée comme valeur d'attribut. La valeur par défaut est non défini. 🎜
• 🎜set est une méthode qui fournit setter pour la propriété. S'il n'y a pas de setter, elle sera non définie</code. >. Cette méthode acceptera un paramètre unique et attribuera la nouvelle valeur du paramètre à la propriété. La valeur par défaut est <code>non défini. 🎜

//Dep
function Dep() {
  this.subs = [];
}
Dep.prototype = {
  addSub: function (sub) {
    this.subs.push(sub);
  },
  notify: function () {
    this.subs.forEach(function (sub) {
      sub.update();
    });
  },
};

function defineReactive(data, key, val) {

  var dep = new Dep()
  observe(val); //监听子属性
  Object.defineProperty(data, key, {
    set: function(value) {
      dep.notify() //发出通知, 我被改变了
    }
  });

}

最后实现一个订阅者Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图

大概的流程图如下:

实现Observer

将需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化

// observe
function observe(data) {
  if (data && typeof data === "object") {
    // 取出所有属性遍历
    Object.keys(data).forEach(function (key) {
      defineReactive(data, key, data[key]);
    });
  }
  return;
}

function defineReactive(data, key, val) {
  observe(val); // 监听子属性
  Object.defineProperty(data, key, {
    enumerable: true, // 可枚举
    configurable: false, // 不能再define
    get: function () {
      return val;
    },
    set: function (value) {
      console.log("监听到值变化了: ", val, "==>", value);
      val = value;
    },
  });
}
var A = {
  fristName: "chuchur",
  age: 29,
};
observe(A);

A.fristName = "nana"; //监听到值变化了:  chuchur ==> nana
A.age = 30; //监听到值变化了:  29 ==> 30

这样就实现了多个属性的监听，接下来就是实现订阅器Dep，当这些属性变化的时候，触发通知notify，告诉执行订阅者执行更新函数

//Dep
function Dep() {
  this.subs = [];
}
Dep.prototype = {
  addSub: function (sub) {
    this.subs.push(sub);
  },
  notify: function () {
    this.subs.forEach(function (sub) {
      sub.update();
    });
  },
};

把订阅器植入到监听器里

function defineReactive(data, key, val) {

  var dep = new Dep()
  observe(val); //监听子属性
  Object.defineProperty(data, key, {
    set: function(value) {
      dep.notify() //发出通知, 我被改变了
    }
  });

}

至此，简陋的监听器就实现完成了，接下来继续完成Watcher。