angular之中,$state $watch $scope $rootScope 分別是什么观蜗?

本人是腹黑 優(yōu)雅的程序員一小枚~~~~~~

angular之中臊恋,$state $watch $scope $rootScope 分別是什么?

1.背景介紹

在平時的編碼中墓捻,我們總會想著有什么方法能夠簡化我們的工作流程抖仅,讓我們只專心于業(yè)務(wù)邏輯和數(shù)據(jù)的處理,而angularjs 就為我們程序員實現(xiàn)了這一點砖第。$scope $rootScope $watch 和 $state就是里面的幾個方法撤卢,今天著重跟大家討論一下這 幾個方法

2.知識剖析

(1)$scope

$scope在angularjs中,你可以把它理解成作用域梧兼,每個不同的controller放吩,都具有它不同的作用域,所以 controller不同羽杰,他們的scope是不同的渡紫,

當你在 AngularJS 創(chuàng)建控制器時到推,你可以將 $scope 對象當作一個參數(shù)傳遞:

{{carname}}

當在控制器中添加 $scope 對象時,視圖 (HTML) 可以獲取了這些屬性惕澎。 視圖中莉测,你不需要添加 $scope 前綴, 只需要添加屬性名即可,如: {{carname}}集灌。 如果我們想象js那樣,做一個全局變量該怎么辦呢复哆?這就要說 到rootScope了欣喧。

(2)$rootScope

$rootScope是由angularJS加載模塊的時候自動創(chuàng)建的,每個模塊只會有1個rootScope;

$rootScope就相當于一個全局作用域梯找,所以我們保存在其中的東西是全局性的唆阿,在任一controller之中都能夠使用

scope是html和單個controller之間的橋梁,數(shù)據(jù)綁定就靠他了锈锤。rootscope是各個controller中scope的橋梁驯鳖。 用rootscope定義的值,可以在各個controller中使用久免。

(3)$watch:

相信使用過angularjs的同學(xué)都知道浅辙,ng中有個比較重要的特點,叫做雙向綁定阎姥,那么這個雙向綁定是如何實現(xiàn)的呢记舆? 當我們在創(chuàng)建出scope下的一個新屬性的時候,ng就會主動為我們新屬性加上$watch這個方法呼巴,這個方法會監(jiān)聽我們 的數(shù)據(jù)變化泽腮,當數(shù)據(jù)變化之后,就立即把view和scope上數(shù)據(jù)同步衣赶。

雖然angular會為每一個ng-model添加一個$watch事件诊赊,但我們還可以定義自己的$watch,所以需要了解一下$watch的用法府瞄;

$watch(watchExpression, listener, objectEquality);

watchExpression,需要監(jiān)控的表達式

listener,處理函數(shù)碧磅,函數(shù)參數(shù)如下 function(newValue,oldValue, scope)

objectEquality,是否深度監(jiān)聽,如果設(shè)置為true,它告訴Angular檢查所監(jiān)控的對象中每一個屬性的變化. 如果你希望監(jiān)控數(shù)組的個別元素或者對象的屬性而不是一個普通的值, 那么你應(yīng)該使用它

(4)$state

在ajax技術(shù)發(fā)展普及之后遵馆,因為其不會留下歷史記錄方便瀏覽器訪問和對于seo不友好的特點续崖,一個新技術(shù)應(yīng)運而生: 路由,$state就是路由中的一項服務(wù)团搞。

路由的具體用法

此處可點→→→ui-rooter的使用方法

(5)$stateParams

$stateParams是一個對象严望,包含 url 中每個參數(shù)的鍵/值。$stateParams可以為控制器或者服務(wù)提供 url 的各個部分逻恐。 注意:$stateParams必須與一個控制器相關(guān)像吻,并且$stateParams中的“鍵/值”也必須事先在那個控制器的url屬性中有定義峻黍。

3.常見問題

watch的深度監(jiān)聽是什么意思呢?有什么優(yōu)缺點呢拨匆?

4.解決方案

$watch在對待基本類型和引用類型會有不同的處理方式姆涩,這就要首先說一說$watch函數(shù)的第三個參數(shù)。它在默認情況下是false惭每。在默認情況下骨饿,即不顯式指明第三個參數(shù)或者將其指明為false時,我們進行的監(jiān)視叫做“引用監(jiān)視”台腥。引用監(jiān)視的原詞的“reference watch”宏赘,它的意思是只要監(jiān)視的對象引用沒有發(fā)生變化,就不算它發(fā)生了變化黎侈。具體來說察署,在上面的例子中,只要是items的引用沒有發(fā)生變化峻汉,就算items中的一些屬性發(fā)生了變化贴汪,$watch也會當做沒有看見。

如果我們將$watch的第三個變量設(shè)置為true休吠,那么此時我們進行的監(jiān)視叫做“全等監(jiān)視”扳埂,原詞是“equality watch”。此時瘤礁,只要$watch的對象有一點風(fēng)吹草動聂喇,它馬上就跳出來

既然全等監(jiān)視這么好,那么我們?yōu)槭裁床恢苯佑萌缺O(jiān)視呢蔚携?當然希太,任何事情都有好的壞的兩個方面,全等監(jiān)視固然是好酝蜒,但是它在運行時需要先遍歷整個監(jiān)視對象誊辉,然后在每次$digest之前使用angular.copy()將整個對象深拷貝一遍然后在運行之后用angular.equal()將前后的對象進行對比,但是到了實際生產(chǎn)時亡脑,我們要面對的數(shù)據(jù)千千萬萬堕澄,可能因為全等監(jiān)視這一個設(shè)置就會消耗大量的資源,讓應(yīng)用停滯不前

5.編碼實戰(zhàn)

demo

6.擴展思考

怎么取消$watch霉咨,為什么取消蛙紫?

$watch的性能消耗較大,所以對于已經(jīng)不需要監(jiān)視的watch途戒,記得定時取消掉坑傅。

7.參考文獻

參考一:Angular.js中使用$watch監(jiān)聽模型變化

參考二:關(guān)于$watch應(yīng)用的一些小技巧

參考三:AngularJS $watch用法

8.更多討論

PPT

視頻

感謝大家觀看奧。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末喷斋,一起剝皮案震驚了整個濱河市唁毒,隨后出現(xiàn)的幾起案子蒜茴,更是在濱河造成了極大的恐慌,老刑警劉巖浆西,帶你破解...
    沈念sama閱讀 223,002評論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件粉私,死亡現(xiàn)場離奇詭異,居然都是意外死亡近零,警方通過查閱死者的電腦和手機诺核,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評論 3 400
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來久信,“玉大人窖杀,你說我怎么就攤上這事∪肜海” “怎么了陈瘦?”我有些...
    開封第一講書人閱讀 169,787評論 0 365
  • 文/不壞的土叔 我叫張陵幌甘,是天一觀的道長潮售。 經(jīng)常有香客問我,道長锅风,這世上最難降的妖魔是什么酥诽? 我笑而不...
    開封第一講書人閱讀 60,237評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮皱埠,結(jié)果婚禮上肮帐,老公的妹妹穿的比我還像新娘。我一直安慰自己边器,他們只是感情好训枢,可當我...
    茶點故事閱讀 69,237評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著忘巧,像睡著了一般恒界。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上砚嘴,一...
    開封第一講書人閱讀 52,821評論 1 314
  • 那天十酣,我揣著相機與錄音,去河邊找鬼际长。 笑死耸采,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的工育。 我是一名探鬼主播虾宇,決...
    沈念sama閱讀 41,236評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼如绸!你這毒婦竟也來了文留?” 一聲冷哼從身側(cè)響起好唯,我...
    開封第一講書人閱讀 40,196評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎燥翅,沒想到半個月后骑篙,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,716評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡森书,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,794評論 3 343
  • 正文 我和宋清朗相戀三年靶端,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片凛膏。...
    茶點故事閱讀 40,928評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡杨名,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出猖毫,到底是詐尸還是另有隱情台谍,我是刑警寧澤,帶...
    沈念sama閱讀 36,583評論 5 351
  • 正文 年R本政府宣布吁断,位于F島的核電站趁蕊,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏仔役。R本人自食惡果不足惜掷伙,卻給世界環(huán)境...
    茶點故事閱讀 42,264評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望又兵。 院中可真熱鬧任柜,春花似錦、人聲如沸沛厨。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽逆皮。三九已至宅粥,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間页屠,已是汗流浹背粹胯。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留辰企,地道東北人风纠。 一個月前我還...
    沈念sama閱讀 49,378評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像牢贸,于是被迫代替她去往敵國和親竹观。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,937評論 2 361