快应用的变乱监听机制和组件间通讯
副问题[/!--empirenews.page--]
提及变乱,做前端开拓的伴侣必然不会生疏。变乱,即网页上的一系列举动,可所以赏识器举动,如页面完成了加载,页面封锁;或是用户操纵举动,如用户输入操纵,用户点击按钮等,这些举动会被JavaScript监测到,并执行响应的逻辑代码。可以说,前端的交互举动与变乱机制痛痒相干,对付前端开拓者而言,把握功德件机制是绝对须要的。 所谓组件,即封装起来的具有独立成果的UI部件。试想,假如开拓一个伟大的页面,开拓者把全部的UI部门写在一个文件中,这样的代码显然可维护性很低。但我们假如用组件的方法去从头思索UI组成,将UI上每一个成果相对独立的模块界说成组件,然后将小的组件通过组合可能嵌套的方法组成大的组件,进而完成整体UI的开拓。这样,我们不只进步了代码的复用性,且整体布局清楚,维护性则大大进步。 组件化界面 本文将先容在快应用开拓中,变乱相干的首要API以及变乱的监听、触发机制,同时会先容快应用中组件是怎样通讯的。阅读本文前,提议先相识快应用相干基本常识。 自界说变乱的监听、移除与触发 $on 用于监听自界说变乱;$off移除对应的变乱监听;$emit()、$dispatch()、 $broadcast()等要领可用于触发变乱。 $on(evtName, fnHandler)变乱 在当前页面注册监听变乱, 可监听$emit()、 $dispatch()、 $broadcast()等触发的自界说变乱,不能用于注册组件节点的变乱相应。 示譬喻下:
表明一下 'customEvtType1'为该组件上自界说的变乱名称,customEvtType1Handler为当'customEvtType1'变乱被触发时,要执行的回调函数。 $off(evtName, fnHandler) 移除变乱监听,,参数 fnHandler 为可选,转达仅移除指定的相应函数,不转达则移除此变乱的全部监听。 示譬喻下:
页面的交互中也许会碰着一些非手动触发的需求,$emit() 通过触发当前实例上的变乱,到达动态触发变乱的举动,相同jquery中的trigger要领。 $emit(evtName, evtDetail) 触发当前实例监听变乱函数,与 $on() 共同行使,留意:$emit() 今朝只触发 $on 所监听的变乱 示譬喻下:
监听原生组件变乱 原生组件即框架自带的组件,如div,text等等,其支持一系列变乱,如通用变乱(如:click, disappear)、组件专有变乱(如:focus)。完备的原生组件列表以及变乱可在快应用官网查询到。 开拓者可以在变乱回调函数中,获取到当前触发组件的信息,并举办进一步的操纵。 在相应函数执行时通过target获取,如:onClickHandler 在相应函数绑按时转达参数,如:onClickHandler2 示譬喻下:
表明一下 onClickHandler函数假如不传参数,默认参数env即为当前触发组件的实例;若转达了参数,如onClickHandler2,则参数安次序分列,env为最后一个参数。 触发原生组件变乱 用户可通过手动操纵触发变乱,如点击变乱等,除此之外,也可以在代码中通过$emitElement()完成变乱的动态触发,相同上文自界说组件中的$emit()要领。 $emitElement(evtName, evtDetail, id) 可以触发指定组件id的变乱,通过evt.detail获取转达的参数;该要领仅用于原生组件,对自界说组件无效。 (编辑:河北网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |