本人是腹黑 優(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)
6.擴展思考
怎么取消$watch霉咨,為什么取消蛙紫?
$watch的性能消耗較大,所以對于已經(jīng)不需要監(jiān)視的watch途戒,記得定時取消掉坑傅。
7.參考文獻
參考一:Angular.js中使用$watch監(jiān)聽模型變化
參考二:關(guān)于$watch應(yīng)用的一些小技巧
8.更多討論
感謝大家觀看奧。