大家好，我是IT修真院北京分院第27期學員，一枚正直善良的前端程序員今天跟大家分享一下前端知識點。
今天講下深度思考中的知識點
————angular之中，$state $watch $scope $rootScope 分別是什么？
1.背景介紹
在平時的編碼中，我們總會想著有什么方法能夠簡化我們的工作流程，讓我們只專心于業務邏輯和數據的處理，而angularjs就為我們程序員實現了這一點。$scope $rootScope $watch 和 $state就是里面的幾個方法，今天著重跟大家討論一下這幾個方法。
2.知識剖析
$scope
$scope在angularjs中，你可以把它理解成作用域，每個不同的controller，都具有它不同的作用域，所以controller不同，他們的scope是不同的，那么，如果我們想象js那樣，做一個全局變量該怎么辦呢？這就要說到rootScope了。
$rootScope
$rootScope是由angularJS加載模塊的時候自動創建的，每個模塊只會有1個rootScope;
$rootScope就相當于一個全局作用域，所以我們保存在其中的東西是全局性的，在任一controller之中都能夠使用scope是html和單個controller之間的橋梁，數據綁定就靠他了。rootscope是各個controller中scope的橋梁。用rootscope定義的值，可以在各個controller中使用。
$watch
相信使用過angularjs的同學都知道，ng中有個比較重要的特點，叫做雙向綁定，那么這個雙向綁定是如何實現的呢？當我們在創建出scope下的一個新屬性的時候，ng就會主動為我們新屬性加上$watch這個方法，這個方法會監聽我們的數據變化，當數據變化之后，就立即把view和scope上數據同步。雖然angular會為每一個ng-model添加一個$watch事件，但我們還可以定義自己的$watch，所以需要了解一下$watch的用法；
$watch(watchExpression, listener, objectEquality);
watchExpression:監聽的對象，它可以是一個angular表達式如'name',或函數如function();注意如果是函數的話，需要加上（）不能只寫函數名；listener:當watchExpression變化時會被調用的函數或者表達式,它接收3個參數：newValue(新值), oldValue(舊值), scope(作用域的引用)。objectEquality,是否深度監聽，如果設置為true,它告訴Angular檢查所監控的對象中每一個屬性的變化. 如果你希望監控數組的個別元素或者對象的屬性而不是一個普通的值, 那么你應該使用它。
$state
$state是路由中的一項服務,簡單來說就是給路由一個對應的狀態，讓其根據不同的狀態加載不同的頁面；
$stateParams
$stateParams是一個對象，包含 url 中每個參數的鍵/值。$stateParams可以為控制器或者服務提供 url 的各個部分。注意：$stateParams必須與一個控制器相關，并且$stateParams中的“鍵/值”也必須事先在那個控制器的url屬性中有定義。
3.常見問題
watch的深度監聽是什么意思呢？有什么優缺點呢？
4.解決方案
$watch在對待基本類型和引用類型會有不同的處理方式，這就要首先說一說$watch函數的第三個參數。它在默認情況下是false。在默認情況下，即不顯式指明第三個參數或者將其指明為false時，我們進行的監視叫做“引用監視”。引用監視的原詞的“reference? watch”，它的意思是只要監視的對象引用沒有發生變化，就不算它發生了變化。具體來說，在上面的例子中，只要是items的引用沒有發生變化，就算items中的一些屬性發生了變化，$watch也會當做沒有看見。
如果我們將$watch的第三個變量設置為true，那么此時我們進行的監視叫做“全等監視”，原詞是“equality watch”。此時，只要$watch的對象有一點風吹草動，它馬上就跳出來。既然全等監視這么好，那么我們為什么不直接用全等監視呢？當然，任何事情都有好的壞的兩個方面，全等監視固然是好，但是它在運行時需要先遍歷整個監視對象，然后在每次$digest之前使用angular.copy()將整個對象深拷貝一遍然后在運行之后用angular.equal()將前后的對象進行對比，但是到了實際生產時，我們要面對的數據千千萬萬，可能因為全等監視這一個設置就會消耗大量的資源，讓應用停滯不前
5.擴展思考
怎么取消$watch，為什么取消？
$watch的性能消耗較大，所以對于已經不需要監視的watch，記得定時取消掉。
6.參考文獻
參考二：關于$watch應用的一些小技巧
參考三： AngularJS $watch用法
7.更多討論
Q1：提問人：陳樹威
A1：回答人：李浩
回答：這個比較詳細的介紹了原理；
構建自己的AngularJS，第一部分：Scope和Digest
https://github.com/xufei/Make-Your-Own-AngularJS/blob/master/01.md
Q2：提問人：張峻
A2：回答人：李浩
回答：
Q3：提問人：梁耀
A3：回答人：李浩
回答：$state.params里的params是自己定義的，可以寫成listParams，optionparams等
$stateParams是angular定義的固定寫法；
個人拙見，多多指教
感謝閱讀
github-PPT鏈接
https://ptteng.github.io/WEB/ppt/js-7-$state$watch$scope$rootscopeseelee.html
騰訊視頻鏈接
https://v.qq.com/x/page/a0525z176nr.html
-----------------------------------------------------------------------------------------------------------------------------------
人生苦短，想學Python。
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
