資訊專欄INFORMATION COLUMN
摘要：而不寫，則監(jiān)聽是加在整個(gè)組件之上的。組件的輸入就是屬性賦值，輸出則是事件的觸發(fā)。運(yùn)行結(jié)果消息機(jī)制這里來聊聊組件化開發(fā)的消息機(jī)制，這個(gè)并不局限于或者應(yīng)用，適用于所有的組件式開發(fā)技術(shù)。
這篇會(huì)講下組件內(nèi)部的事件處理機(jī)制，以及組件和外界通訊的處理方式（父子通訊，兄弟通訊等）
組件內(nèi)的事件處理機(jī)制第一種，直接寫在標(biāo)簽里，用on-eventName=“eventHandler”的方式
第二種使用EventListener的方式
大家注意，這里使用了myBtn.click這種 id+.+eventName的方式，可以對(duì)內(nèi)部某個(gè)id的dom進(jìn)行監(jiān)聽。而不寫id，則監(jiān)聽是加在整個(gè)組件之上的。大家可以跑下上面的代碼看看區(qū)別。
組件對(duì)外觸發(fā)一個(gè)事件組件分裝好了最終還是要被其它組件調(diào)用，與外界通訊的，如果把屬性賦值作為 輸入in， 那么事件就可以稱為輸出out了。就拿原生的input標(biāo)簽進(jìn)行舉例。 input組件的輸入就是type屬性賦值，輸出則是onclick事件的觸發(fā)。
同理，對(duì)于自定義組件也一樣，對(duì)于輸入來說前面幾篇已經(jīng)介紹了properties如何在組件外被賦值。那么事件的觸發(fā)我們由如何來處理呢？
Polymer給我們提供了一個(gè)fire的api讓我們來觸發(fā)自定義事件，來看下面的代碼
對(duì)自定義事件添加監(jiān)聽后就可以捕獲到這個(gè)“kick”的自定義事件了。我嘗試了直接在組件上使用on-kick進(jìn)行監(jiān)聽卻不行，非得使用addEventListener方式，可能是polymer不支持這種寫法，期望在后續(xù)版本中加以改進(jìn)。
運(yùn)行結(jié)果
這里來聊聊組件化開發(fā)的消息機(jī)制，這個(gè)并不局限于polymer或者web應(yīng)用，適用于所有的組件式開發(fā)技術(shù)。其實(shí)歸納下來就是幾條準(zhǔn)則：
父子通訊：
父->子 設(shè)置子的公共屬性 子->父 子觸發(fā)事件，父監(jiān)聽事件，父捕獲到子發(fā)出的事件后再做后續(xù)處理。
兄弟通訊：
兄->父 跟父子通訊一樣，先通過事件把需求提交給父 父->弟 父拿到兄的需求后，統(tǒng)一調(diào)度，通過設(shè)屬性的方式來訪問弟
爺孫通訊：
參照父子通訊，一層層向上傳遞事件，再一層層向下設(shè)置屬性，實(shí)際開發(fā)時(shí)盡量將組建的接口都設(shè)計(jì)合理避免跨n級(jí)通訊的尷尬場面
遠(yuǎn)親通訊：
請(qǐng)使用前端消息總線（如單例的消息總線類）來解決這里剪不斷理還亂的case，但是這類方式不宜大面積使用，父子，和兄弟間通訊還是請(qǐng)使用上面的幾種方式。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/86058.html
摘要：我們修改下例子定義借口，構(gòu)造時(shí)將重新賦值測試一下這種構(gòu)造函數(shù)傳參的方式只適用于，的創(chuàng)建方式，而且它種方式不支持，原因你自己拍腦袋想想就懂了。 之前一篇算是帶大家大致領(lǐng)略了一下Polymer的風(fēng)采。這篇我們稍微深入一丟丟，講下組件的注冊(cè)和創(chuàng)建。 創(chuàng)建自定義組件的幾種方式 這里我們使用Polymer函數(shù)注冊(cè)了一個(gè)自定義組件my-element // register an element ...
摘要：數(shù)據(jù)綁定是一個(gè)非常屌的的辦法能讓你快速的傳播組件的變化，減少代碼的行數(shù)。你可以用雙大括弧來聲明你需要綁定的屬性，大括弧在運(yùn)行時(shí)會(huì)被替換成括弧內(nèi)的屬性值。本篇完，下篇還沒想好要寫啥。 書接上回，上回叔說到如何注冊(cè)（創(chuàng)建）一個(gè)自定義組件，這回我們來講講它的數(shù)據(jù)綁定。 使用數(shù)據(jù)綁定 當(dāng)然，你可能不會(huì)僅僅滿足上文教的簡單的靜態(tài)自定義組件，你通常需要?jiǎng)討B(tài)的更新你的dom組件。 數(shù)據(jù)綁定是一個(gè)非常...
摘要：組件也一樣，從被創(chuàng)建，被解析，被賦初始化值，被添加到舞臺(tái)，被繪制，被布局，使用過程中被修改了值，被重繪，被重新布局，最終被父組件移除結(jié)束慘淡的一身等等，都可以稱為組件的生命周期。 這篇來談?wù)刾olymer最核心的一塊，也可以說是web components技術(shù)最最核心的一塊內(nèi)容 生命周期，大家在學(xué)習(xí)一些框架的時(shí)候最好都去了解一下它們的生命周期。 什么是生命周期 什么是生命周期？故名思議...
摘要：所以又以一個(gè)庫的身份出現(xiàn)在世人面前，它現(xiàn)階段要做的就是使用的規(guī)范來進(jìn)行開發(fā)，并且提供了一套底層實(shí)現(xiàn)來填補(bǔ)了各大瀏覽器暫不支持的，我們稱為填充物也就是要干的事情。 書接上回上一篇我們介紹了神馬是Polymer，這一篇我們來做些正式編碼前的準(zhǔn)備工作，順便也扯一扯Polymer的真面目 如何安裝Polymer 有兩種方式：第一種是bower安裝，不要問我bower是什么，不會(huì)bower的話，...
摘要：書接上回，我們已經(jīng)把運(yùn)行的準(zhǔn)備工作做好，接下來就敲點(diǎn)代碼來感受下它到底是個(gè)什么東東，這一篇里我基本會(huì)照搬官網(wǎng)的幾個(gè)例子來快速過一下。非常重要的一點(diǎn)是，這個(gè)組件的標(biāo)簽名必須要以符號(hào)分割。 書接上回，我們已經(jīng)把運(yùn)行Polymer的準(zhǔn)備工作做好，接下來就敲點(diǎn)代碼來感受下它到底是個(gè)什么東東，這一篇里我基本會(huì)照搬官網(wǎng)Quick tour的幾個(gè)例子來快速過一下。 注冊(cè)一個(gè)自定義組件 需要調(diào)用Pol...
閱讀 3553·2019-08-30 12:58
閱讀 932·2019-08-29 16:37
閱讀 2807·2019-08-29 16:29
閱讀 3111·2019-08-26 12:18
閱讀 2376·2019-08-26 11:59
閱讀 3419·2019-08-23 18:27
閱讀 2794·2019-08-23 16:43
閱讀 3308·2019-08-23 15:23
