Prinzip der bidirektionalen Datenbindung von AngularJS (ausführliches Tutorial)

Dieser Artikel stellt hauptsächlich die Anwendung von $watch, $apply und $digest vor, die auf dem bidirektionalen Datenbindungsprinzip von AngularJS basiert. Interessierte Freunde können darauf verweisen

Einführung

Dieser Artikel richtet sich an AngularJS-Neulinge. Wenn Sie bereits ein umfassendes Verständnis der bidirektionalen Datenbindung von AngularJS haben, lesen Sie einfach den Quellcode.

Hintergrund

AngularJS-Entwickler möchten alle wissen, wie die bidirektionale Datenbindung implementiert wird. Es gibt viele Begriffe im Zusammenhang mit der Datenbindung: $watch, $apply, $digest, Dirty-Checking usw. Wie funktionieren sie? Fangen wir von vorne an

Die bidirektionale Datenbindung von AngularJS wird durch den Browser erzwungen

Der Browser sieht wunderschön aus, aber tatsächlich, im Hinblick auf die Daten Interaktion Sohn, aufgrund der „Untätigkeit“ des Browsers ist die Datenaktualisierung des Browsers zu einem Problem geworden. Insbesondere kann der Browser problemlos auf ein Ereignis hören, z. B. wenn der Benutzer auf eine Schaltfläche klickt oder etwas in das Eingabefeld eingibt. Zu diesem Zweck stellt der Browser auch eine API für Ereignisrückruffunktionen zur Verfügung Der Javascript-Interpreter ist jedoch nicht so einfach. Wenn sich die Daten im Hintergrund ändern, muss der Browser einen solchen Dateninteraktionsmechanismus bereitstellen soll ich das tun? Es erscheint AngularJS, das die bidirektionale Datenbindung über $scope gut implementiert. Das Prinzip dahinter ist $watch, $apply, $digest, dirty-checking

$watch queue ($watch list)

Beobachten bedeutet im wahrsten Sinne des Wortes beobachten. Jedes Mal, wenn Sie etwas an den Browser binden, wird ein $watch in die $watch-Warteschlange eingefügt. Stellen Sie sich vor, dass $watch etwas ist, das Änderungen im überwachten Modell erkennen kann. Sie haben zum Beispiel den folgenden Code:

User: <input type="text" ng-model="user" />
Password: <input type="password" ng-model="pass" />

Es gibt $scope.user, das an das erste Eingabefeld gebunden ist, und es gibt $scope.pass, das an das zweite Eingabefeld gebunden ist Eingabefeld; fügen Sie dann zwei $watches zur $watch-Liste hinzu:

, um eine controllers.js-Datei mit dem folgenden Code zu erstellen:

app.controller('MainCtrl', function($scope) {
 $scope.foo = "Foo";
 $scope.world = "World";
});

entsprechende HTML-Datei, der index.html-Code ist wie folgt folgt:

Hello, {{ World }}

Selbst wenn zwei Dinge zu $scope hinzugefügt werden, ist nur eines an die Benutzeroberfläche gebunden, sodass nur ein $watch generiert wird:

Controller .js

app.controller('MainCtrl', function($scope) {
 $scope.people = [...];
});

entspricht der HTML-Datei index.html

<ul>
 <li ng-repeat="person in people">
   {{person.name}} - {{person.age}}
 </li>
</ul>

Es scheint, dass mehrere $watches generiert werden. Jede Person hat zwei (einen Namen, ein Alter) und ng-repeat ist eine Schleife, sodass die Gesamtzahl von 10 Personen (2 * 10) + 1 beträgt, was bedeutet, dass es 21 $watches gibt. Daher generieren alle an den Browser gebundenen Daten eine $watch. Ja, wann wurde $watch generiert? Schauen wir uns zunächst das Ladeprinzip von AngularJS an

Das Ladeprinzip von AngularJS:

Das Laden der Vorlage von AngularJS ist in zwei Phasen unterteilt: Kompilierung und Verknüpfung In dieser Phase sucht der AngularJS-Interpreter nach jeder Direktive und generiert jedes erforderliche $watch. Übrigens wird in dieser Phase $watch generiert.

Als nächstes beginnen wir mit der Verwendung von $digest

$digest-Schleife

Digest bedeutet wörtlich „Verdauung“. Es hat seltsamerweise etwas mit Dirty-Checking zu tun, was wörtlich „Dirty-Checking“ bedeutet. Es ist besser, es nicht zu übersetzen. Die ursprüngliche Absicht des ursprünglichen Autors ist definitiv nicht diese, sie kann nur verstanden, aber nicht in Worten ausgedrückt werden!

$digest ist eine Schleife. Was macht es in der Schleife? $digest iteriert über unsere $watch. $digest fragt $watch nacheinander: „Hey, haben sich die von Ihnen beobachteten Daten geändert?“

Dieser Durchlauf ist das sogenannte Dirty-Checking. Nachdem nun alle $watches überprüft wurden, müssen wir fragen: Wurde $watch aktualisiert? Wenn mindestens einer aktualisiert wurde, wird die Schleife erneut ausgelöst, bis alle $watches unverändert sind. Dadurch wird sichergestellt, dass sich jedes Modell nicht erneut ändert. Denken Sie daran, dass bei mehr als 10 Wiederholungen der Schleife eine Ausnahme ausgelöst wird, um eine Endlosschleife zu vermeiden. Wenn die $digest-Schleife endet, ändert sich das DOM entsprechend.

Sehen Sie sich den Code an, zum Beispiel: controllers.js

app.controller('MainCtrl', function() {
 $scope.name = "Foo";
 $scope.changeFoo = function() {
   $scope.name = "Bar";
 }
});

entsprechende HTML-Datei, index.html

{{ name }}
<button ng-click="changeFoo()">Change the name</button>

Hier gibt es nur ein $watch, weil ng-click generiert kein $ watch (die Funktion ändert sich nicht).

Der Ausführungsprozess von $digest ist:

1. Drücken Sie die Schaltfläche im Browser.

2. Der Browser empfängt ein Ereignis Geben Sie den Winkelkontext ein.

3. Die $digest-Schleife beginnt mit der Ausführung und fragt ab, ob sich jede $watch ändert.

4. Da die $watch-Überwachung von $scope.name eine Änderung meldet, wird ein weiterer $digest-Zyklus erzwungen.

5. Die neue $digest-Schleife erkennt keine Änderungen. An diesem Punkt übernimmt der Browser die Kontrolle zurück und aktualisiert den Teil des DOM, der dem neuen Wert von $scope.name entspricht.

Daraus können wir einen offensichtlichen Mangel von AngularJS erkennen: Jedes Ereignis, das in den Winkelkontext eintritt, führt eine $digest-Schleife aus. Selbst wenn Sie nur einen Buchstaben eingeben, wird $digest die Schleife durchlaufen gesamte Seite.

$Antrag beantragen

Angular context 是整个Angular的上下文，也可以把它理解为Angular容器，那么，是谁来决定哪些事件可以进入 Angular Context，哪些事件又不能进入呢？ 其控制器在 $apply手上。

如果当事件触发时，调用$apply，它会进入angular context，如果没有调用就不会进入。你可能会问：刚才的例子并没有调用$apply，这是怎么回事呢？原来，是Angular背后替你做了。当点击带有ng-click的元素时，事件就会被封装到一个$apply调用中。如果有一个ng-model="foo"的输入框，当输入一个字母 f 时，事件就会这样调用，$apply("foo = 'f';")。

$apply的应用场景

$apply是$scope的一个函数，调用它会强制一次$digest循环。如果当前正在执行$apply循环，则会抛出一个异常。

如果浏览器上数据没有及时刷新，可以通过调用$scope.$apply() 方法，强行刷新一遍。

通过 $watch 监控自己的$scope

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
 <title>test</title>
 <!-- Vendor libraries -->
  <script src="lib/jquery-v1.11.1.js"></script>
  <script src="lib/angular-v1.2.22.js"></script>
  <script src="lib/angular-route-v1.2.22.js"></script>
</head>
<body> 
 <p ng-controller="MainCtrl" >
  <input ng-model="name" />
  Name updated: {{updated}} times.
 </p> 
 <script >
  var demoApp = angular.module(&#39;demoApp&#39;,[]); 
  demoApp.controller(&#39;MainCtrl&#39;, function($scope) {
  $scope.name = "Angular";
  $scope.updated = -1;
  $scope.$watch(&#39;name&#39;, function() {
  $scope.updated++;
 });
});
 </script>
 </body>
</html>

代码说明：

当controller 执行到 $watch时，它会立即调用一次，所以把updated的值设为 -1 。 上输入框中输入字符发生变化时，你会看到 updated 的值随之变化，而且能显示变化的次数。

$watch 检测到的数据变化

小结

我们对 AngularJS的双向数据绑定有了一个初步的认识，对于AngularJS来说，表面上看操作DOM很简单，其实背后有 $watch、$digest 、 $apply 三者在默默地起着作用。这个遍历检查数据是否发生变化的过程，称之为：dirty-checking。 当你了解了这个过程后，你会对它嗤之以鼻，感觉这种方法好low 哦。 确实，如果一个DOM中有 2000- 3000个 watch，页面的渲染速度将会大打折扣。

这个渲染的性能问题怎么解决呢？随着ECMAScript6的到来，Angular 2 通过Object.observe 极大地改善$digest循环的速度。或许，这就是为什么 Angular 团队迫不及待地推出 Angular 2 的原因吧。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在vue-cli中如何配置babel配置文件

使用node.js实现抖音自动抢红包功能

使用webpack打包处理bundle.js文件过大的问题

Das obige ist der detaillierte Inhalt vonPrinzip der bidirektionalen Datenbindung von AngularJS (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!