AngularJS 入門チュートリアルでのデータ バインディングの原則の詳細な説明

この記事の例では、AngularJS データ バインディングの原則について説明します。以下のように、参考としてみんなと共有してください:

注

この記事は主に、Angular にアクセスし始めたばかりでデータ ヘルパーの仕組みを理解したい初心者向けに書かれています。すでに Angular についてよく知っている場合は、ソース コードを直接読むことを強くお勧めします。

Angular ユーザーは皆、データ バインディングがどのように実装されるかを知りたいと考えています。 $watch、$apply、$digest、dirty-checking など、さまざまな単語が表示されることがあります。それらは何ですか?それらはどのように機能するのでしょうか?ここでは、これらの質問に答えたいと思います。実際には、公式ドキュメントで回答されていますが、それらを組み合わせて説明したいと思います。技術的な詳細を理解したい場合は、ソースを参照してください。コード。

最初から始めましょう。

ブラウザのイベント ループと Angular.js 拡張機能

私たちのブラウザは、ユーザー インタラクションなどのイベントを常に待機しています。ボタンをクリックするか、入力ボックスに何かを入力すると、イベントのコールバック関数が JavaScript インタプリタで実行され、コールバック関数が完了すると、それに応じてブラウザが DOM 上で操作を行うことができます。変更を加えます。 Angular はこのイベント ループを拡張して、Angular コンテキストと呼ばれることもある実行環境を生成します (これは重要な概念であることを忘れないでください)。コンテキストとは何か、そしてそれがどのように機能するかを説明するには、さらにいくつかの概念を説明する必要があります。

$watch キュー ($watch リスト)

何かを UI にバインドするたびに、$watch を $watch キューに挿入します。 $watch が、監視しているモデルの変更を検出できるものであると想像してください。たとえば、次のコードがあります

index.html

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

ここでは、最初の入力ボックスにバインドされている $scope.user と、2 番目の入力ボックスにバインドされている $scope.pass があります。入力ボックスに入力し、$watch リストに 2 つの $watch を追加します

次に、次の例を見てください。 $scope に 2 つのものを追加しましたが、UI にバインドされているのは 1 つだけなので、ここでは $watch が 1 つだけ生成されます。

次の例を見てください: js

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

index.html

Hello, {{ World }}

ここで $watch がいくつ生成されますか? 1 人あたり 2 つ（名前 1 つ、年齢 1 つ）、ng リピートが 1 つあるため、合計 10 人は (2 * 10) + 1 となり、$watch は 21 個になります。 したがって、UI にバインドされたすべてのデータは $watch を生成します。はい、$watch はいつ生成されましたか? テンプレートがロードされるとき、つまりリンクフェーズ (Angular はコンパイルフェーズとリンクフェーズに分かれています---翻訳者注) で、Angular インタプリタは各ディレクティブを検索し、必要な $watch をそれぞれ生成します。良さそうですが、次は何でしょうか？

$ダイジェスト ループ

前に述べた拡張イベント ループを覚えていますか? $digest ループは、ブラウザが Angular コンテキストで処理できるイベントを受信したときにトリガーされます。このループは 2 つの小さなループで構成されています。 1 つは evalAsync キューを処理し、もう 1 つは $watch キューを処理します。これは、このブログ投稿の主題でもあります。 これは何を扱っているのでしょうか? $digest は $watch を反復処理して、次のように尋ねます:

$watch さん、あなたの価値は何ですか?

9です。

さて、変わりましたか？

いいえ、先生。

(この変数は変更されていない、次の変数)

あなたはどうですか、あなたの価値は何ですか?

ご報告、ふーです。

今何か変わりましたか？

変わって、さっきバーでした。

(OK、更新する必要のある DOM があります)

$watch キューがチェックされるまで質問を続けます。

これはダーティチェックと呼ばれます。すべての $watch がチェックされたので、次は次のように尋ねる必要があります: $watch は更新されましたか?少なくとも 1 つが更新されている場合、すべての $watch が変更されないまでループが再度トリガーされます。これにより、各モデルが再び変更されることがなくなります。ループが 10 回を超えると、無限ループを防ぐために例外がスローされることに注意してください。 $digest ループが終了すると、それに応じて DOM が変更されます。

例:controllers.js

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

index.html

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

ここでは、ng-click では $watch が生成されないため (関数は変わりません)、$watch があります。

ボタンを押します

ブラウザはイベントを受け取り、Angular コンテキストに入ります (理由は後で説明します)。

$digest ループが実行を開始し、各 $watch が変更されるかどうかをクエリします。

$scope.name を監視している $watch が変更を報告するため、別の $digest サイクルが強制されます。

新しい $digest ループは変更を検出しません。

ブラウザは制御を取り戻し、$scope.name の新しい値に対応する DOM を更新します。

ここで非常に重要なこと (そして多くの人にとっての問題点) は、角度コンテキストに入るすべてのイベントが $digest ループを実行することです。これは、文字を入力するたびに、ループがすべての $watch をチェックすることを意味します。ページ全体。

$apply を通じて Angular コンテキストを入力します

谁决定什么事件进入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: &#39;<ul style="background-color: lightblue"><li>{{foo}}</li><li>{{bar}}</li></ul>&#39;,
 link: function(scope, element, attrs) {
  element.bind(&#39;click&#39;, function() {
   scope.foo++;
   scope.bar++;
  });
 }
}
});
app.controller(&#39;MainCtrl&#39;, 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）

希望本文所述对大家AngularJS程序设计有所帮助。

更多AngularJS入门教程之数据绑定原理详解相关文章请关注PHP中文网！