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