摘要:也就是說它的存在會把給貫穿起來,它是否處于生命周期之中,直接影響了之間是否能夠彼此互通。二主題生命周期既然談周期,那必定有開始,有過程,有結束。
先扯淡是慣例-------------生命對于人而言是再重要不過的東西了,但你不太可能每天去考慮自己離生命結束還有多久,生命周期就更談不上了,人的生命一旦結束就不會再次開始,如果你堅持認為生命有輪回,好吧,咱倆的淡扯不到一塊去。但對于angular的作用域來講,它確實是有生命周期的,也就是說它可以死而復生,而且一定是在你需要它的時候它就生,不需要它的時候就讓它死,聽起來有些冷酷無情,但假如它在該死的時候沒死,該活的時候沒活,那結果可能就是----你被它玩死。生死這詞大殘酷了,我們還是文雅點,就叫它生命周期吧,開始正題。
一、## 弄清楚一個問題前我們必須知道它是個什么東西 ##
先仰視-----畢竟對于前端來講,首次聽到MVC時覺得好牛X,它是啥玩意不多說,但如果你認為$scope就是我們的數據模型的話,建議你好好的溫習下google大大對它的定義,必竟這個東西不同于扯淡,我們需要一個嚴謹的態度。$scope只是MVC中C和V的橋梁,或者官方的說法叫做glue,我覺得這個單詞很傳神的表達了對$scope的定位。也就是說它的存在會把MVC給貫穿起來,它是否處于生命周期之中,直接影響了MVC之間是否能夠彼此互通。那么M呢,它在哪里?別這些文字弄暈,M大多數也存在于$scope上,但又不僅在這里,也可能你把它直接扔在了HTML里,或者存在于某個DOM元素的屬性上。
之所以仰視,是因為我們跪著,站起來吧-------很高大上么,no,no,no,說的直白點,$scope就是一個對象,和我們在js代碼里看到的{}沒什么不同,不要因為它和MVC廝混在一起就覺得它有多高大上,也不要覺得它名字叫作用域就覺得它好牛叉,它和js中的作用域完全是兩個概念。既然是對象,那它也原型,有也在自己的原型鏈中所處的位置,事實就是這么一回事。
二、## 主題——生命周期 ##
既然談周期,那必定有開始,有過程,有結束。
創建——在angularJS 1版本中,指令才是大boss,可以說就是它在指點的江山,所在angular應該在啟動以后,第一步必須是先找到這些boss,boss能力有大小,有的可以創建scope,有的則不行,比如最常見到的ng-controller和ng-repeate都會創建自己的作用域,有些指令還會創建屬于自己的隔離作用域,應用了transclude屬性后還會創建隔離作用域的兄弟作用域,前面這句把angular中所有的4種作用域的類型都說了,想要弄清楚自己資料,或者等我哪天興致來了再寫吧。至于創建的過程被分成了2個階段,第一階段是compile,第二階段是link,那你猜scope是在哪個階段創建?如果真的是靠猜的,還是好好查查資料。compile的時候,angular會把指令對應的模板進行轉換,并且對于一個指令的多個實例,angular只會編譯一次,很顯然這時候生成作用域是不合適的。這里有一個很重要的順序就是compile從上到下,而link是從下到上的,這樣的順序保證了在進行M和V的鏈接時,所有的編譯工作都已完成。
注冊監視——作用域一旦生成,指令就會在它身上注冊一個監視,就是我們平時用到的$scope.$watch(),顧名思義監視什么,肯定是去監視數據有沒有變化啊,難道還監視隔壁妹子洗澡不成。
模型突變——以上兩個過程完成之后,數據和視圖之間的鏈接成功建議,這個時候一旦數據模型發生了變化,就應該做點什么了,當然做什么取決于你。這個時候比如用戶在文本框里輸入了數據,或者ajax取回的新的數據要應用在程序中,或者用戶點擊了東西需要我們更改一些數據。這里關鍵的東西是,假如數據在用戶端發生了變化,如何從瀏覽器的js環境進入到angular的環境中操作在angular模型上的數據,這里偷個懶用下官網的圖,但是請記住$scope.$apply,它是從js進入到angular的通道,在應該內置指令時,你不會去調用這個方法是因為angular幫你做了,等于沒做。那么當你自己定義指令時,要更新數據時你唯一的選擇就是它。
觀察——有了變化,我們就要觀察這個變化影響的范圍到底有多大,那么在進入到angular環境后就會執行那個頗受詬病的臟值檢查。既然作用域是原型繼承下來的,而且和DOM結構平行,那顯然最先應該檢查就是rooScope,然后傳播到所有的子作用域上,這個時候$watch,設置的一些函數,表達式等就會被執行,相應的改變發生的話就應用你設置好的函數等。
摧毀——當我們不在需要一個作用域,需要將它移除掉,原則就是誰創建誰銷毀,使用的方法就是$scope.$destroy(),這里如同apply一樣,這個方法一要被調用,至于誰調用,參照原則。如果不做呢?good question,不做也不會被槍斃,只是在進行digest循環時,它仍然會被加入其中,增加性能的開銷。執行完這個方法后,它占用的內存才能被釋放,進而被當成垃圾回收掉。
以上就是scope整個生命周期,請記住這幾個關鍵詞:link,regesit,mutation,apply,digest,destory。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/81615.html
摘要:因為組件的存在范圍被限制在以內,這就是這種機制目前存在的意義所在。組件都是可以傳遞參數或外部作用域的,利用此機制進行判斷來執行可選行為,這是對用戶友好的舉措。 這一篇還是一個簡單的例子所引發的思考。 你看,如今的框架和庫,無論規模大小功能多少,它們在本質上都朝著組件化的思路快速演進著。Angular 有 directives,Angular 2應該也還是這個叫法;Ember 從 Vie...
摘要:請注意,就變量生命周期而言,聲明階段與變量聲明是不同的概念。提升在生命周期中無效的原因如上所述,提升是變量在作用域頂部的耦合聲明和初始化階段。然而,生命周期分離聲明和初始化階段。解耦消除了的提升期限。 為了保證的可讀性,本文采用意譯而非直譯。 提升是將變量或函數定義移動到作用域頭部的過程,通常是 var 聲明的變量和函數聲明function fun() {...}。 當 ES6 引入l...
摘要:請注意,就變量生命周期而言,聲明階段與變量聲明是不同的概念。提升在生命周期中無效的原因如上所述,提升是變量在作用域頂部的耦合聲明和初始化階段。然而,生命周期分離聲明和初始化階段。解耦消除了的提升期限。 為了保證的可讀性,本文采用意譯而非直譯。 提升是將變量或函數定義移動到作用域頭部的過程,通常是 var 聲明的變量和函數聲明function fun() {...}。 當 ES6 引入l...
摘要:每個的指向指向父級作用域。之間的通信本質上是當前的所在的如何跟其他上的進行通信。傳遞事件有種方式觸發的事件要通知整個事件系統允許任意作用域處理這個事件就要向下傳播。作用域上使用進行事件監聽。示例關于同級之間通信我的一個提問 原文鏈接:http://www.cnblogs.com/webbes... AngularJS中的controller是個函數,用來向視圖的作用域($scope)添...
摘要:在整個年,看到發布版增加了許多功能,包括新的生命周期方法新的上下文指針事件延遲函數和。它在等待渲染異步響應時數據,是延遲函數背后用來管理組件的代碼分割的。發布自第版開始將近年后,于年發布。 前端發展發展迅速,非常的快。 本文將回顧2018年一些重要的前端新聞,事件和 JavaScript 趨勢。 想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你! showImg(ht...
閱讀 2796·2021-11-16 11:44
閱讀 969·2021-10-09 09:58
閱讀 4489·2021-09-24 09:48
閱讀 4252·2021-09-23 11:56
閱讀 2408·2021-09-22 15:48
閱讀 1892·2021-09-07 10:07
閱讀 3204·2021-08-31 09:46
閱讀 504·2019-08-30 15:56