AngularJS双向数据绑定原理（详细教程）
这篇文章主要介绍了AngularJS双向数据绑定原理之$watch、$apply和$digest的应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
引子
这篇文章是写给AngularJS新手的，如果你已经对AngularJS的双向数据绑定有了深入的了解，直接去阅读源代码好了。
背景
AngularJS开发者都想知道双向数据绑定是怎么实现的。与data-binding相关的术语琳琅满目： $watch,$apply,$digest,dirty-checking等等它们是如何工作的呢？让我们从头开始讲起吧
AngularJS 的双向数据绑定是被浏览器逼的
浏览器看上去很美，其实在数据交互这块儿，由于浏览器的“不作为”，导致浏览器的数据刷新成为一个难题。具体来说，浏览器可以很容易地监听一个事件，比如：用户点击一个按钮，或者在输入框里输入东西，为此还提供了事件回调函数的API，事件的回调函数就会在javascript解释器里执行；但反过来就没这么简单了，如果来自后台的数据发生了变化，需要通知给浏览器，让浏览器刷新，浏览器并没有提供这样的数据交互机制，对于开发者来说，这是一个难以逾越的障碍，怎么办呢？ AngularJS出现了，它通过$scope 很好地实现了双向数据绑定，其背后的原理就是$watch,$apply,$digest,dirty-checking
$watch 队列（$watch list）
从字面上看，watch 是观察的意思。 每次绑定一些东西到浏览器上时，就会往$watch队列里插入一条$watch。想象一下$watch就是那个可以检测它监视的model里时候有变化的东西。例如你有如下的代码
User: <input type="text" ng-model="user" /> Password: <input type="password" ng-model="pass" />
这里有个$scope.user，它被绑定在了第一个输入框上，还有个$scope.pass，它被绑定在了第二个输入框上；然后在$watch list里面加入两个$watch:
创建一个 controllers.js 文件，代码如下：
app.controller('MainCtrl', function($scope) {
$scope.foo = "Foo";
$scope.world = "World";
});对应的html 文件, index.html 代码如下：
Hello, {{ World }}这里，即便在$scope上添加了两个东西，但是只有一个绑定在了UI上，因此只生成了一个$watch. 再看下面的例子：
controllers.js
app.controller('MainCtrl', function($scope) {
$scope.people = [...];
});对应的html文件 index.html
<ul>
<li ng-repeat="person in people">
{{person.name}} - {{person.age}}
</li>
</ul>这样看来，又生成了多个$watch。每个person有两个（一个name，一个age），然后ng-repeat是一个循环，因此10个person一共是(2 * 10) +1,也就是说有21个$watch。 因此，每一个绑定到了浏览器上的数据都会生成一个$watch。对，那这写$watch是什么时候生成的呢？ 先回顾下AngularJS的加载原理
AngularJS的加载原理：
AngularJS的模板加载分为编译（compile）和链接（linking）两个阶段，在linking阶段，AngularJS解释器会寻找每个directive，然后生成每个需要的$watch。对了，$watch就是在这个阶段生成的。
接下来，开始用到 $digest了
$digest 循环
从字面上看，digest是 “消化”的意思，总感觉这个名字怪怪的，跟不可思议的是 dirty-checking， 字面意思“脏检查”，还是不翻译为好。原作者的本意肯定不是这个意思，只可意会不可言传！
$digest 是一个循环，它在循环做什么呢？ $digest 在遍历我们的$watch。 $digest 一个个地询问$watch —— “嗨，你观察的数据发生变化了没？”
这个遍历就是所谓的dirty-checking。既然所有的$watch都检查完了，那就要问了：有没有$watch更新过？如果有至少一个更新过，这个循环就会再次触发，直到所有的$watch都没有变化。这样就能够保证每个model都已经不会再变化。记住如果循环超过10次的话，它将会抛出一个异常，以免出现无限循环。 当$digest循环结束时，DOM相应地变化。
看段代码，例如： controllers.js
app.controller('MainCtrl', function() {
$scope.name = "Foo";
$scope.changeFoo = function() {
$scope.name = "Bar";
}
});对应的html文件，index.html
{{ name }}
<button ng-click="changeFoo()">Change the name</button>这里只有一个$watch，因为ng-click不生成$watch（函数是不会变的）。
$digest 执行的流程是：
在浏览器按下按钮；
浏览器接收到一个事件，进入angular context。
$digest循环开始执行，查询每个$watch是否变化。
由于监视$scope.name的$watch报告了变化，它会强制再执行一次$digest循环。
新的$digest循环没有检测到变化，此时浏览器拿回控制权，更新与$scope.name新值相应部分的DOM。
从中可以看出AngularJS的一个明显的不足：每一个进入angular context的事件都会执行一个$digest循环，哪怕仅仅是输入一个字母，$digest 都会遍历整个页面的所有$watch。
$apply 的应用
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('demoApp',[]);
demoApp.controller('MainCtrl', function($scope) {
$scope.name = "Angular";
$scope.updated = -1;
$scope.$watch('name', 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 的原因吧。
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
Atas ialah kandungan terperinci AngularJS双向数据绑定原理（详细教程）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1384
52
2022年最新5款的angularjs教程从入门到精通
Jun 15, 2017 pm 05:50 PM
Javascript 是一个非常有个性的语言. 无论是从代码的组织, 还是代码的编程范式, 还是面向对象理论都独具一格. 而很早就在争论的Javascript 是不是面向对象语言这个问题, 显然已有答案. 但是, 即使 Javascript 叱咤风云二十年, 如果想要看懂 jQuery, Angularjs, 甚至是 React 等流行框架, 观看《黑马云课堂JavaScript 高级框架设计视频教程》就对了。
Gunakan PHP dan AngularJS untuk membina tapak web responsif untuk menyediakan pengalaman pengguna yang berkualiti tinggi
Jun 27, 2023 pm 07:37 PM
Dalam era maklumat hari ini, laman web telah menjadi alat penting untuk orang ramai mendapatkan maklumat dan berkomunikasi. Tapak web responsif boleh menyesuaikan diri dengan pelbagai peranti dan memberikan pengguna pengalaman berkualiti tinggi, yang telah menjadi tumpuan dalam pembangunan tapak web moden. Artikel ini akan memperkenalkan cara menggunakan PHP dan AngularJS untuk membina tapak web responsif untuk memberikan pengalaman pengguna yang berkualiti tinggi. Pengenalan kepada PHP PHP ialah bahasa pengaturcaraan sisi pelayan sumber terbuka yang sesuai untuk pembangunan web. PHP mempunyai banyak kelebihan, seperti mudah dipelajari, merentas platform, perpustakaan alat yang kaya, kecekapan pembangunan
Bina aplikasi web menggunakan PHP dan AngularJS
May 27, 2023 pm 08:10 PM
Dengan pembangunan berterusan Internet, aplikasi Web telah menjadi bahagian penting dalam pembinaan maklumat perusahaan dan cara kerja pemodenan yang diperlukan. Untuk menjadikan aplikasi web mudah dibangunkan, diselenggara dan dikembangkan, pembangun perlu memilih rangka kerja teknikal dan bahasa pengaturcaraan yang sesuai dengan keperluan pembangunan mereka. PHP dan AngularJS ialah dua teknologi pembangunan web yang sangat popular. Kedua-duanya adalah penyelesaian bahagian pelayan dan bahagian pelanggan. Penggunaan gabungan mereka boleh meningkatkan kecekapan pembangunan dan pengalaman pengguna aplikasi web. Kelebihan PHPPHP
Komunikasi komponen Vue: menggunakan $watch untuk pemantauan data
Jul 07, 2023 am 11:09 AM
Komunikasi komponen Vue: menggunakan $watch untuk pemantauan data Dalam pembangunan Vue, komunikasi komponen adalah keperluan biasa. Vue menyediakan pelbagai cara untuk melaksanakan komunikasi antara komponen Salah satu cara biasa ialah menggunakan $watch untuk pemantauan data. Artikel ini akan memperkenalkan penggunaan $watch dan memberikan contoh kod yang sepadan. Objek contoh Vue menyediakan kaedah $watch untuk memantau perubahan data. $watch menerima dua parameter: nama sifat data yang akan dipantau dan fungsi panggil balik. Apabila mendengar data
Bina aplikasi web satu halaman menggunakan Flask dan AngularJS
Jun 17, 2023 am 08:49 AM
Dengan perkembangan pesat teknologi Web, Aplikasi Web Halaman Tunggal (SinglePage Application, SPA) telah menjadi model aplikasi Web yang semakin popular. Berbanding dengan aplikasi web berbilang halaman tradisional, kelebihan terbesar SPA ialah pengalaman pengguna lebih lancar, dan tekanan pengkomputeran pada pelayan juga sangat berkurangan. Dalam artikel ini, kami akan memperkenalkan cara membina SPA mudah menggunakan Flask dan AngularJS. Flask ialah Py ringan
Bagaimana untuk menggunakan AngularJS dalam pengaturcaraan PHP?
Jun 12, 2023 am 09:40 AM
Dengan populariti aplikasi web, rangka kerja bahagian hadapan AngularJS telah menjadi semakin popular. AngularJS ialah rangka kerja JavaScript yang dibangunkan oleh Google yang membantu anda membina aplikasi web dengan keupayaan aplikasi web dinamik. Sebaliknya, untuk pengaturcaraan bahagian belakang, PHP ialah bahasa pengaturcaraan yang sangat popular. Jika anda menggunakan PHP untuk pengaturcaraan sisi pelayan, maka menggunakan PHP dengan AngularJS akan membawa lebih banyak kesan dinamik ke tapak web anda.
Gunakan PHP dan AngularJS untuk membangunkan platform pengurusan fail dalam talian untuk memudahkan pengurusan fail
Jun 27, 2023 pm 01:34 PM
Dengan populariti Internet, semakin ramai orang menggunakan rangkaian untuk memindahkan dan berkongsi fail. Namun, atas pelbagai sebab, pengurusan fail menggunakan kaedah tradisional seperti FTP tidak dapat memenuhi keperluan pengguna moden. Oleh itu, mewujudkan platform pengurusan fail dalam talian yang mudah digunakan, cekap dan selamat telah menjadi satu trend. Platform pengurusan fail dalam talian yang diperkenalkan dalam artikel ini adalah berdasarkan PHP dan AngularJS Ia boleh melakukan muat naik, memuat turun, mengedit, memadam dan operasi lain dengan mudah, dan menyediakan satu siri fungsi yang berkuasa, seperti perkongsian fail, carian,
AngularJS基础入门介绍
Apr 21, 2018 am 10:37 AM
这篇文章介绍的内容是关于AngularJS基础入门介绍，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下。
