angular之中，$state$watch$scope$rootScope分別是什么贯涎？
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?分享人：聶義中
目錄
1.背景介紹
2.知識剖析
3.常見問題
4.解決方案
5.編碼實戰(zhàn)
6.擴展思考
7.參考文獻
8.更多討論
1.背景介紹
在平時的編碼中听哭，我們總會想著有什么方法能夠簡化我們的工作流程，讓我們只專心于業(yè)務邏輯和數(shù)據(jù)的處理塘雳，而angularjs
就為我們程序員實現(xiàn)了這一點陆盘。AngularJS有著諸多特性，最為核心的是：MVC败明、模塊化隘马、自動化雙向數(shù)據(jù)綁定、語義化標簽妻顶、依賴注入等等酸员。下面，我們將要討論的就是angularJS里面的$scope$rootScope$watch和$state
2.知識剖析
作用域
我們可以把angularJs里面的作用域看做為一個容器讳嘱，在控制器中我們可以訪問這個容器我們可以往這個容器中放入一些模型數(shù)據(jù)幔嗦，在視圖中我們可以通過表達式將數(shù)據(jù)展示給用戶。作用域是應用在HTML(視圖)和JavaScript(控制器)之間的紐帶沥潭，他是一個對象崭添，有可用的方法和屬性，可應用在視圖和控制器上叛氨。
$rootScope與$scope
【1】當angularJS遇到ng-app指令的時候就會自動生成一個名為$rootScope的作用域呼渣，該作用域就是就是angularJS的根作用域。$rootScope就相當于一個全局作用域寞埠，所以我們保存在其中的東西是全局性的屁置，在任一controller之中都能夠使用
【2】當angularJS遇到controller或者一些自定義指令的時候也會自動的生成一個名為$scope的作用域scope是html和單個controller之間的橋梁，數(shù)據(jù)綁定就靠他了仁连。
【3】$scope都是$rootScope的子作用域蓝角。
$watch
相信使用過angularjs的同學都知道，ng中有個比較重要的特點饭冬，叫做雙向綁定使鹅，那么這個雙向綁定是如何實現(xiàn)的呢？當我們在對綁定的name屬性進行修改的時候昌抠，angular內(nèi)部的$digest循環(huán)級會執(zhí)行一次患朱，他執(zhí)行的內(nèi)容是檢查我們的$scope作用域的內(nèi)容與上次執(zhí)行$digest循環(huán)的時候是否有變化，若有變化就執(zhí)行$watch()方法綁定的處理函數(shù)炊苫。從而達到了監(jiān)聽作用域?qū)傩缘男Ч?/p>
$watch(watchExpression,listener,objectEquality);
watchExpression,需要監(jiān)控的表達式
listener,處理函數(shù)裁厅，函數(shù)參數(shù)如下function(newValue,oldValue,scope)
objectEquality,是否深度監(jiān)聽，如果設置為true,它告訴Angular檢查所監(jiān)控的對象中每一個屬性的變化.如果你希望監(jiān)控數(shù)組的個別元素或者對象的屬性而不是一個普通的值,那么你應該使用它
$state
在ajax技術發(fā)展普及之后侨艾，因為其不會留下歷史記錄方便瀏覽器訪問和對于seo不友好的特點执虹，一個新技術應運而生：路由，$state就是路由中的一項服務唠梨。
$state.go()
$state.go()方法可以產(chǎn)生與a鏈接一樣的效果袋励，可以將此方法綁定給一個button按鈕，然后在按鈕的點擊事件中國執(zhí)行$state.go()当叭，就可以跳轉(zhuǎn)到相應的頁面茬故。
$stateParams狀態(tài)參數(shù)在上面提及使用$stateparams來提取在url中的不同參數(shù)。該服務的作用是處理url的不同部分科展。例如均牢，當上述的inbox狀態(tài)是這樣時：url:'/inbox/:inboxId/messages/{sorted}?from&to'//當用戶訪問者鏈接時：'/inbox/123/messages/ascending?from=10&to=20'
$stateParams對象的值為：{inboxId:'123',sorted:'ascending',from:10,to:20}
詳細講解
3.常見問題
watch的深度監(jiān)聽是什么意思呢？有什么優(yōu)缺點呢才睹？
4.解決方案
$watch在對待原始類型和引用類型會有不同的處理方式徘跪，這就要首先說一說$watch函數(shù)的第三個參數(shù)。在前面的例子中琅攘，我們知道垮庐，$watch函數(shù)有接收兩個參數(shù)，第一個參數(shù)是需要監(jiān)視的對象坞琴，第二個參數(shù)是在監(jiān)視對象發(fā)生變化時需要調(diào)用的函數(shù)哨查，實際上$watch還有第三個參數(shù)，它在默認情況下是false剧辐。在默認情況下寒亥，即不顯式指明第三個參數(shù)或者將其指明為false時邮府，我們進行的監(jiān)視叫做“引用監(jiān)視”。引用監(jiān)視的原詞的“referencewatch”溉奕，它的意思是只要監(jiān)視的對象引用沒有發(fā)生變化褂傀，就不算它發(fā)生了變化。具體來說加勤，在上面的例子中仙辟，只要是items的引用沒有發(fā)生變化，就算items中的一些屬性發(fā)生了變化鳄梅，$watch也會當做沒有看見叠国。
如果我們將$watch的第三個變量設置為true，那么此時我們進行的監(jiān)視叫做“全等監(jiān)視”戴尸，原詞是“equalitywatch”粟焊。此時，只要$watch的對象有一點風吹草動校赤，它馬上就跳出來
既然全等監(jiān)視這么好吆玖，那么我們?yōu)槭裁床恢苯佑萌缺O(jiān)視呢？當然马篮，任何事情都有好的壞的兩個方面沾乘，全等監(jiān)視固然是好，但是它在運行時需要先遍歷整個監(jiān)視對象浑测，然后在每次$digest之前使用angular.copy()將整個對象深拷貝一遍然后在運行之后用angular.equal()將前后的對象進行對比翅阵，上面的例子中因為items比較簡單，因此可能性能上不會有什么差別迁央，但是到了實際生產(chǎn)時掷匠，我們要面對的數(shù)據(jù)千千萬萬，可能因為全等監(jiān)視這一個設置就會消耗大量的資源岖圈，讓應用停滯不前
5.編碼實戰(zhàn)
6.擴展思考
7.參考文獻
參考一：深度理解scope
參考二：原始數(shù)據(jù)類型和對象類型的區(qū)別及深度拷貝解析
8.更多討論
1 作用域的繼承方式是什么讹语？
答：? ? ? ?angular里面的作用域是通過原型鏈的方式來實現(xiàn)繼承的。
2? $watch臟檢測原理
? 答：? ? ?scope通過$watch方法向this.$$watchers數(shù)組中添加watcher對象(包含watchFn, listenerFn, valueEq, last 四個屬性)蜂科。每當$digest循環(huán)被觸發(fā)時顽决，它會遍歷$$watchers數(shù)組，執(zhí)行watcher中的watchFn导匣，獲取當前scope上某屬性的值(一個watcher對應scope上一個被監(jiān)聽屬性)才菠，然后去同watcher中的last(上一次的值)做比較，若兩值不相等贡定，就執(zhí)行l(wèi)istenerFn赋访。
3 怎么定義或修改$rootScope作用域的屬性和方法
?答：? ? ? ?可以將 $rootScope 注入到任何一個控制器的function（）里面，然后在該方法里面就可以定義$rootScope的屬性和方法。
鳴謝
感謝大家觀看
BY:聶義中
