開坑，寫點(diǎn)Polymer 1.0 教程第4篇——組件的生命周期

Dionysus_go 發(fā)布于2019-08-21 10:42 / 2161人閱讀

摘要：組件也一樣，從被創(chuàng)建，被解析，被賦初始化值，被添加到舞臺，被繪制，被布局，使用過程中被修改了值，被重繪，被重新布局，最終被父組件移除結(jié)束慘淡的一身等等，都可以稱為組件的生命周期。

這篇來談?wù)刾olymer最核心的一塊，也可以說是web components技術(shù)最最核心的一塊內(nèi)容 “生命周期”，大家在學(xué)習(xí)一些框架的時(shí)候最好都去了解一下它們的生命周期。

什么是生命周期

什么是生命周期？故名思議，拿人的例子來說，比如出生，上學(xué)，工作，結(jié)婚，生子，死亡等等，一生中幾個(gè)重要階段。組件也一樣，從被創(chuàng)建，被解析，被賦初始化值，被添加到舞臺，被繪制，被布局，使用過程中被修改了值，被重繪，被重新布局，最終被父組件移除結(jié)束慘淡的一身等等，都可以稱為組件的生命周期。

來看看Polymer提供了那些我們可以catch到的大事件（按觸發(fā)的順序）。。
1.created callback：當(dāng)組件被 new 時(shí)調(diào)用，最早被觸發(fā)，此時(shí)還不能訪問組件的屬性
2.ready callback ：當(dāng)組件內(nèi)部依賴的子組件或者原生dom組件加載成功，會調(diào)用ready
3.factoryImpl callback ：只有使用new ElementClass()方式創(chuàng)建組件時(shí)會被調(diào)用，發(fā)生在ready后
4.attached callback ：組件被添加到父組件中（顯示在舞臺）時(shí)觸發(fā)，只會觸發(fā)一次

5.attributeChanged callback ：組件被父組件設(shè)置屬性時(shí)觸發(fā)，只有使用setAttribute()方式設(shè)置屬性才會觸發(fā)，切記！（elementInstance.attr = xxx, 都不會觸發(fā)它）
6.detached callback ：當(dāng)被父組件removeChild時(shí)候觸發(fā)（即被移出舞臺）

你跑一下下面的例子后，自己修修改改試一下就能大致體會，（光看文字的效果不如你自己跑一下代碼）
my-element.html

parent-element.html

index.html

控制臺輸出結(jié)果

這里我只是根據(jù)官網(wǎng)的文檔描述，大概介紹了幾個(gè)主要的生命周期，可能會有遺漏（諸如layout和render在什么階段官網(wǎng)文檔中并沒有體現(xiàn)，或者說官方并沒有提供這2二個(gè)階段供的事件接口，供用戶來hack一些組件的生成，當(dāng)然這僅僅是我暫時(shí)的一些推測，待繼續(xù)深入學(xué)習(xí)后會回過來一一補(bǔ)充。）。生命周期篇就講到這里，下一篇我們來聊聊Polymer的事件，也就是大家比較關(guān)心的另外一個(gè)問題，組件之間的通訊（消息機(jī)制）