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