Forschung zum Prinzip der bidirektionalen Datenbindung in Vue

Die Idee der bidirektionalen Bindung

Die Idee der bidirektionalen Datenbindung ist die Synchronisierung der Datenschicht und der UI-Schicht. Wenn sich eine der beiden ändert, ändern sich die Daten werden synchron zum anderen aktualisiert.

Einige Methoden der bidirektionalen Bindung

Derzeit gibt es ungefähr drei Möglichkeiten, die bidirektionale Datenbindung im Frontend zu implementieren:

1 ( backbone.js)

Idee: Benutzerdefinierte Datenattribute verwenden, um die Bindung im HTML-Code anzugeben. Alle gebundenen JavaScript-Objekte und DOM-Elemente werden bei einem Publisher-Objekt „abonniert“. Jedes Mal, wenn festgestellt wird, dass sich ein JavaScript-Objekt oder ein HTML-Eingabefeld geändert hat, delegieren wir das Ereignis an das Publisher-Subscriber-Muster, das wiederum die Änderung sendet und an alle gebundenen Objekte und Elemente weitergibt.

2. Korruptionswerterkennung (angular.js)

Idee: Datenänderungen durch Abfragen erkennen. Erst wenn ein bestimmtes Ereignis ausgelöst wird, kommt die Diebstahlerkennung zum Einsatz.

ist ungefähr wie folgt:

• DOM-Ereignisse, wie z. B. die Eingabe von Text durch den Benutzer, das Klicken auf Schaltflächen usw. (ng-click)

• XHR-Antwortereignis ($http)

• Browser-Standortänderungsereignis ($location)

• Timer-Ereignis ($timeout, $interval )

• Führen Sie $digest() oder $apply() aus

3. Datenhijacking (vue.js)

Idee: Verwenden Sie Object.defineProperty, um Eigenschaften zu Datenobjekten zuzuordnen Die Überwachung von Get und Set ruft die Anweisungen des Knotens auf, wenn Datenlese- und Zuweisungsvorgänge stattfinden, sodass die häufigste = Gleichheitszeichenzuweisung ausgelöst werden kann.

Wue bidirektionale Datenbindung, kleine Demo-Idee

① Erstellen Sie ein Wue-Objekt, definieren Sie die Attribute el und Daten des Objekts, übergeben Sie die entsprechenden Daten beim Erstellen des Objekts und führen Sie die Initialisierung aus ()-Methode.

var Wue=function(params){
 this.el=document.querySelector(params.el);
 this.data=params.data;
 this.init();
};

② Die Methoden bindText und bindModel werden in der Init-Methode ausgeführt. Diese beiden Methoden dienen zum Parsen des an das W-Modell gebundenen HTML- und W-Text-Befehls im Dom und machen Sie Handle entsprechend.

init:function(){
  this.bindText();
  this.bindModel();
 }

③ bindText-Methode, fügen Sie die Elemente mit der W-Text-Anweisung in ein Array ein, z. B.: w-text='demo', und legen Sie dann den Wert von innerHTML fest ist gleich den übergebenen Daten[Demo].

bindText:function(){
  var textDOMs=this.el.querySelectorAll('[w-text]'),
  bindText;
  for(var i=0;i<textDOMs.length;i++){
  bindText=textDOMs[i].getAttribute(&#39;w-text&#39;);
  textDOMs[i].innerHTML=this.data[bindText];
  }
 }

④ bindModel-Methode, Elemente mit W-Modell-Anweisungen (im Allgemeinen formbezogene Elemente) in ein Array einfügen, z. B.: w-model='demo', binden keyup-Ereignis für jedes Element (kompatibel mit Browser-Schreiben).

bindModel:function(){
 var modelDOMs=this.el.querySelectorAll('[w-model]'),
 bindModel;
 var _that=this;
 for(var i=0;i<modelDOMs.length;i++){
 bindModel=modelDOMs[i].getAttribute(&#39;w-model&#39;);
 modelDOMs[i].value=this.data[bindModel]||&#39;&#39;;
 //数据劫持
 this.defineObj(this.data,bindModel);
 if(document.addEventListener){
 modelDOMs[i].addEventListener(&#39;keyup&#39;,function(event) {
  console.log(&#39;test&#39;);
  e=event||window.event;
  _that.data[bindModel]=e.target.value;
 },false);
 }else{
 modelDOMs[i].attachEvent(&#39;onkeyup&#39;,function(event){
  e=event||window.event;
  _that.data[bindModel]=e.target.value;
 },false);
 }
 }
}

⑤ Verwenden Sie Object.defineProperty, um die Set- und Get-Methoden zu definieren, und rufen Sie die bindText-Methode in der Set-Methode auf. Dies wird verwendet, sobald der Wert von W-Model in der Eingabe geändert wird. Die Set-Methode wird automatisch ausgeführt, sodass in dieser Methode nur die Methode zum Aktualisieren von W-Text aufgerufen werden kann.

defineObj:function(obj,prop,value){
  var val=value||'';
  var _that=this;
  try{
  Object.defineProperty(obj,prop,{
  get:function(){
  return val;
  },
  set:function(newVal){
  val=newVal;
  _that.bindText();
  }
  })
  
  }catch (err){
  console.log('Browser not support!')
  }
 }

⑥Verwenden

html:<br><h3>双向数据绑定demo</h3>
<div id="wrap">
 <input type="text" w-model=&#39;demo&#39;>
 <h5 w-text=&#39;demo&#39;></h5>
</div><br>js:
 <script src=&#39;../js/wue.js&#39;></script>
 <script>
 new Wue({
 el:&#39;#wrap&#39;,
 data:{
  demo:&#39;winty&#39;
 }
 })
 </script>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels jedem beim Lernen helfen kann Gleichzeitig hoffe ich, die chinesische PHP-Website zu unterstützen!

Weitere verwandte Artikel zu den Prinzipien der bidirektionalen Datenbindung von Vue finden Sie auf der chinesischen PHP-Website!