大家好，我是IT修真院成都分院第3期的學(xué)員王奎智，一枚正直純潔善良的WEB前端程序員。
今天給大家分享一下，修真院官網(wǎng)JS任務(wù)8，ANGULARJS雙向綁定后，發(fā)生了什么事情？是什么可以讓VIEW層和CONTROLLER層進(jìn)行綁定的？
1.背景介紹
Angular實(shí)現(xiàn)了雙向綁定機(jī)制
所謂的雙向綁定，無非是從界面的操作能實(shí)時反映到數(shù)據(jù)，數(shù)據(jù)的變更能實(shí)時展現(xiàn)到界面
2.如何綁定
如果讓我們自己實(shí)現(xiàn)雙向綁定該怎么寫：
3.如何實(shí)現(xiàn)
眾所周知，angular是一個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)行交互。
Angular雙向綁定通過watch,digest和apply實(shí)現(xiàn)的。
watch序列
watch監(jiān)控model中是否有變化，會記錄last值，也就是改變后的值，每一個model都會增加一個watch到watch隊(duì)列中。
digest循環(huán)
當(dāng)瀏覽器接收到可以被angular context處理的事件時，digest循環(huán)就會觸發(fā)，這個循環(huán)有兩個子循環(huán)，一個處理evalAsync隊(duì)列，另一個處理watch隊(duì)列，digest會遍歷watch,然后詢問：
既然所有的watch都檢查完了，那就要問了：有沒有watch更新過？如果有至少一個更新過，這個循環(huán)就會再次觸發(fā)，直到所有的watch都沒有變化。這樣就能夠保證每個model都已經(jīng)不會再變化。記住如果循環(huán)超過10次的話，它將會拋出一個異常，防止無限循環(huán)。 當(dāng)digest循環(huán)結(jié)束時，DOM相應(yīng)地變化。
這個就是所謂的dirty-check，angular實(shí)際會引入了一個初始值為false的dirty變量作為循環(huán)條件，如果有改變過（也就是新舊值不相等），dirty變?yōu)閠rue，循環(huán)繼續(xù)。這里很重要的（也是許多人的很蛋疼的地方）是每一個進(jìn)入angular context的事件都會執(zhí)行一個digest循環(huán)，也就是說每次我們輸入一個字母循環(huán)都會檢查整個頁面的所有watch。
那是什么決定一個事件是否進(jìn)入angular context呢？
答案是apply
我之前碰到過在angular中使用普通的事件，無法雙向綁定的事情：
這里值雖然改變了，但是沒有強(qiáng)制執(zhí)行$degest,監(jiān)視foo的watch根本沒有執(zhí)行，執(zhí)行一次apply之后，watch就會知道這些變化，更新dom了。
這里只需要加上scope.$apply()就行了。
一般帶ng的事件angular都會給你自動添加好了apply，所以你要操縱事件的時候加上apply才能實(shí)現(xiàn)數(shù)據(jù)輸出到view層中。
4.常見問題
digest和apply有何區(qū)別？干嘛不直接使用digest?
5.解決方法
1.apply可以帶參數(shù)，它可以接受一個函數(shù)，然后在應(yīng)用數(shù)據(jù)之后，調(diào)用這個函數(shù)。
2.當(dāng)調(diào)用digest的時候，只觸發(fā)當(dāng)前作用域和它的子作用域上的監(jiān)控，但是當(dāng)調(diào)用apply的時候，會觸發(fā)作用域樹上的所有監(jiān)控。
請看這個例子：
6.擴(kuò)展思考
7.參考文獻(xiàn)
參考一：Angular中文社區(qū)
參考二：杰鍋鍋的博客
8.更多討論
問題一：為什么例五里面自定義指令需要調(diào)用$apply方法？是不是自定義指令都不具備$apply方法？
答：不是。不是因?yàn)樽远x指令本身不具有$apply方法，因?yàn)閑lement.on（“click”，function{}）這實(shí)際上是一個jQuery方法，而jQuery是不具備$apply方法的。如果我們把scope.b++使用一個angular方法去觸發(fā)，是不用調(diào)用$apply就可以觸發(fā)的。
問題二：前文提到的循環(huán)十次會拋出異常，是指什么？
是指在一個ng-指令（本身已經(jīng)自帶$apply方法）內(nèi)部再次調(diào)用$apply方法，就會拋出異常。這實(shí)際上是angular的保護(hù)機(jī)制。
問題三：dirty-checking這么復(fù)雜，會不會速度很慢？
不會的，實(shí)際上運(yùn)行的很快。而且在ES6普及后，angular的未來版本會加入Object.observe，$digest循環(huán)的速度會更快。
鳴謝
感謝大家觀看
今天的分享就到這里啦，歡迎大家點(diǎn)贊、轉(zhuǎn)發(fā)、留言、拍磚~
你可以直接點(diǎn)擊此鏈接與我一起學(xué)習(xí)：修真院
