1.背景介紹
Angular實(shí)現(xiàn)了雙向綁定機(jī)制
所謂的雙向綁定，無非是從界面的操作能反映到數(shù)據(jù)，數(shù)據(jù)的變更能實(shí)時(shí)展現(xiàn)到界面。
2.知識(shí)剖析
一，如何綁定
如果我們自己實(shí)現(xiàn)雙向數(shù)據(jù)綁定該怎么寫?大家可以自己嘗試寫一下，使用原生實(shí)現(xiàn)雙向綁定，我的demo如下。
二，MVVM
眾所周知，angular是一個(gè)MVVM（Model-View，View-Model）模式的框架，可以實(shí)現(xiàn)數(shù)據(jù)和視圖數(shù)據(jù)綁定。MVVM把數(shù)據(jù)加工的任務(wù)從Controller中解放了出來。使得Controller只需專注于數(shù)據(jù)調(diào)配的工作。
View是angularjs編譯html后呈現(xiàn)出來的，需要編譯的是controller中的定義的屬性和方法以及directive中定義的指令。View和controller是獨(dú)立開來的，他們之間的紐帶就是圖中間的膠水——scope。
Controller負(fù)責(zé)向scope中提供屬性和方法，便于和view層面的html進(jìn)行交互。
三，如何實(shí)現(xiàn)
Angular雙向綁定通過$watch,$digest，$apply實(shí)現(xiàn)的。
a.watch序列
watch監(jiān)控model中是否有變化，會(huì)記錄last值，也就是改變后的值，每一個(gè)model都會(huì)增加一個(gè)watch到watch隊(duì)列中。
b.digest循環(huán)
當(dāng)瀏覽器接收到可以被angular context處理的事件時(shí)，$digest循環(huán)就會(huì)觸發(fā)，這個(gè)循環(huán)有兩個(gè)子循環(huán)，一個(gè)處理evalAsync隊(duì)列，另一個(gè)處理watch隊(duì)列，$digest會(huì)遍歷$watch,然后詢問：
既然所有的$watch都檢查完了，那就要問了：有沒有$watch更新過？如果有至少一個(gè)更新過，這個(gè)循環(huán)就會(huì)再次觸發(fā)，直到所有的$watch都沒有變化。這樣就能夠保證每個(gè)model都已經(jīng)不會(huì)再變化。記住如果循環(huán)超過10次的話，它將會(huì)拋出一個(gè)異常，防止無限循環(huán)。 當(dāng)$digest循環(huán)結(jié)束時(shí)，DOM相應(yīng)地變化。
這個(gè)就是所謂的dirty-check，angular實(shí)際會(huì)引入了一個(gè)初始值為false的dirty變量作為循環(huán)條件，如果有改變過（也就是新舊值不相等），dirty變?yōu)閠rue，循環(huán)繼續(xù)。這里很重要的（也是許多人的很蛋疼的地方）是每一個(gè)進(jìn)入angular context的事件都會(huì)執(zhí)行一個(gè)$digest循環(huán)，也就是說每次我們輸入一個(gè)字母循環(huán)都會(huì)檢查整個(gè)頁面的所有$watch。
c.$apply
那是什么決定一個(gè)事件是否進(jìn)入angular context呢？
答案是$apply
我之前碰到過在angular中使用普通的事件，無法雙向綁定的事情。
app.directive('clickable', function() {
return {
restrict: "E",
scope: false,
template: '
{{foo}}
{{bar}}
',
link: function(scope, element, attrs) {
element.bind('click', function() {
scope.foo++;
});
}
}
});
app.controller('MainCtrl', function($scope) {
$scope.foo = 0;
});
這里值雖然改變了，但是沒有強(qiáng)制執(zhí)行$degest,監(jiān)視foo和bar的watch根本沒有執(zhí)行，執(zhí)行一次apply之后，watch就會(huì)知道這些變化，更新dom了。這里只需要加上scope.$apply()就行了。一般帶ng的事件angular都會(huì)給你自動(dòng)添加好了apply，所以你要操縱事件的時(shí)候加上aplly才能實(shí)現(xiàn)數(shù)據(jù)輸出到view層中。
3.常見問題
$digest和$apply有何區(qū)別？干嘛不直接使用$digest?
4.解決方案
1.$apply可以帶參數(shù)，它可以接受一個(gè)函數(shù)，然后在應(yīng)用數(shù)據(jù)之后，調(diào)用這個(gè)函數(shù)。
2.當(dāng)調(diào)用$digest的時(shí)候，只觸發(fā)當(dāng)前作用域和它的子作用域上的監(jiān)控，但是當(dāng)調(diào)用$apply的時(shí)候，會(huì)觸發(fā)作用域樹上的所有監(jiān)控。詳情見如下demo。
5.更多討論
angular context是什么？
6.參考文獻(xiàn)
1.view和controller的那些事兒
2.Angular沉思錄（一）數(shù)據(jù)綁定
3.理解$watch ，$apply 和 $digest --- 理解數(shù)據(jù)綁定過程
7.鳴謝
謝謝大家觀看
BY : 劉天云 |李維文
PPT鏈接：https://ptteng.github.io/PPT/PPT/JS-08-AngularBind.html#/
視頻鏈接：
技能樹.IT修真院
“我們相信人人都可以成為一個(gè)工程師，現(xiàn)在開始，找個(gè)師兄，帶你入門，掌控自己學(xué)習(xí)的節(jié)奏，學(xué)習(xí)的路上不再迷?！?。
這里是技能樹.IT修真院，成千上萬的師兄在這里找到了自己的學(xué)習(xí)路線，學(xué)習(xí)透明化，成長(zhǎng)可見化，師兄1對(duì)1免費(fèi)指導(dǎo)。快來與我一起學(xué)習(xí)吧 ！
