Maison > interface Web > js tutoriel > Implémentation de la simulation basée sur les données Vue 2

Implémentation de la simulation basée sur les données Vue 2

高洛峰
Libérer: 2017-01-12 13:48:46
original
1345 Les gens l'ont consulté

1. Préface

À la fin de l'essai "Simulated Vue Data Driver 1", nous avons parlé de que se passe-t-il si la propriété surveillée est un objet ? Ne serait-il alors pas possible de surveiller d’autres propriétés dans cet objet ?

est le suivant :

Implémentation de la simulation basée sur les données Vue 2

Si les attributs de nom et d'âge de l'utilisateur changent, comment savez-vous qu'ils ont changé ?

Aujourd’hui, résolvons ce problème.

En lisant le code source de Vue, j'ai découvert qu'il utilise le constructeur Observer pour créer un objet Observer pour chaque objet afin de surveiller les données. Si l'attribut dans les données est un objet, alors il est surveillé via le. Observateur.

En fait, l'idée de base est la traversée pré-commandée de l'arbre (pour les arbres, veuillez vous référer à ici). Si nous représentons graphiquement les données dans la démo ci-dessus, cela deviendra plus clair, comme suit :

Implémentation de la simulation basée sur les données Vue 2

D'accord, maintenant que nous avons clarifié l'idée générale, faisons-le ensemble Créer un Observateur.

2. Structure de l'Observateur

La structure globale de l'Observateur est la suivante :

function Observer(data){
 //如若this不是Observer对象,即创建一个
 if(!(this instanceof Observer)){
 return new Observer(data);
 }
 this.data = data;
 this.walk(data);
}
 
let p = Observer.prototype = Object.create(null);
 
p.walk = function(data){
 /*
 TODO:监听data数据中的所有属性,
 并查看data中属性值是否为对象,
 若为对象,就创建一个Observer实例
 */
}
 
p.convert = function(key, val){
 //TODO:通过Object.defineProperty监听数据
}
Copier après la connexion

D'accord, terminons la promenade et méthode de conversion.

-walk-

Tout d'abord, nous implémentons la surveillance de tous les attributs de l'objet de données dans la méthode walk, comme suit :

p.walk = function(data){
 let keys = Object.keys(data);
 keys.forEach( key => {
 let val = data[key];
 this.convert(key, val);
 });
}
Copier après la connexion

et , puisque l'attribut peut être un objet, nous devons alors les surveiller.

Que dois-je faire ?

S'il s'agit d'un objet, utilisez à nouveau le constructeur Observer pour le traiter.

est le suivant :

p.walk = function(data){
 let keys = Object.keys(data);
 keys.forEach( key => {
 let val = data[key];
 //如果val为对象,则交给Observer处理
 if(typeof val === 'object'){
  Observer(val);
 }
 this.convert(key, val);
 });
}
Copier après la connexion

Vous vous posez peut-être cette question, si vous utilisez directement Observer pour traiter des objets, ne perdrez-vous pas la connexion avec le parent objet?

Cependant, ce n'est pas le cas, car JavaScript pointe vers la relation d'adresse pour les objets, alors comment peut-il perdre l'association.

-convert-

Pour la méthode de conversion, c'est relativement simple. Comme toujours, utilisez Object.defineProperty pour surveiller les données, comme suit :

p.convert = function(key, val){
 Object.defineProperty(this.data, key, {
 get: ()=>{
  console.log('访问了'+key+' 值为'+val);
  return val;
 },
 set: (newVal)=>{
  console.log('设置了'+key+' 值为'+newVal);
  if(newVal !== val){
  val = newVal;
  }
 }
 });
}
Copier après la connexion

D'accord, maintenant, un simple Observer a été construit. Testons maintenant si chaque attribut a été surveillé avec succès.

<script src="./observer.js"></script>
<script>
 let data = {
 user: {
  name: &#39;Monkey&#39;,
  age: 24
 },
 lover: {
  name: &#39;Dorie&#39;,
  age: 23
 }
 };
 Observer(data);
</script>
Copier après la connexion

L'effet est le suivant :

Implémentation de la simulation basée sur les données Vue 2

Ce qui précède est tout le contenu de cet article, j'espère que ce sera le cas. sera utile à l'étude de chacun. J'espère que tout le monde soutiendra le site Web PHP chinois.

Pour plus d'articles sur la mise en œuvre de la simulation basée sur les données Vue 2, veuillez faire attention au site Web PHP chinois !

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal