理解雙向繫結
這裡是修真院前端小課堂，每篇分享文從
【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴充套件思考】【更多討論】【參考文獻】
八個方面深度解析前端知識/技能，本篇分享的是：
【 理解雙向繫結】
大家好，我是IT修真院北京分院第20期的學員王野，一枚正直純潔善良的程式設計師
今天給大家分享一下，修真院官網JS任務4，深度思考中的知識點——
ANGULARJS雙向繫結後，發生了什麼事情？是什麼可以讓VIEW層和CONTROLLER層進行繫結的？
一、背景介紹
Angular實現了雙向繫結機制
所謂的雙向繫結，無非是從介面的操作能實時反映到資料，資料的變更能實時展現到介面
二、知識剖析
如何實現雙向繫結
簡單的雙向繫結
實現原理
眾所周知，angular是一個MVVM（Model-View，View-Model）模式的框架，可以實現資料和檢視資料繫結。MVVM把資料加工的任務從Controller中解放了出來。使得Controller只需專注於資料調配的工作。
View是angularjs編譯html後呈現出來的，需要編譯的是controller中的定義的屬性和方法以及directive中定義的指令。
View和controller是獨立開來的，他們之間的紐帶就是圖中間的膠水——scope。Controller負責向scope中提供屬性和方法，便於和view層面的html進行互動。
Angular雙向繫結通過$watch,$digest，$apply實現的。
watch序列
watch監控model中是否有變化，會記錄last值，也就是改變後的值，每一個model都會增加一個watch到watch佇列中。
digest迴圈
當瀏覽器接收到可以被angular context處理的事件時，$digest迴圈就會觸發，這個迴圈有兩個子迴圈，一個處理evalAsync佇列，另一個處理watch佇列，$digest會遍歷$watch,然後詢問
何時觸發髒值檢查
DOM事件，譬如使用者輸入文字，點選按鈕等。(ng-click)
XHR響應事件 ($http)
瀏覽器Location變更事件 ($location)
Timer事件($timeout, $interval)
執行$digest()或$apply()
既然所有的$watch都檢查完了，那就要問了：有沒有$watch更新過？如果有至少一個更新過，這個迴圈就會再次觸發，直到所有的$watch都沒有變化。這樣就能夠保證每個model都已經不會再變化。記住如果迴圈超過資料最大長度的話，它將會丟擲一個異常，防止無限迴圈。 當$digest迴圈結束時，DOM相應地變化。
這個就是所謂的dirty-check，angular實際會引入了一個初始值為false的dirty變數作為迴圈條件，如果有改變過（也就是新舊值不相等），dirty變為true，迴圈繼續。這裡很重要的（也是許多人的很蛋疼的地方）是每一個進入angular context的事件都會執行一個$digest迴圈，也就是說每次我們輸入一個字母迴圈都會檢查整個頁面的所有$watch。
那是什麼決定一個事件是否進入angular context呢？
答案是$apply
在angular中使用普通的事件，無法雙向繫結的事情。
這裡值雖然改變了，但是沒有強制執行$degest,監視foo和bar的watch根本沒有執行，執行一次apply之後，watch就會知道這些變化，更新dom了。
這裡只需要加上scope.$apply()就行了。
一般帶ng的事件angular都會給你自動新增好了apply，所以你要操縱事件的時候加上aplly才能實現資料輸出到view層中。
三、常見問題
$digest和$apply有何區別？幹嘛不直接使用$digest?
四、解決方法
1.$apply可以帶引數，它可以接受一個函式，然後在應用資料之後，呼叫這個函式。
2.當呼叫$digest的時候，只觸發當前作用域和它的子作用域上的監控，但是當呼叫$apply的時候，會觸發作用域樹上的所有監控。
五.更多討論
1、$watch是迴圈觸發的嗎？
不會，只有當觸發了了特定時間才會觸發$watch，並不是按時間輪詢觸發
2、雙向繫結有什麼作用
雙向繫結最大的好處是我們不再需要用jQuery去查詢表單的狀態，而是直接獲得了用JavaScript物件表示的Model。
3、可以手動設定$apply的執行嗎
可以的，angular裡可以直接呼叫$applay（）方法實現
ANGULAR雙向繫結怎麼實現的
六、參考連結
view和controller的那些事兒Angular沉思錄（一）資料繫結
理解$watch ，$apply 和 $digest --- 理解資料繫結過程
------------------------------------------------------------------------------------------------------------------------
技能樹.IT修真院
“我們相信人人都可以成為一個工程師，現在開始，找個師兄，帶你入門，掌控自己學習的節奏，學習的路上不再迷茫”。
這裡是技能樹.IT修真院，成千上萬的師兄在這裡找到了自己的學習路線，學習透明化，成長可見化，師兄1對1免費指導。快來與我一起學習吧 ！
作者：吥好使
連結：https://www.jianshu.com/p/e715ff2d422e
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。
更多內容，可以加入IT交流群565734203與大家一起討論交流
這裡是技能樹·IT修真院：https://www.jnshu.com，初學者轉行到網際網路的聚集地