成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Dionysus_go / 2169人閱讀

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

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

什么是生命周期

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

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

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

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

parent-element.html

index.html

控制臺(tái)輸出結(jié)果

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/86034.html

相關(guān)文章

  • 開(kāi)坑，寫(xiě)點(diǎn)Polymer 1.0 教程第3篇——組件注冊(cè)與創(chuàng)建

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

    joywek 評(píng)論0 收藏0

  • 開(kāi)坑，寫(xiě)點(diǎn)Polymer 1.0 教程第2篇(上)——hello world篇

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

    HitenDev 評(píng)論0 收藏0

  • 開(kāi)坑，寫(xiě)點(diǎn)Polymer 1.0 教程第2篇(下)——hello world篇

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

    xiangzhihong 評(píng)論0 收藏0

  • 開(kāi)坑，寫(xiě)點(diǎn)Polymer 1.0 教程第5篇——事件與消息機(jī)制

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

    SHERlocked93 評(píng)論0 收藏0

  • 開(kāi)坑，寫(xiě)點(diǎn)Polymer 1.0 教程第1篇——安裝篇

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

    Jeff 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<