小程序框架视图层介绍之FTS 响应事件

FTS 响应事件

#4.1 背景

当小程序需要实现频繁用户交互的效果时，如果采用常规实现方法，如：

页面有 2 个元素 A 和 B，用户在 A 上做 touchmove 手势，要求 B 也跟随移动，movable-view 就是一个典型的例子。一次 touchmove 事件的响应过程为：

i、touchmove 事件从视图层（View）抛到逻辑层（Service）

ii、逻辑层（Service）处理 touchmove 事件，再通过 setData 来改变 B 的位置

一次 touchmove 的响应需要经过 2 次的逻辑层和渲染层的通信以及一次渲染，通信的耗时比较大。

此外 setData 渲染也会阻塞其它脚本执行，导致了整个用户交互的动画过程会有延迟，交互的实际表现不会很理想。

#4.2 解决方案

基于以上原因，可以使用 FTS 函数用来响应小程序事件，然后在视图层（View）处理 dom 样式，实现比较好的效果。

目前只能响应内置组件的事件，不支持自定义组件事件。

FTS 函数的除了纯逻辑的运算，还可以通过封装好的 ComponentDescriptor 实例来访问以及设置组件的 class 和样式，对于交互动画，设置 style 和 class 能满足绝大多数需求了。

FTS 函数的例子如下：

var event = function(event, ownerInstance) {
    // 获取组件实例
    var instance = ownerInstance.selectComponent('.some-component')
    instance.setStyle({
      color: 'red',
      "font-size": '18rpx'
    })
    instance.setClass('other-class')
    return false // 不往上冒泡}
        已复制代码

其中入参 event 是小程序事件对象基础上多了 event.instance 来表示触发事件的组件的 ComponentDescriptor 实例。

ownerInstance 表示的是触发事件的组件所在的组件的 ComponentDescriptor 实例，如果触发事件的组件是在页面内的，则 ownerInstance 表示的是页面实例。

ComponentDescriptor 目前支持的 API 如下：

#4.3 使用方法

FXML 定义事件：

<fts module="event" src="./event.fts"></fts><view bindtouchmove="{{event.touchmove}}" class="movable"></view>
        已复制代码

注意：FTS 函数必须用 {{}} 括起来。

文件 event.ftx 里面定义并导出函数：

module.exports = {
    touchmove: function(event, instance) {
        console.log('log event')
    },
    otherEvent: function(event, instance) {
        console.log('log event')
    }}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。