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