Detaillierte Erläuterung des Datenbindungsprozesses von $watch, $apply und $digest

Dieses Mal bringe ich Ihnen eine detaillierte Erklärung des $watch-, $apply- und $digestDatenbindungsprozesses sowie Hinweise zu den $watch-, $apply- und $digest-Daten Werfen wir einen Blick darauf.

Dieser Blog-Beitrag ist hauptsächlich für Anfänger geschrieben, für diejenigen, die gerade erst begonnen haben, Angular zu kontaktieren und verstehen möchten, wie die Datenbindung funktioniert. Wenn Sie bereits viel über Angular wissen, wird dringend empfohlen, direkt den Quellcode zu lesen. Alle Angular-Benutzer möchten wissen, wie die Datenbindung implementiert wird. Möglicherweise sehen Sie verschiedene Wörter: $watch, $apply, $digest, dirty-checking, was ist das? Wie funktionieren sie? Ich möchte diese Fragen tatsächlich in den offiziellen Dokumenten beantworten, möchte sie aber dennoch zusammenfassen, aber ich verwende nur eine einfache Methode, um die technischen Details zu erklären Code.

Browser-Ereignisschleife und Angular.js-Erweiterungen

Unser Browser wartet immer auf Ereignisse, wie z. B. Benutzerinteraktionen. Wenn Sie auf eine Schaltfläche klicken oder etwas in das Eingabefeld eingeben, wird die Rückruffunktion des Ereignisses im Javascript-Interpreter ausgeführt, und Sie können dann eine beliebige DOM-Operation ausführen und auf den Rückruf warten Funktion Wenn die Ausführung abgeschlossen ist, nimmt der Browser entsprechende Änderungen am DOM vor. Angular erweitert diese Ereignisschleife, um eine Ausführungsumgebung zu generieren, die manchmal als Angular-Kontext bezeichnet wird (denken Sie daran, dass dies ein wichtiges Konzept ist. Um zu erklären, was Kontext ist und wie er funktioniert, müssen wir einige weitere Konzepte erklären). $watch-Warteschlange ($watch-Liste) Jedes Mal, wenn Sie etwas an Ihre Benutzeroberfläche binden, fügen Sie ein $watch in die $watch-Warteschlange ein. Stellen Sie sich vor, dass $watch etwas ist, das Änderungen im überwachten Modell erkennen kann. Sie haben zum Beispiel den folgenden Code

index.html

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

, der an das zweite Eingabefeld gebunden ist, und dann fügen wir zwei $watches zur $watch-Liste hinzu :

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

Selbst wenn wir zwei Dinge zu $scope hinzufügen, ist nur eines an die Benutzeroberfläche gebunden, sodass hier nur ein $watch generiert wird:

controllers.js
app.controller('MainCtrl', function($scope) { $scope.people = [...];});
index.html
<ul> <li ng-repeat="person in people"> {{person.name}} - {{person.age}} </li></ul>

Wie viele $watches werden hier generiert? Jede Person hat zwei (einen Namen, ein Alter) und dann eine ng-Wiederholung, sodass die Gesamtzahl von 10 Personen (2 * 10) + 1 beträgt, was bedeutet, dass es 21 $watch
gibt. Daher generieren alle an die Benutzeroberfläche gebundenen Daten eine $watch. Ja, wann wurde $watch
generiert? Wenn unsere Vorlage geladen wird, also in der Verknüpfungsphase (Angular ist in Kompilierungsphase und Verknüpfungsphase unterteilt – Anmerkung des Übersetzers), sucht der Angular-Interpreter nach jeder Direktive und generiert jedes erforderliche $watch. Hört sich gut an, aber wie geht es weiter?

$digest

Schleife (Ich weiß nicht, wie ich diesen Digest übersetzen soll)
Erinnern Sie sich an die erweiterte Ereignisschleife, die ich zuvor erwähnt habe? Die $digest-Schleife wird ausgelöst, wenn der Browser ein Ereignis empfängt, das vom Angular-Kontext verarbeitet werden kann. Diese Schleife besteht aus zwei kleineren Schleifen. Einer verwaltet die evalAsync-Warteschlange und der andere die $watch-Warteschlange, die auch Gegenstand dieses Blogbeitrags ist. Worum geht es dabei? $digest durchläuft unser $watch und fragt:

- Hey, $watch- was ist dein Wert? Es ist 9.
- Okay, hat sich das geändert? Nein, Herr.
- (Diese Variable hat sich nicht geändert, dann die nächste)
Was ist mit dir, was ist dein Wert?
- Melden Sie sich, es ist Foo.
- Hast du gerade etwas geändert? Geändert, jetzt war es Bar.
(Sehr gut, wir haben DOM, das aktualisiert werden muss)
Weiter fragen, bis $watch
Die Warteschlange wurde überprüft.

Das 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 zehn Schleifen eine Ausnahme ausgelöst wird, um eine Endlosschleife zu verhindern. Wenn die $digest-Schleife endet, ändert sich das DOM entsprechend.

Zum Beispiel: controllers.js

app.controller('MainCtrl', function() { $scope.name = "Foo"; $scope.changeFoo = function() { $scope.name = "Bar"; }});
index.html
{{ name }}<button ng-click="changeFoo()">Change the name</button>

这里我们有一个$watch因为ng-click不生成$watch（函数是不会变的）。我们按下按钮浏览器接收到一个事件，进入angular context（后面会解释为什么）。
$digest循环开始执行，查询每个$watch是否变化。由于监视$scope.name的$watch
报告了变化，它会强制再执行一次$digest循环。新的$digest循环没有检测到变化。
浏览器拿回控制权，更新与$scope.name新值相应部分的DOM。

这里很重要的（也是许多人的很蛋疼的地方）是每一个进入angular context
的事件都会执行一个$digest
循环，也就是说每次我们输入一个字母循环都会检查整个页面的所有$watch。
通过$apply来进入angular context

谁决定什么事件进入angular context，而哪些又不进入呢？$apply！
如果当事件触发时，你调用$apply，它会进入angular context，如果没有调用就不会进入。现在你可能会问：刚才的例子里我也没有调用$apply啊，为什么？Angular为了做了！因此你点击带有ng-click的元素时，时间就会被封装到一个$apply调用。如果你有一个ng-model="foo"的输入框，然后你敲一个f，事件就会这样调用$apply("foo = 'f';")
。
Angular什么时候不会自动为我们$apply呢？
这是Angular新手共同的痛处。为什么我的jQuery不会更新我绑定的东西呢？因为jQuery没有调用$apply，事件没有进入angular context，$digest循环永远没有执行。
我们来看一个有趣的例子：假设我们有下面这个directive和controller
app.js

app.directive('clickable', function() {return { restrict: "E", scope: { foo: '=', bar: '=' }, template: '<ul style="background-color: lightblue"><li>{{foo}}</li><li>{{bar}}</li></ul>', link: function(scope, element, attrs) { element.bind('click', function() { scope.foo++; scope.bar++; }); }}});app.controller('MainCtrl', function($scope) { $scope.foo = 0; $scope.bar = 0;});

它将foo和bar
从controller里绑定到一个list里面，每次点击这个元素的时候，foo和bar
都会自增1。那我们点击元素的时候会发生什么呢？我们能看到更新吗？答案是否定的。因为点击事件是一个没有封装到$apply里面的常见的事件，这意味着我们会失去我们的计数吗？不会真正的结果是：$scope确实改变了，但是没有强制$digest
循环，监视foo 和bar的$watch没有执行。也就是说如果我们自己执行一次$apply
那么这些$watch就会看见这些变化，然后根据需要更新DOM。
试试看吧：http://jsbin.com/opimat/2/
如果我们点击这个directive（蓝色区域），我们看不到任何变化，但是我们点击按钮时，点击数就更新了。如刚才说的，在这个directive上点击时我们不会触发$digest
循环，但是当按钮被点击时，ng-click会调用$apply，然后就会执行$digest循环，于是所有的$watch都会被检查，当然就包括我们的foo和bar的$watch了。
现在你在想那并不是你想要的，你想要的是点击蓝色区域的时候就更新点击数。很简单，执行一下$apply就可以了：
element.bind('click', function() { scope.foo++; scope.bar++; scope.$apply();});
$apply是我们的$scope（或者是direcvie里的link函数中的scope）的一个函数，调用它会强制一次$digest循环（除非当前正在执行循环，这种情况下会抛出一个异常，这是我们不需要在那里执行$apply的标志）。
试试看：http://jsbin.com/opimat/3/edit
有用啦！但是有一种更好的使用$apply的方法：

element.bind('click', function() { scope.$apply(function() { scope.foo++; scope.bar++; });})

有什么不一样的？差别就是在第一个版本中，我们是在angular context
的外面更新的数据，如果有发生错误，Angular永远不知道。很明显在这个像个小玩具的例子里面不会出什么大错，但是想象一下我们如果有个alert框显示错误给用户，然后我们有个第三方的库进行一个网络调用然后失败了，如果我们不把它封装进$apply里面，Angular永远不会知道失败了，alert框就永远不会弹出来了。
因此，如果你想使用一个jQuery插件，并且要执行$digest循环来更新你的DOM的话，要确保你调用了$apply。
有时候我想多说一句的是有些人在不得不调用$apply时会“感觉不妙”，因为他们会觉得他们做错了什么。其实不是这样的，Angular不是什么魔术师，他也不知道第三方库想要更新绑定的数据。使用$watch来监视你自己的东西你已经知道了我们设置的任何绑定都有一个它自己的$watch，当需要时更新DOM，但是我们如果要自定义自己的watches呢？简单来看个例子：
app.js

app.controller('MainCtrl', function($scope) { $scope.name = "Angular"; $scope.updated = -1; $scope.$watch('name', function() { $scope.updated++; });});

index.html

<body ng-controller="MainCtrl"> <input ng-model="name" /> Name updated: {{updated}} times.</body>

这就是我们创造一个新的$watch的方法。第一个参数是一个字符串或者函数，在这里是只是一个字符串，就是我们要监视的变量的名字，在这里，$scope.name
(注意我们只需要用name)。第二个参数是当$watch说我监视的表达式发生变化后要执行的。我们要知道的第一件事就是当controller执行到这个$watch
时，它会立即执行一次，因此我们设置updated为-1。
试试看：http://jsbin.com/ucaxan/1/edit
例子2：
app.js

app.controller('MainCtrl', function($scope) { $scope.name = "Angular"; $scope.updated = 0; $scope.$watch('name', function(newValue, oldValue) { if (newValue === oldValue) { return; } // AKA first run $scope.updated++; });});

index.html

<body ng-controller="MainCtrl"> <input ng-model="name" /> Name updated: {{updated}} times.</body>

watch的第二个参数接受两个参数，新值和旧值。我们可以用他们来略过第一次的执行。通常你不需要略过第一次执行，但在这个例子里面你是需要的。灵活点嘛少年。
例子3：
app.js

app.controller('MainCtrl', function($scope) { $scope.user = { name: "Fox" }; $scope.updated = 0; $scope.$watch('user', function(newValue, oldValue) { if (newValue === oldValue) { return; } $scope.updated++; });});

index.html

<body ng-controller="MainCtrl"> <input ng-model="user.name" /> Name updated: {{updated}} times.</body>

我们想要监视$scope.user对象里的任何变化，和以前一样这里只是用一个对象来代替前面的字符串。
试试看：http://jsbin.com/ucaxan/3/edit
呃？没用，为啥？因为$watch
默认是比较两个对象所引用的是否相同，在例子1和2里面，每次更改$scope.name
都会创建一个新的基本变量，因此$watch会执行，因为对这个变量的引用已经改变了。在上面的例子里，我们在监视$scope.user，当我们改变$scope.user.name
时，对$scope.user的引用是不会改变的，我们只是每次创建了一个新的$scope.user.name，但是$scope.user永远是一样的。
例子4：
app.js

app.controller('MainCtrl', function($scope) { $scope.user = { name: "Fox" }; $scope.updated = 0; $scope.$watch('user', function(newValue, oldValue) { if (newValue === oldValue) { return; } $scope.updated++; }, true);});

index.html

<body ng-controller="MainCtrl"> <input ng-model="user.name" /> Name updated: {{updated}} times.</body>

试试看：http://jsbin.com/ucaxan/4/edit
现在有用了吧！因为我们对$watch加入了第三个参数，它是一个bool类型的参数，表示的是我们比较的是对象的值而不是引用。由于当我们更新$scope.user.name
时$scope.user也会改变，所以能够正确触发。
关于$watch还有很多tips&tricks，但是这些都是基础。
总结
好吧，我希望你们已经学会了在Angular中数据绑定是如何工作的。我猜想你的第一印象是dirty-checking很慢，好吧，其实是不对的。它像闪电般快。但是，是的，如果你在一个模版里有2000-3000个watch，它会开始变慢。但是我觉得如果你达到这个数量级，就可以找个用户体验专家咨询一下了
无论如何，随着ECMAScript6的到来，在Angular未来的版本里我们将会有Object.observe那样会极大改善$digest循环的速度。同时未来的文章也会涉及一些tips&tricks。
另一方面，这个主题并不容易，如果你发现我落下了什么重要的东西或者有什么东西完全错了，请指正（原文是在GITHUB上PR 或报告issue

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

全局计数的JavaScript代码

逐个隐藏元素的JavaScript代码

怎样阻止django中form页面刷新后自动提交

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Datenbindungsprozesses von $watch, $apply und $digest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!