大家好，我是IT修真院北京分院第23期的學(xué)員郭婷婷洋闽，一枚正直純潔善良的WEB前端程序員玄柠。
今天給大家分享一下，ANGULAR之中喊递，$STATE $WATCH $SCOPE $ROOTSCOPE 分別是什么随闪？
分享人：郭婷婷
1.背景介紹
? ? ? ?在平時(shí)的編碼中，我們總會(huì)想著有什么方法能夠簡化我們的工作流程骚勘，讓我們只專心于業(yè)務(wù)邏輯和數(shù)據(jù)的處理铐伴，而angularjs 就為我們程序員實(shí)現(xiàn)了這一點(diǎn)。$scope $rootScope $watch 和 $state就是里面的幾個(gè)方法俏讹，今天著重跟大家討論一下這 幾個(gè)方法
2.知識(shí)剖析
$SCOPE
? ? ? ?$scope在angularjs中当宴，你可以把它理解成作用域，每個(gè)不同的controller泽疆，都具有它不同的作用域户矢，所以 controller不同，他們的scope是不同的殉疼，那么梯浪，如果我們想象js那樣，做一個(gè)全局變量該怎么辦呢瓢娜？這就要說 到rootScope了挂洛。
$ROOTSCOPE
? ? ? ?$rootScope是由angularJS加載模塊的時(shí)候自動(dòng)創(chuàng)建的，每個(gè)模塊只會(huì)有1個(gè)rootScope;
? ? ? ?$rootScope就相當(dāng)于一個(gè)全局作用域眠砾，所以我們保存在其中的東西是全局性的虏劲，在任一controller之中都能夠使用
? ? ? ?scope是html和單個(gè)controller之間的橋梁，數(shù)據(jù)綁定就靠他了。rootscope是各個(gè)controller中scope的橋梁柒巫。 用rootscope定義的值励堡，可以在各個(gè)controller中使用。
$WATCH
? ? ? ?相信使用過angularjs的同學(xué)都知道堡掏，ng中有個(gè)比較重要的特點(diǎn)应结，叫做雙向綁定，那么這個(gè)雙向綁定是如何實(shí)現(xiàn)的呢泉唁？ 當(dāng)我們在創(chuàng)建出scope下的一個(gè)新屬性的時(shí)候摊趾，ng就會(huì)主動(dòng)為我們新屬性加上$watch這個(gè)方法，這個(gè)方法會(huì)監(jiān)聽我們 的數(shù)據(jù)變化游两，當(dāng)數(shù)據(jù)變化之后，就立即把view和scope上數(shù)據(jù)同步漩绵。
? ? ? ?雖然angular會(huì)為每一個(gè)ng-model添加一個(gè)$watch事件贱案，但我們還可以定義自己的$watch，所以需要了解一下$watch的用法止吐；
$watch(watchExpression, listener, objectEquality);
watchExpression:監(jiān)聽的對象宝踪，它可以是一個(gè)angular表達(dá)式如'name',或函數(shù)如function();注意如果是函數(shù)的話，需要加上（）不能只寫函數(shù)名碍扔；
listener:當(dāng)watchExpression變化時(shí)會(huì)被調(diào)用的函數(shù)或者表達(dá)式,它接收3個(gè)參數(shù)：newValue(新值), oldValue(舊值), scope(作用域的引用)
objectEquality,是否深度監(jiān)聽瘩燥，如果設(shè)置為true,它告訴Angular檢查所監(jiān)控的對象中每一個(gè)屬性的變化. 如果你希望監(jiān)控?cái)?shù)組的個(gè)別元素或者對象的屬性而不是一個(gè)普通的值, 那么你應(yīng)該使用它
3.常見問題
watch的深度監(jiān)聽是什么意思呢？有什么優(yōu)缺點(diǎn)呢不同？
4.解決方案
? ? ? $watch在對待基本類型和引用類型會(huì)有不同的處理方式厉膀，這就要首先說一說$watch函數(shù)的第三個(gè)參數(shù)。它在默認(rèn)情況下是false二拐。在默認(rèn)情況下服鹅，即不顯式指明第三個(gè)參數(shù)或者將其指明為false時(shí)，我們進(jìn)行的監(jiān)視叫做“引用監(jiān)視”百新。引用監(jiān)視的原詞的“reference watch”企软，它的意思是只要監(jiān)視的對象引用沒有發(fā)生變化，就不算它發(fā)生了變化饭望。具體來說仗哨，在上面的例子中，只要是items的引用沒有發(fā)生變化铅辞，就算items中的一些屬性發(fā)生了變化厌漂，$watch也會(huì)當(dāng)做沒有看見。如果我們將$watch的第三個(gè)變量設(shè)置為true巷挥，那么此時(shí)我們進(jìn)行的監(jiān)視叫做“全等監(jiān)視”桩卵，原詞是“equality watch”。此時(shí)，只要$watch的對象有一點(diǎn)風(fēng)吹草動(dòng)雏节，它馬上就跳出來
? ? ? ?既然全等監(jiān)視這么好胜嗓，那么我們?yōu)槭裁床恢苯佑萌缺O(jiān)視呢？當(dāng)然钩乍，任何事情都有好的壞的兩個(gè)方面辞州，全等監(jiān)視固然是好，但是它在運(yùn)行時(shí)需要先遍歷整個(gè)監(jiān)視對象寥粹，然后在每次$digest之前使用angular.copy()將整個(gè)對象深拷貝一遍然后在運(yùn)行之后用angular.equal()將前后的對象進(jìn)行對比变过，但是到了實(shí)際生產(chǎn)時(shí)，我們要面對的數(shù)據(jù)千千萬萬涝涤，可能因?yàn)槿缺O(jiān)視這一個(gè)設(shè)置就會(huì)消耗大量的資源媚狰，讓應(yīng)用停滯不前
5.編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
怎么取消$watch，為什么取消阔拳？
$watch的性能消耗較大崭孤，所以對于已經(jīng)不需要監(jiān)視的watch，記得定時(shí)取消掉糊肠。
7.參考文獻(xiàn)
參考一：Angular.js中使用$watch監(jiān)聽模型變化
參考二：關(guān)于$watch應(yīng)用的一些小技巧
8.更多討論
鳴謝
感謝大家觀看
BY : 湯特/郭婷婷
PPT鏈接：https://ptteng.github.io/PPT/PPT/js-05-$watch.html
視頻鏈接: https://pan.baidu.com/s/1hs5rExI 密碼: gm2z
--------------------------------------------------------------------------------------------------------------------
技能樹.IT修真院
“我們相信人人都可以成為一個(gè)工程師辨宠，現(xiàn)在開始，找個(gè)師兄货裹，帶你入門嗤形，掌控自己學(xué)習(xí)的節(jié)奏，學(xué)習(xí)的路上不再迷没≡玻”赋兵。
這里是技能樹.IT修真院，成千上萬的師兄在這里找到了自己的學(xué)習(xí)路線墓阀，學(xué)習(xí)透明化毡惜，成長可見化，師兄1對1免費(fèi)指導(dǎo)斯撮【铮快來與我一起學(xué)習(xí)吧?！
