最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
快應(yīng)用的事件監(jiān)聽機(jī)制和組件間通信

說起事件，做前端開發(fā)的朋友一定不會(huì)陌生。事件，即網(wǎng)頁上的一系列行為，可以是瀏覽器行為，如頁面完成了加載，頁面關(guān)閉；或是用戶操作行為，如用戶輸入操作，用戶點(diǎn)擊按鈕等，這些行為會(huì)被JavaScript監(jiān)測到，并執(zhí)行相應(yīng)的邏輯代碼?？梢哉f，前端的交互行為與事件機(jī)制息息相關(guān)，對于前端開發(fā)者而言，掌握好事件機(jī)制是絕對必要的。

所謂組件，即封裝起來的具有獨(dú)立功能的UI部件。試想，如果開發(fā)一個(gè)復(fù)雜的頁面，開發(fā)者把所有的UI部分寫在一個(gè)文件中，這樣的代碼顯然可維護(hù)性很低。但我們?nèi)绻媒M件的方式去重新思考UI構(gòu)成，將UI上每一個(gè)功能相對獨(dú)立的模塊定義成組件，然后將小的組件通過組合或者嵌套的方式構(gòu)成大的組件，進(jìn)而完成整體UI的開發(fā)。這樣，我們不僅提高了代碼的復(fù)用性，且整體結(jié)構(gòu)清晰，維護(hù)性則大大提高。

組件化界面

本文將介紹在快應(yīng)用開發(fā)中，事件相關(guān)的主要API以及事件的監(jiān)聽、觸發(fā)機(jī)制，同時(shí)會(huì)介紹快應(yīng)用中組件是如何通信的。閱讀本文前，建議先了解快應(yīng)用相關(guān)基礎(chǔ)知識。

自定義事件的監(jiān)聽、移除與觸發(fā)

$on 用于監(jiān)聽自定義事件；$off移除對應(yīng)的事件監(jiān)聽；$emit()、$dispatch()、 $broadcast()等方法可用于觸發(fā)事件。

$on(evtName, fnHandler)事件

在當(dāng)前頁面注冊監(jiān)聽事件， 可監(jiān)聽$emit()、 $dispatch()、 $broadcast()等觸發(fā)的自定義事件，不能用于注冊組件節(jié)點(diǎn)的事件響應(yīng)。

示例如下：

 
 
 
    
  
  
  
  1. export default {  
    2. 
  
  
  
  2. onInit(){  
    3. 
  
  
  
  3. this.$on('customEvtType1', this.customEvtType1Handler)  
    4. 
  
  
  
  4. },  
    5. 
  
  
  
  5. customEvtType1Handler(evt){  
    6. 
  
  
  
  6. // 事件類型，事件參數(shù)  
    7. 
  
  
  
  7. console.info(`觸發(fā)事件：類型：${evt.type}, 參數(shù)： ${JSON.stringify(evt.detail)}`);  
    8. 
  
  
  
  8. }  
    9. 
  
  
  
  9. } 
    10.

解釋一下

'customEvtType1'為該組件上自定義的事件名稱，customEvtType1Handler為當(dāng)'customEvtType1'事件被觸發(fā)時(shí)，要執(zhí)行的回調(diào)函數(shù)。

$off(evtName, fnHandler)

移除事件監(jiān)聽，參數(shù) fnHandler 為可選，傳遞僅移除指定的響應(yīng)函數(shù)，不傳遞則移除此事件的所有監(jiān)聽。

示例如下：

 
 
 
    
  
  
  
  1. export default {  
    2. 
  
  
  
  2. removeEventHandler () {  
    3. 
  
  
  
  3. // 不傳遞fnHandler：移除所有監(jiān)聽  
    4. 
  
  
  
  4. this.$off('customEvtType1')  
    5. 
  
  
  
  5. // 傳遞fnHandler：移除指定的監(jiān)聽函數(shù)  
    6. 
  
  
  
  6. this.$off('customEvtType1', this.customEvtType1Handler)  
    7. 
  
  
  
  7. }  
    8. 
  
  
  
  8. } 
    9.

頁面的交互中可能會(huì)遇到一些非手動(dòng)觸發(fā)的需求，$emit() 通過觸發(fā)當(dāng)前實(shí)例上的事件，達(dá)到動(dòng)態(tài)觸發(fā)事件的行為，類似jquery中的trigger方法。

$emit(evtName, evtDetail)

觸發(fā)當(dāng)前實(shí)例監(jiān)聽事件函數(shù)，與 $on() 配合使用，注意：$emit() 目前只觸發(fā) $on 所監(jiān)聽的事件

示例如下：

 
 
 
    
  
  
  
  1. export default {  
    2. 
  
  
  
  2. emitEvent () {  
    3. 
  
  
  
  3. this.$emit('customEvtType1', { params: '參數(shù)內(nèi)容' })  
    4. 
  
  
  
  4. }  
    5. 
  
  
  
  5. } 
    6.

監(jiān)聽原生組件事件

原生組件即框架自帶的組件，如div，text等等，其支持一系列事件，如通用事件（如：click, disappear）、組件專有事件（如：focus）。完整的原生組件列表以及事件可在快應(yīng)用官網(wǎng)查詢到。

開發(fā)者可以在事件回調(diào)函數(shù)中，獲取到當(dāng)前觸發(fā)組件的信息，并進(jìn)行進(jìn)一步的操作。

在響應(yīng)函數(shù)執(zhí)行時(shí)通過target獲取，如：onClickHandler

在響應(yīng)函數(shù)綁定時(shí)傳遞參數(shù)，如：onClickHandler2

示例如下：

 
 
 
    
  
  
  
  1.   
    2. 
  
  
  
  2.   
    3. 
  
  
  
  3. .tutorial-page {  
    4. 
  
  
  
  4. flex-direction: column;  
    5. 
  
  
  
  5. }  
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7.  
    8. 
  
  
  
  8.  
    9.

解釋一下

onClickHandler函數(shù)如果不傳參數(shù)，默認(rèn)參數(shù)env即為當(dāng)前觸發(fā)組件的實(shí)例；若傳遞了參數(shù)，如onClickHandler2，則參數(shù)安順序排列，env為***一個(gè)參數(shù)。

觸發(fā)原生組件事件

用戶可通過手動(dòng)操作觸發(fā)事件，如點(diǎn)擊事件等，除此之外，也可以在代碼中通過$emitElement()完成事件的動(dòng)態(tài)觸發(fā)，類似上文自定義組件中的$emit()方法。

$emitElement(evtName, evtDetail, id)

可以觸發(fā)指定組件id的事件，通過evt.detail獲取傳遞的參數(shù)；該方法僅用于原生組件，對自定義組件無效。

示例如下：

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.   
    4. 
  
  
  
  4. .tutorial-page {  
    5. 
  
  
  
  5. flex-direction: column;  
    6. 
  
  
  
  6. }  
    7. 
  
  
  
  7.  
    8. 
  
  
  
  8.  
    9. 
  
  
  
  9.  
    10. 
 
 
 
解釋一下
Click事件可通過用戶點(diǎn)擊操作觸發(fā)，也可通過$emitElement觸發(fā)。
自定義組件
上文曾提到原生組件，通常原生組件是我們系統(tǒng)中最基礎(chǔ)的組件，然而我們在做一個(gè)稍微復(fù)雜的頁面時(shí)，如果每個(gè)頁面都只用原生組件搭建，那這樣的代碼的可維護(hù)性會(huì)差很多。打個(gè)比方，就好比一個(gè)人口眾多的國家，沒有省、市、縣這些單位，而是只以個(gè)人為單位，難以想象這個(gè)國家的管理將有多難。道理類似，自定義組件，我們可以根據(jù)具體的業(yè)務(wù)邏輯，把頁面按照功能拆成多個(gè)模塊，每個(gè)模塊負(fù)責(zé)其中的一個(gè)功能部分，***頁面將由這些模塊組合搭建起來，讓代碼結(jié)構(gòu)更加清晰，易于維護(hù)。
自定義組件是開發(fā)者編寫的組件，使用起來和Native原生組件一樣，最終按照組件的