ANGULAR之中,$STATE $WATCH $SCOPE $ROOTSCOPE 分別是什么?

大家好,我是IT修真院北京分院第23期的學員郭婷婷,一枚正直純潔善良的WEB前端程序員。

今天給大家分享一下,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檢查所監控的對象中每一個屬性的變化. 如果你希望監控數組的個別元素或者對象的屬性而不是一個普通的值, 那么你應該使用它

3.常見問題

watch的深度監聽是什么意思呢?有什么優缺點呢?

4.解決方案

? ? ? $watch在對待基本類型和引用類型會有不同的處理方式,這就要首先說一說$watch函數的第三個參數。它在默認情況下是false。在默認情況下,即不顯式指明第三個參數或者將其指明為false時,我們進行的監視叫做“引用監視”。引用監視的原詞的“reference watch”,它的意思是只要監視的對象引用沒有發生變化,就不算它發生了變化。具體來說,在上面的例子中,只要是items的引用沒有發生變化,就算items中的一些屬性發生了變化,$watch也會當做沒有看見。如果我們將$watch的第三個變量設置為true,那么此時我們進行的監視叫做“全等監視”,原詞是“equality watch”。此時,只要$watch的對象有一點風吹草動,它馬上就跳出來

? ? ? ?既然全等監視這么好,那么我們為什么不直接用全等監視呢?當然,任何事情都有好的壞的兩個方面,全等監視固然是好,但是它在運行時需要先遍歷整個監視對象,然后在每次$digest之前使用angular.copy()將整個對象深拷貝一遍然后在運行之后用angular.equal()將前后的對象進行對比,但是到了實際生產時,我們要面對的數據千千萬萬,可能因為全等監視這一個設置就會消耗大量的資源,讓應用停滯不前

5.編碼實戰

6.擴展思考

怎么取消$watch,為什么取消?

$watch的性能消耗較大,所以對于已經不需要監視的watch,記得定時取消掉。

7.參考文獻

參考一:Angular.js中使用$watch監聽模型變化

參考二:關于$watch應用的一些小技巧

參考三:AngularJS $watch用法

8.更多討論

鳴謝

感謝大家觀看

BY : 湯特/郭婷婷

PPT鏈接:https://ptteng.github.io/PPT/PPT/js-05-$watch.html

視頻鏈接: https://pan.baidu.com/s/1hs5rExI 密碼: gm2z

--------------------------------------------------------------------------------------------------------------------

技能樹.IT修真院

“我們相信人人都可以成為一個工程師,現在開始,找個師兄,帶你入門,掌控自己學習的節奏,學習的路上不再迷?!?。

這里是技能樹.IT修真院,成千上萬的師兄在這里找到了自己的學習路線,學習透明化,成長可見化,師兄1對1免費指導??靵砼c我一起學習吧?!

猛戳這里

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容