Comment implémenter une liaison de données bidirectionnelle à l'aide de vue, angulaire et réaction

Cet article présente principalement une brève analyse des principes de liaison bidirectionnelle des données vue, angulaires et de réaction. L'éditeur pense que c'est assez bon. Maintenant, je vais le partager avec vous et le donner comme référence. Suivons l'éditeur pour jeter un œil

Approche traditionnelle

État de la maintenance frontale, fonctionnement manuel de la vue de mise à jour du DOM. Le framework frontal restitue les données du serveur via des modèles. Lorsque l'utilisateur effectue une action, nous mettons à jour manuellement le DOM via document.getElementBy...
Le framework permet de séparer les données et les vues. Les mises à jour de statut ultérieures nécessitent une manipulation manuelle du DOM, car le framework ne s'affiche que pour la première fois et ne suit pas les modifications de surveillance du statut.

Liaison de données bidirectionnelle

Lorsque nous adoptons le modèle MV* dans le développement front-end, M - le modèle fait référence au modèle, c'est-à-dire les données, V - La vue fait référence à la vue, qui est la partie de la page affichée. Habituellement, nous devons écrire du code pour « restituer » les données obtenues du serveur et les afficher sur la vue. Chaque fois que les données changent, nous effectuons un nouveau rendu pour mettre à jour la vue afin qu'elle soit cohérente avec les données.

La page produira également des changements de statut et de données grâce à l'interaction de l'utilisateur. À ce stade, nous écrivons du code pour synchroniser la mise à jour des données de la vue avec les données, de sorte que. Synchronisez avec le serveur backend. Autrement dit,

Différents frameworks MV* front-end ont différentes méthodes de traitement pour la synchronisation des données entre le modèle et la vue. Dans Backbone, lors du transfert de données du modèle vers la vue, vous pouvez écouter l'événement de modification du modèle dans la vue. Chaque fois que le modèle est mis à jour, le rendu est réexécuté dans la vue. Le transfert de données de la vue au modèle peut surveiller divers événements des éléments DOM correspondant à la vue. Après avoir détecté des changements dans l'état de la vue, les données modifiées sont envoyées au modèle (via des événements d'écoute des deux côtés). Par rapport à Backbone, le framework MVVM représenté par AngularJS va encore plus loin et prend en charge ce mécanisme de synchronisation des données depuis le niveau du framework, et il s'agit d'une liaison de données bidirectionnelle :

dans différent Dans le cadre MVVM, les techniques d'implémentation de la liaison de données bidirectionnelle sont différentes.

AngularJS adopte la méthode de « détection de valeurs sales ». Après les modifications des données, il détectera la relation de liaison entre toutes les données et les vues pour identifier si des données ont été modifiées et pourront être traitées ultérieurement. . Provoque des modifications d'autres données, ce processus peut donc effectuer plusieurs cycles jusqu'à ce qu'aucune modification de données ne se produise, puis les données modifiées sont envoyées à la vue et la page est mise à jour. Si vous modifiez manuellement les données du ViewModel, vous devez déclencher manuellement une « détection de valeur sale » pour garantir que les modifications sont synchronisées avec la vue.

VueJS utilise la méthode Object.defineProperty() fournie par ES5 pour surveiller les opérations sur les données, déclenchant ainsi automatiquement la synchronisation des données. De plus, puisque la synchronisation est déclenchée sur différentes données, les modifications peuvent être envoyées avec précision à la vue liée au lieu d'effectuer un test sur toutes les données.

La liaison de données bidirectionnelle Vue implémente

la liaison et la synchronisation des données et des vues, qui se reflètent finalement dans le processus de lecture et d'écriture des données, c'est-à-dire l'objet .defineProperty () dans l'ensemble de données et obtenez les fonctions définies. La fonction dans Vue est DefineReactive. Dans la version simplifiée de l'implémentation, je n'ai retenu que quelques fonctionnalités de base :

  function defineReactive(obj, key, value){
    var dep = new Dep();
    Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get: function reactGetter(){
        if(Dep.target){
          dep.depend();
        }
        return value;
      },
      set: function reactSetter(newVal){
        if (value === newVal) {
          return;
        } else {
          value = newVal;
          //如果数据发生改变，则通知所有的 watcher（借助 dep.notify()）
          dep.notify();
        }
      }
    })
  }

Lors de la lecture des données, s'il y a actuellement un Watcher (un observateur des données, The watcher). sera responsable de l'envoi des nouvelles données obtenues à la vue), puis de lier le Watcher aux données actuelles (dep.depend(), dep associe les données actuelles à toutes les dépendances du watcher), ce qui est un moyen de vérifier et d'enregistrer le processus de dépendances . Lors de l'attribution des données, si les données changent, tous les observateurs seront avertis (avec dep.notify()). De cette façon, même si nous modifions les données manuellement, le framework peut automatiquement synchroniser les données avec la vue.

Processus d'identification de la relation de liaison des données

Dans Vue et AngularJS, la relation de liaison entre les éléments de la vue et les données se fait en ajoutant des instructions dans la déclaration HTML

.

  <form id="test">
    <input type="text" v-model="name">
  </form>

Le code HTML ci-dessus indique que l'élément d'entrée est lié aux données de nom. Vous pouvez l'initialiser comme ceci dans le code JS :

  var vm = new Vue({
   el: '#test',
   data: {
    name: 'sysuzhyupeng'
   }
  })

Une fois le code exécuté correctement, la position correspondant à l'élément d'entrée sur la page affichera la valeur initiale donnée dans le code ci-dessus : sysuzhyupeng.

Après avoir exécuté vm.name = 'zhyupeng', l'entrée sur la page sera également mise à jour pour afficher : zhyupeng. Modifiez le contenu de la zone de texte de la page en : yupeng, puis la valeur obtenue via vm.name est : 'yupeng'

Liaison de données React

React utilise cette méthode , pensez à la mise à jour de l'arborescence DOM virtuelle :

1. Mise à jour des attributs, le composant la gère tout seul

2. Mise à jour de la structure, restituez le sous-arbre (DOM virtuel), recherchez les étapes de modification minimales, emballez les opérations DOM et corrigez la véritable arborescence DOM

Du seul point de vue de la liaison de données, le DOM virtuel React n'a pas de liaison de données, car setState() ne maintient pas l'état précédent (l'état est ignoré) et il n'y a pas de liaison

Du point de vue du mécanisme de mise à jour des données , Réagir Semblable à la manière de fournir un modèle de données (doit être mis à jour via l'état)

S'il n'y a pas de liaison de données bidirectionnelle, comment implémenter le scénario d'entrée bidirectionnel ? Grâce à l'API fournie par le framework, la notification manuelle des modifications de données est très similaire à la manière de fonctionner du DOM

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Comment implémenter la coordonnée croisée suivant l'effet de la souris dans JS

Comment utiliser la fenêtre EasyUI dans jQuery

Comment utiliser le plug-in de date laydate.js dans Angular4.0

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!