快应用的事件监听机制和组件间通信

说起事件，做前端开发的朋友一定不会陌生。事件，即网页上的一系列行为，可以是浏览器行为，如页面完成了加载，页面关闭；或是用户操作行为，如用户输入操作，用户点击按钮等，这些行为会被JavaScript监测到，并执行相应的逻辑代码。可以说，前端的交互行为与事件机制息息相关，对于前端开发者而言，掌握好事件机制是绝对必要的。

所谓组件，即封装起来的具有独立功能的UI部件。试想，如果开发一个复杂的页面，开发者把所有的UI部分写在一个文件中，这样的代码显然可维护性很低。但我们如果用组件的方式去重新思考UI构成，将UI上每一个功能相对独立的模块定义成组件，然后将小的组件通过组合或者嵌套的方式构成大的组件，进而完成整体UI的开发。这样，我们不仅提高了代码的复用性，且整体结构清晰，维护性则大大提高。

组件化界面

本文将介绍在快应用开发中，事件相关的主要API以及事件的监听、触发机制，同时会介绍快应用中组件是如何通信的。阅读本文前，建议先了解快应用相关基础知识。

自定义事件的监听、移除与触发

$on 用于监听自定义事件；$off移除对应的事件监听；$emit()、$dispatch()、 $broadcast()等方法可用于触发事件。

$on(evtName, fnHandler)事件

在当前页面注册监听事件， 可监听$emit()、 $dispatch()、 $broadcast()等触发的自定义事件，不能用于注册组件节点的事件响应。

示例如下：

 
 
 
    
  
  
  
  1. export default {  
    2. 
  
  
  
  2. onInit(){  
    3. 
  
  
  
  3. this.$on('customEvtType1', this.customEvtType1Handler)  
    4. 
  
  
  
  4. },  
    5. 
  
  
  
  5. customEvtType1Handler(evt){  
    6. 
  
  
  
  6. // 事件类型，事件参数  
    7. 
  
  
  
  7. console.info(`触发事件：类型：${evt.type}, 参数： ${JSON.stringify(evt.detail)}`);  
    8. 
  
  
  
  8. }  
    9. 
  
  
  
  9. } 
    10.

解释一下

'customEvtType1'为该组件上自定义的事件名称，customEvtType1Handler为当'customEvtType1'事件被触发时，要执行的回调函数。

$off(evtName, fnHandler)

移除事件监听，参数 fnHandler 为可选，传递仅移除指定的响应函数，不传递则移除此事件的所有监听。

示例如下：

 
 
 
    
  
  
  
  1. export default {  
    2. 
  
  
  
  2. removeEventHandler () {  
    3. 
  
  
  
  3. // 不传递fnHandler：移除所有监听  
    4. 
  
  
  
  4. this.$off('customEvtType1')  
    5. 
  
  
  
  5. // 传递fnHandler：移除指定的监听函数  
    6. 
  
  
  
  6. this.$off('customEvtType1', this.customEvtType1Handler)  
    7. 
  
  
  
  7. }  
    8. 
  
  
  
  8. } 
    9.

页面的交互中可能会遇到一些非手动触发的需求，$emit() 通过触发当前实例上的事件，达到动态触发事件的行为，类似jquery中的trigger方法。

$emit(evtName, evtDetail)

触发当前实例监听事件函数，与 $on() 配合使用，注意：$emit() 目前只触发 $on 所监听的事件

示例如下：

 
 
 
    
  
  
  
  1. export default {  
    2. 
  
  
  
  2. emitEvent () {  
    3. 
  
  
  
  3. this.$emit('customEvtType1', { params: '参数内容' })  
    4. 
  
  
  
  4. }  
    5. 
  
  
  
  5. } 
    6.

监听原生组件事件

原生组件即框架自带的组件，如div，text等等，其支持一系列事件，如通用事件（如：click, disappear）、组件专有事件（如：focus）。完整的原生组件列表以及事件可在快应用官网查询到。

开发者可以在事件回调函数中，获取到当前触发组件的信息，并进行进一步的操作。

在响应函数执行时通过target获取，如：onClickHandler

在响应函数绑定时传递参数，如：onClickHandler2

示例如下：

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

解释一下

onClickHandler函数如果不传参数，默认参数env即为当前触发组件的实例；若传递了参数，如onClickHandler2，则参数安顺序排列，env为***一个参数。

触发原生组件事件

用户可通过手动操作触发事件，如点击事件等，除此之外，也可以在代码中通过$emitElement()完成事件的动态触发，类似上文自定义组件中的$emit()方法。

$emitElement(evtName, evtDetail, id)

可以触发指定组件id的事件，通过evt.detail获取传递的参数；该方法仅用于原生组件，对自定义组件无效。

示例如下：

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.   
    4. 
  
  
  
  4. .tutorial-page {  
    5. 
  
  
  
  5. flex-direction: column;  
    6. 
  
  
  
  6. }  
    7. 
  
  
  
  7.  
    8. 
  
  
  
  8.  
    9. 
  
  
  
  9.  
    10. 
 
 
 
解释一下
Click事件可通过用户点击操作触发，也可通过$emitElement触发。
自定义组件
上文曾提到原生组件，通常原生组件是我们系统中最基础的组件，然而我们在做一个稍微复杂的页面时，如果每个页面都只用原生组件搭建，那这样的代码的可维护性会差很多。打个比方，就好比一个人口众多的国家，没有省、市、县这些单位，而是只以个人为单位，难以想象这个国家的管理将有多难。道理类似，自定义组件，我们可以根据具体的业务逻辑，把页面按照功能拆成多个模块，每个模块负责其中的一个功能部分，***页面将由这些模块组合搭建起来，让代码结构更加清晰，易于维护。
自定义组件是开发者编写的组件，使用起来和Native原生组件一样，最终按照组件的