Teilen Sie drei Methoden zur Implementierung der bidirektionalen Datenbindung in JavaScript mit-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

Teilen Sie drei Methoden zur Implementierung der bidirektionalen Datenbindung in JavaScript mit

黄舟

Mar 21, 2017 pm 02:41 PM

In diesem Artikel wird hauptsächlich eine Zusammenfassung der drei Methoden von Javascript vorgestellt, um eine bidirektionale Datenbindung zu erreichen. Die Front-End-Ansichtsschicht und die Datenschicht müssen manchmal eine Zwei-Wege-Datenbindung implementieren. Derzeit gibt es drei Haupttypen der Zwei-Wege-Bindung. Interessierte können sich darüber informieren.

Zwei-Wege-Bindungsmethode für Front-End-Daten

Die Ansichtsschicht und die Datenschicht des Front-Ends müssen manchmal eine bidirektionale Bindung implementieren (Zwei-Wege-Bindung), zum Beispiel MVVM-Framework, datengesteuerte Ansicht, Ansichtszustandsmaschine usw., wir haben mehrere aktuelle gängige bidirektionale Datenbindungs-Frameworks untersucht und zusammengefasst. Derzeit gibt es drei Hauptmethoden zur Implementierung der bidirektionalen Datenbindung:

1. Manuelle Bindung

Die Hauptidee ist die Verwendung des Beobachter-Programmiermodus Definieren Sie Get- und Set-Methoden für das Datenobjekt (natürlich gibt es auch andere Methoden), rufen Sie beim Aufrufen manuell Get- oder Set-Daten auf und starten Sie den Rendervorgang der UI-Ebene, nachdem die Daten hauptsächlich geändert wurden Wird in Szenarien verwendet, in denen die Ansicht Datenänderungen steuert. Wenn sich die UI-Ebene ändert, werden Ereignisse wie Änderung, Tastendruck, Tastendruck und andere Ereignisse des Doms überwacht, um Ereignisse zur Änderung der Daten des Doms auszulösen Datenschicht. Der gesamte Prozess wird durch Funktionsaufrufe abgeschlossen.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>data-binding-method-set</title>
</head>
<body>
  <input q-value="value" type="text" id="input">
  <p q-text="value" id="el"></p>
  <script>
    var elems = [document.getElementById(&#39;el&#39;), document.getElementById(&#39;input&#39;)];

    var data = {
      value: &#39;hello!&#39;
    };

    var command = {
      text: function(str){
        this.innerHTML = str;
      },
      value: function(str){
        this.setAttribute(&#39;value&#39;, str);
      }
    };

    var scan = function(){    
      /**
       * 扫描带指令的节点属性
       */
      for(var i = 0, len = elems.length; i < len; i++){
        var elem = elems[i];
        elem.command = [];
        for(var j = 0, len1 = elem.attributes.length; j < len1; j++){
          var attr = elem.attributes[j];
          if(attr.nodeName.indexOf(&#39;q-&#39;) >= 0){
            /**
             * 调用属性指令，这里可以使用数据改变检测
             */
            command[attr.nodeName.slice(2)].call(elem, data[attr.nodeValue]);
            elem.command.push(attr.nodeName.slice(2));
          }
        }
      }
    }

    /**
     * 设置数据后扫描
     */
    function mvSet(key, value){
      data[key] = value;
      scan();
    }
    /**
     * 数据绑定监听
     */
    elems[1].addEventListener(&#39;keyup&#39;, function(e){
      mvSet(&#39;value&#39;, e.target.value);
    }, false);

    scan();

    /**
     * 改变数据更新视图
     */
    setTimeout(function(){
      mvSet(&#39;value&#39;, &#39;fuck&#39;);
    },1000)

  </script>
</body>
</html>

Nach dem Login kopieren

2. Dirty-Checking-Mechanismus

Dargestellt durch das typische MVVM-Framework

AngularJS

, prüft Angular die Dirty-Daten, um sie betriebsbereit zu machen Aktualisierungen auf der UI-Ebene. Es gibt ein paar Dinge, die Sie über die Dirty-Erkennung von Angular wissen müssen: – Der Dirty-Erkennungsmechanismus verwendet keine geplante Erkennung. - Der Zeitpunkt der Dirty-Erkennung liegt dann, wenn sich die Daten ändern. - Angular kapselt häufig verwendete DOM-Ereignisse, XHR-Ereignisse usw. und löst den Digest-Prozess bei der Eingabe von Angular aus. – Im Digest-Prozess wird der Rootscope durchlaufen und alle Beobachter überprüft. (Für das spezifische Design von Angular können Sie sich andere Dokumente ansehen. Hier besprechen wir nur die Datenbindung.) Schauen wir uns dann an, wie die Dirty-Erkennung durchgeführt wird: Suchen Sie hauptsächlich alle mit den Daten verbundenen Elemente anhand der festgelegten Daten und vergleichen Sie sie dann mit den Daten Änderungen, wenn es sich ändert, führen Sie Befehlsoperationen aus

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>data-binding-drity-check</title>
</head>

<body>
  <input q-event="value" ng-bind="value" type="text" id="input">
  <p q-event="text" ng-bind="value" id="el"></p>
  <script>

  var elems = [document.getElementById(&#39;el&#39;), document.getElementById(&#39;input&#39;)];
  
  var data = {
    value: &#39;hello!&#39;
  };

  var command = {
    text: function(str) {
      this.innerHTML = str;
    },
    value: function(str) {
      this.setAttribute(&#39;value&#39;, str);
    }
  };

  var scan = function(elems) {
    /**
     * 扫描带指令的节点属性
     */
    for (var i = 0, len = elems.length; i < len; i++) {
      var elem = elems[i];
      elem.command = {};
      for (var j = 0, len1 = elem.attributes.length; j < len1; j++) {
        var attr = elem.attributes[j];
        if (attr.nodeName.indexOf(&#39;q-event&#39;) >= 0) {
          /**
           * 调用属性指令
           */
          var dataKey = elem.getAttribute(&#39;ng-bind&#39;) || undefined;
          /**
           * 进行数据初始化
           */
          command[attr.nodeValue].call(elem, data[dataKey]);
          elem.command[attr.nodeValue] = data[dataKey];
        }
      }
    }
  }

  /**
   * 脏循环检测
   * @param {[type]} elems [description]
   * @return {[type]}    [description]
   */
  var digest = function(elems) {
    /**
     * 扫描带指令的节点属性
     */
    for (var i = 0, len = elems.length; i < len; i++) {
      var elem = elems[i];
      for (var j = 0, len1 = elem.attributes.length; j < len1; j++) {
        var attr = elem.attributes[j];
        if (attr.nodeName.indexOf(&#39;q-event&#39;) >= 0) {
          /**
           * 调用属性指令
           */
          var dataKey = elem.getAttribute(&#39;ng-bind&#39;) || undefined;

          /**
           * 进行脏数据检测，如果数据改变，则重新执行指令，否则跳过
           */
          if(elem.command[attr.nodeValue] !== data[dataKey]){

            command[attr.nodeValue].call(elem, data[dataKey]);
            elem.command[attr.nodeValue] = data[dataKey];
          }
        }
      }
    }
  }

  /**
   * 初始化数据
   */
  scan(elems);

  /**
   * 可以理解为做数据劫持监听
   */
  function $digest(value){
    var list = document.querySelectorAll(&#39;[ng-bind=&#39;+ value + &#39;]&#39;);
    digest(list);
  }

  /**
   * 输入框数据绑定监听
   */
  if(document.addEventListener){
    elems[1].addEventListener(&#39;keyup&#39;, function(e) {
      data.value = e.target.value;
      $digest(e.target.getAttribute(&#39;ng-bind&#39;));
    }, false);
  }else{
    elems[1].attachEvent(&#39;onkeyup&#39;, function(e) {
      data.value = e.target.value;
      $digest(e.target.getAttribute(&#39;ng-bind&#39;));
    }, false);
  }

  setTimeout(function() {
    data.value = &#39;fuck&#39;;
    /**
     * 这里问啥还要执行$digest这里关键的是需要手动调用$digest方法来启动脏检测
     */
    $digest(&#39;value&#39;);
  }, 2000)

  </script>
</body>
</html>

Nach dem Login kopieren

3. Front-End-Datenentführung (Hijacking)

Die dritte Methode ist Avalon und andere Frameworks Die verwendete Datenhijacking-Methode. Die Grundidee besteht darin, Object.defineProperty zu verwenden, um das Abrufen und Festlegen von Eigenschaften des Datenobjekts zu überwachen. Bei Datenlese- und Zuweisungsvorgängen können die Anweisungen des Knotens am häufigsten verwendet werden . Die spezifische Implementierung lautet wie folgt:

Es ist jedoch zu beachten, dass defineProperty Browser über IE8 unterstützt. Aus Kompatibilitätsgründen können Sie jedoch defineProperty direkt verwenden. Was den IE8-Browser betrifft, müssen zum Hacken noch andere Methoden verwendet werden. Der folgende Code kann IE8 hacken und defineProperty unterstützt IE8. Verwenden Sie beispielsweise einfach es5-shim.js. (Von Browsern unter IE8 ignoriert)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>data-binding-hijacking</title>
</head>

<body>
  <input q-value="value" type="text" id="input">
  <p q-text="value" id="el"></p>
  <script>


  var elems = [document.getElementById(&#39;el&#39;), document.getElementById(&#39;input&#39;)];

  var data = {
    value: &#39;hello!&#39;
  };

  var command = {
    text: function(str) {
      this.innerHTML = str;
    },
    value: function(str) {
      this.setAttribute(&#39;value&#39;, str);
    }
  };

  var scan = function() {
    /**
     * 扫描带指令的节点属性
     */
    for (var i = 0, len = elems.length; i < len; i++) {
      var elem = elems[i];
      elem.command = [];
      for (var j = 0, len1 = elem.attributes.length; j < len1; j++) {
        var attr = elem.attributes[j];
        if (attr.nodeName.indexOf(&#39;q-&#39;) >= 0) {
          /**
           * 调用属性指令
           */
          command[attr.nodeName.slice(2)].call(elem, data[attr.nodeValue]);
          elem.command.push(attr.nodeName.slice(2));

        }
      }
    }
  }

  var bValue;
  /**
   * 定义属性设置劫持
   */
  var defineGetAndSet = function(obj, propName) {
    try {
      Object.defineProperty(obj, propName, {

        get: function() {
          return bValue;
        },
        set: function(newValue) {
          bValue = newValue;
          scan();
        },

        enumerable: true,
        configurable: true
      });
    } catch (error) {
      console.log("browser not supported.");
    }
  }
  /**
   * 初始化数据
   */
  scan();

  /**
   * 可以理解为做数据劫持监听
   */
  defineGetAndSet(data, &#39;value&#39;);

  /**
   * 数据绑定监听
   */
  if(document.addEventListener){
    elems[1].addEventListener(&#39;keyup&#39;, function(e) {
      data.value = e.target.value;
    }, false);
  }else{
    elems[1].attachEvent(&#39;onkeyup&#39;, function(e) {
      data.value = e.target.value;
    }, false);
  }

  setTimeout(function() {
    data.value = &#39;fuck&#39;;
  }, 2000)
  </script>
</body>

</html>

Nach dem Login kopieren

4. Zusammenfassung

Zuallererst sind die Beispiele hier nur einfache Implementierungen und können die Ähnlichkeiten tief spüren Unterschiede der drei Methoden, auch komplexe Frameworks durchschneien diese Grundidee.

Das obige ist der detaillierte Inhalt vonTeilen Sie drei Methoden zur Implementierung der bidirektionalen Datenbindung in JavaScript mit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Beste grafische Einstellungen

4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

2 Wochen vor By DDD

R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können

4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Chat -Befehle und wie man sie benutzt

4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7519

CakePHP-Tutorial

1378

Wie lautet das Format des Kontonamens von Steam?

Win11 -Aktivierungsschlüssel dauerhaft

NYT -Verbindungen Hinweise und Antworten

Related knowledge

Verwenden Sie ddrescue, um Daten unter Linux wiederherzustellen Mar 20, 2024 pm 01:37 PM

DDREASE ist ein Tool zum Wiederherstellen von Daten von Datei- oder Blockgeräten wie Festplatten, SSDs, RAM-Disks, CDs, DVDs und USB-Speichergeräten. Es kopiert Daten von einem Blockgerät auf ein anderes, wobei beschädigte Blöcke zurückbleiben und nur gute Blöcke verschoben werden. ddreasue ist ein leistungsstarkes Wiederherstellungstool, das vollständig automatisiert ist, da es während der Wiederherstellungsvorgänge keine Unterbrechungen erfordert. Darüber hinaus kann es dank der ddasue-Map-Datei jederzeit gestoppt und fortgesetzt werden. Weitere wichtige Funktionen von DDREASE sind: Es überschreibt die wiederhergestellten Daten nicht, füllt aber die Lücken im Falle einer iterativen Wiederherstellung. Es kann jedoch gekürzt werden, wenn das Tool explizit dazu aufgefordert wird. Stellen Sie Daten aus mehreren Dateien oder Blöcken in einer einzigen wieder her

Open Source! Jenseits von ZoeDepth! DepthFM: Schnelle und genaue monokulare Tiefenschätzung! Apr 03, 2024 pm 12:04 PM

0.Was bewirkt dieser Artikel? Wir schlagen DepthFM vor: ein vielseitiges und schnelles generatives monokulares Tiefenschätzungsmodell auf dem neuesten Stand der Technik. Zusätzlich zu herkömmlichen Tiefenschätzungsaufgaben demonstriert DepthFM auch hochmoderne Fähigkeiten bei nachgelagerten Aufgaben wie dem Tiefen-Inpainting. DepthFM ist effizient und kann Tiefenkarten innerhalb weniger Inferenzschritte synthetisieren. Lassen Sie uns diese Arbeit gemeinsam lesen ~ 1. Titel der Papierinformationen: DepthFM: FastMonocularDepthEstimationwithFlowMatching Autor: MingGui, JohannesS.Fischer, UlrichPrestel, PingchuanMa, Dmytr

So verwenden Sie die Excel-Filterfunktion mit mehreren Bedingungen Feb 26, 2024 am 10:19 AM

Wenn Sie wissen müssen, wie Sie die Filterung mit mehreren Kriterien in Excel verwenden, führt Sie das folgende Tutorial durch die Schritte, um sicherzustellen, dass Sie Ihre Daten effektiv filtern und sortieren können. Die Filterfunktion von Excel ist sehr leistungsstark und kann Ihnen dabei helfen, aus großen Datenmengen die benötigten Informationen zu extrahieren. Diese Funktion kann Daten entsprechend den von Ihnen festgelegten Bedingungen filtern und nur die Teile anzeigen, die die Bedingungen erfüllen, wodurch die Datenverwaltung effizienter wird. Mithilfe der Filterfunktion können Sie Zieldaten schnell finden und so Zeit beim Suchen und Organisieren von Daten sparen. Diese Funktion kann nicht nur auf einfache Datenlisten angewendet werden, sondern auch nach mehreren Bedingungen gefiltert werden, um Ihnen dabei zu helfen, die benötigten Informationen genauer zu finden. Insgesamt ist die Filterfunktion von Excel sehr praktisch

Google ist begeistert: JAX-Leistung übertrifft Pytorch und TensorFlow! Es könnte die schnellste Wahl für das GPU-Inferenztraining werden Apr 01, 2024 pm 07:46 PM

Die von Google geförderte Leistung von JAX hat in jüngsten Benchmark-Tests die von Pytorch und TensorFlow übertroffen und belegt bei 7 Indikatoren den ersten Platz. Und der Test wurde nicht auf der TPU mit der besten JAX-Leistung durchgeführt. Obwohl unter Entwicklern Pytorch immer noch beliebter ist als Tensorflow. Aber in Zukunft werden möglicherweise mehr große Modelle auf Basis der JAX-Plattform trainiert und ausgeführt. Modelle Kürzlich hat das Keras-Team drei Backends (TensorFlow, JAX, PyTorch) mit der nativen PyTorch-Implementierung und Keras2 mit TensorFlow verglichen. Zunächst wählen sie eine Reihe von Mainstream-Inhalten aus

Langsame Internetgeschwindigkeiten für Mobilfunkdaten auf dem iPhone: Korrekturen May 03, 2024 pm 09:01 PM

Stehen Sie vor einer Verzögerung oder einer langsamen mobilen Datenverbindung auf dem iPhone? Normalerweise hängt die Stärke des Mobilfunk-Internets auf Ihrem Telefon von mehreren Faktoren ab, wie z. B. der Region, dem Mobilfunknetztyp, dem Roaming-Typ usw. Es gibt einige Dinge, die Sie tun können, um eine schnellere und zuverlässigere Mobilfunk-Internetverbindung zu erhalten. Fix 1 – Neustart des iPhone erzwingen Manchmal werden durch einen erzwungenen Neustart Ihres Geräts viele Dinge zurückgesetzt, einschließlich der Mobilfunkverbindung. Schritt 1 – Drücken Sie einfach einmal die Lauter-Taste und lassen Sie sie los. Drücken Sie anschließend die Leiser-Taste und lassen Sie sie wieder los. Schritt 2 – Der nächste Teil des Prozesses besteht darin, die Taste auf der rechten Seite gedrückt zu halten. Lassen Sie das iPhone den Neustart abschließen. Aktivieren Sie Mobilfunkdaten und überprüfen Sie die Netzwerkgeschwindigkeit. Überprüfen Sie es erneut. Fix 2 – Datenmodus ändern 5G bietet zwar bessere Netzwerkgeschwindigkeiten, funktioniert jedoch besser, wenn das Signal schwächer ist

Die Vitalität der Superintelligenz erwacht! Aber mit der Einführung der sich selbst aktualisierenden KI müssen sich Mütter keine Sorgen mehr über Datenengpässe machen Apr 29, 2024 pm 06:55 PM

Ich weine zu Tode. Die Daten im Internet reichen überhaupt nicht aus. Das Trainingsmodell sieht aus wie „Die Tribute von Panem“, und KI-Forscher auf der ganzen Welt machen sich Gedanken darüber, wie sie diese datenhungrigen Esser ernähren sollen. Dieses Problem tritt insbesondere bei multimodalen Aufgaben auf. Zu einer Zeit, als sie ratlos waren, nutzte ein Start-up-Team der Abteilung der Renmin-Universität von China sein eigenes neues Modell, um als erstes in China einen „modellgenerierten Datenfeed selbst“ in die Realität umzusetzen. Darüber hinaus handelt es sich um einen zweigleisigen Ansatz auf der Verständnisseite und der Generierungsseite. Beide Seiten können hochwertige, multimodale neue Daten generieren und Datenrückmeldungen an das Modell selbst liefern. Was ist ein Modell? Awaker 1.0, ein großes multimodales Modell, das gerade im Zhongguancun-Forum erschienen ist. Wer ist das Team? Sophon-Motor. Gegründet von Gao Yizhao, einem Doktoranden an der Hillhouse School of Artificial Intelligence der Renmin University.

Der erste Roboter erscheint, der menschliche Aufgaben autonom erledigt, mit fünf flexiblen Fingern und übermenschlicher Geschwindigkeit, und große Modelle unterstützen das Training im virtuellen Raum Mar 11, 2024 pm 12:10 PM

Diese Woche gab FigureAI, ein Robotikunternehmen, an dem OpenAI, Microsoft, Bezos und Nvidia beteiligt sind, bekannt, dass es fast 700 Millionen US-Dollar an Finanzmitteln erhalten hat und plant, im nächsten Jahr einen humanoiden Roboter zu entwickeln, der selbstständig gehen kann. Und Teslas Optimus Prime hat immer wieder gute Nachrichten erhalten. Niemand zweifelt daran, dass dieses Jahr das Jahr sein wird, in dem humanoide Roboter explodieren. SanctuaryAI, ein in Kanada ansässiges Robotikunternehmen, hat kürzlich einen neuen humanoiden Roboter auf den Markt gebracht: Phoenix. Beamte behaupten, dass es viele Aufgaben autonom und mit der gleichen Geschwindigkeit wie Menschen erledigen kann. Pheonix, der weltweit erste Roboter, der Aufgaben autonom in menschlicher Geschwindigkeit erledigen kann, kann jedes Objekt sanft greifen, bewegen und elegant auf der linken und rechten Seite platzieren. Es kann Objekte autonom identifizieren

Tesla-Roboter arbeiten in Fabriken, Musk: Der Freiheitsgrad der Hände wird dieses Jahr 22 erreichen! May 06, 2024 pm 04:13 PM

Das neueste Video von Teslas Roboter Optimus ist veröffentlicht und er kann bereits in der Fabrik arbeiten. Bei normaler Geschwindigkeit sortiert es Batterien (Teslas 4680-Batterien) so: Der Beamte hat auch veröffentlicht, wie es bei 20-facher Geschwindigkeit aussieht – auf einer kleinen „Workstation“, pflücken und pflücken und pflücken: Dieses Mal wird es freigegeben. Eines der Highlights Der Vorteil des Videos besteht darin, dass Optimus diese Arbeit in der Fabrik völlig autonom und ohne menschliches Eingreifen während des gesamten Prozesses erledigt. Und aus Sicht von Optimus kann es auch die krumme Batterie aufnehmen und platzieren, wobei der Schwerpunkt auf der automatischen Fehlerkorrektur liegt: In Bezug auf die Hand von Optimus gab der NVIDIA-Wissenschaftler Jim Fan eine hohe Bewertung ab: Die Hand von Optimus ist der fünffingrige Roboter der Welt am geschicktesten. Seine Hände sind nicht nur taktil

See all articles