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

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

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

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

什么是生命周期

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

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

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

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

parent-element.html

index.html

控制臺輸出結果

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

云服務器 GPU云服務器線程的生命周期 bug的生命周期 activity的生命周期 ios應用的生命周期

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.hztianpu.com/yun/86034.html

開坑，寫點Polymer 1.0 教程第3篇——組件注冊與創(chuàng)建

摘要：我們修改下例子定義借口，構造時將重新賦值測試一下這種構造函數(shù)傳參的方式只適用于，的創(chuàng)建方式，而且它種方式不支持，原因你自己拍腦袋想想就懂了。之前一篇算是帶大家大致領略了一下Polymer的風采。這篇我們稍微深入一丟丟，講下組件的注冊和創(chuàng)建。創(chuàng)建自定義組件的幾種方式這里我們使用Polymer函數(shù)注冊了一個自定義組件my-element // register an element ...

joywek 2019-08-21 10:42 評論0 收藏0
開坑，寫點Polymer 1.0 教程第2篇(上)——hello world篇

摘要：書接上回，我們已經(jīng)把運行的準備工作做好，接下來就敲點代碼來感受下它到底是個什么東東，這一篇里我基本會照搬官網(wǎng)的幾個例子來快速過一下。非常重要的一點是，這個組件的標簽名必須要以符號分割。書接上回，我們已經(jīng)把運行Polymer的準備工作做好，接下來就敲點代碼來感受下它到底是個什么東東，這一篇里我基本會照搬官網(wǎng)Quick tour的幾個例子來快速過一下。注冊一個自定義組件需要調(diào)用Pol...

HitenDev 2019-08-21 10:41 評論0 收藏0
開坑，寫點Polymer 1.0 教程第2篇(下)——hello world篇

摘要：數(shù)據(jù)綁定是一個非常屌的的辦法能讓你快速的傳播組件的變化，減少代碼的行數(shù)。你可以用雙大括弧來聲明你需要綁定的屬性，大括弧在運行時會被替換成括弧內(nèi)的屬性值。本篇完，下篇還沒想好要寫啥。書接上回，上回叔說到如何注冊（創(chuàng)建）一個自定義組件，這回我們來講講它的數(shù)據(jù)綁定。使用數(shù)據(jù)綁定當然，你可能不會僅僅滿足上文教的簡單的靜態(tài)自定義組件，你通常需要動態(tài)的更新你的dom組件。數(shù)據(jù)綁定是一個非常...

xiangzhihong 2019-08-21 10:41 評論0 收藏0
開坑，寫點Polymer 1.0 教程第5篇——事件與消息機制

摘要：而不寫，則監(jiān)聽是加在整個組件之上的。組件的輸入就是屬性賦值，輸出則是事件的觸發(fā)。運行結果消息機制這里來聊聊組件化開發(fā)的消息機制，這個并不局限于或者應用，適用于所有的組件式開發(fā)技術。這篇會講下組件內(nèi)部的事件處理機制，以及組件和外界通訊的處理方式（父子通訊，兄弟通訊等）組件內(nèi)的事件處理機制第一種，直接寫在標簽里，用on-eventName=eventHandler的方式 ...

SHERlocked93 2019-08-21 10:43 評論0 收藏0
開坑，寫點Polymer 1.0 教程第1篇——安裝篇

摘要：所以又以一個庫的身份出現(xiàn)在世人面前，它現(xiàn)階段要做的就是使用的規(guī)范來進行開發(fā)，并且提供了一套底層實現(xiàn)來填補了各大瀏覽器暫不支持的，我們稱為填充物也就是要干的事情。書接上回上一篇我們介紹了神馬是Polymer，這一篇我們來做些正式編碼前的準備工作，順便也扯一扯Polymer的真面目如何安裝Polymer 有兩種方式：第一種是bower安裝，不要問我bower是什么，不會bower的話，...

Jeff 2019-08-21 10:41 評論0 收藏0