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