智能小程序事件系统——SJS响应事件实现方案

背景信息

如有频繁用户交互,在小程序上表现是比较卡顿的。例如,页面有 2 个元素 A 和 B,用户在 A 上做 touchmove 手势,要求 B 也跟随移动,movable-view 就是一个典型的例子。一次 touchmove 事件的响应过程为:

  1. touchmove 事件从视图层(Webview)抛到逻辑层(App Service)。

  2. 逻辑层(App Service)处理 touchmove 事件,再通过 setData 来改变 B 的位置。

一次 touchmove 的响应需要经过 2 次逻辑层和渲染层的通信以及一次渲染,通信的耗时比较大。此外,setData 渲染也会阻塞其它脚本执行,导致整个用户交互的动画过程出现延迟。

实现方案

本方案基本的思路是减少通信次数,让事件在视图层(Webview)响应。小程序的框架分为视图层(Webview)和逻辑层(App Service)。这样分层的目的是管控,开发者的代码只能运行在逻辑层(App Service),而这个思路就必须要让开发者的代码运行在视图层(Webview),如下图所示的流程:

使用 SJS 函数用来响应小程序事件,目前只能响应内置组件的事件,不支持自定义组件事件。SJS 函数除了纯逻辑的运算,还可以通过封装好的 ComponentDescriptor 实例来访问以及设置组件的 class 和样式。对于交互动画,设置 style 和 class 足够了。SJS 函数的例子如下:

const sjsFunction = function (event, ownerInstance) {const instance = ownerInstance.selectComponent('.classSelector'); // 返回组件的实例instance.setStyle({'font-size': '14px',});instance.getDataset();instance.setClass(className);// ...return false; // 不往上冒泡,相当于同时调用了 stopPropagation 和 preventDefault
};

其中,入参 event 是小程序事件对象基础上多了 event.instance,来表示触发事件的组件的 ComponentDescriptor 实例。ownerInstance 表示的是触发事件的组件所在组件的 ComponentDescriptor 实例。如果触发事件的组件是在页面内的,ownerInstance 表示的是页面实例。

ComponentDescriptor 的定义如下:

方法参数描述
selectComponentselector 对象返回组件的 ComponentDescriptor 实例。
selectAllComponentsselector 对象数组返回组件的 ComponentDescriptor 实例数组。
setStyleObject/string设置组件样式。设置的样式优先级高于组件 tyml 里面定义的样式。不能设置最顶层页面的样式。

addClass/removeClass

/hasClass

string设置组件的 class。设置的 class 优先级高于组件 tyml 里面定义的 class。不能设置最顶层页面的 class
getDataset返回当前组件或者页面的 dataset 对象。
callMethod(funcName:string, args:object)调用当前组件或者页面在逻辑层(App Service)定义的函数。funcName 表示函数名称,args 表示函数的参数。
requestAnimationFrameFunction和原生 requestAnimationFrame 一样。用于设置动画。
getState返回一个 object 对象。当局部变量需要存储起来,以便后续使用的时候,可以用这个方法。
triggerEvent(eventName, detail)和组件的 triggerEvent 一致。
getComputedStyleArray.<string>参数与 SelectorQuery 的 computedStyle 一致。
setTimeout(Function, Number)与原生 setTimeout 一致。用于创建定时器。
clearTimeoutNumber与原生 clearTimeout 一致。用于清除定时器。
getBoundingClientRect返回值与 SelectorQuery 的 boundingClientRect 一致。

SJS 运行在视图层(Webview),里面的逻辑毕竟能做的事件比较少,需要有一个机制和逻辑层(App Service)开发者的代码通信。上面的 callMethod 是 SJS 里面调用逻辑层(App Service)开发者的代码的方法,而 SjsPropObserver 是逻辑层(App Service)开发者的代码调用 SJS 逻辑的机制。

使用方法

tyml 定义事件:

<sjs module="test" src="./test.sjs"></sjs><view change:prop="{{test.propObserver}}" prop="{{propValue}}" bind:touchmove="{{test.touchmove}}" class="movable"></view>

上面的 change:prop(属性前面带 change: 前缀)是在 prop 属性被设置的时候触发 SJS 函数,值必须用 {{}} 括起来。类似 Component 定义的 properties 里面的 observer 属性,在 setData({propValue: newValue}) 调用之后会触发。

注意:SJS 函数必须用 {{}} 括起来。当 prop 的值被设置时,SJS 函数就会触发,而不只是值发生改变。所以在页面初始化时,会调用一次 SjsPropObserver 的函数。

SJS 文件 test.sjs 里面定义并导出事件处理函数和属性改变触发的函数:

// event:事件对象。
// ownerInstance:表示的是触发事件的组件所在组件的 ComponentDescriptor 实例。如果触发事件的组件是在页面内的,ownerInstance 表示的是页面实例。
const touchmove = function (event, ownerInstance) {console.log('log event', JSON.stringify(event));
};// newValue:新值。
// oldValue:旧值。
// ownerInstance:表示的是触发事件的组件所在组件的 ComponentDescriptor 实例。如果触发事件的组件是在页面内的,ownerInstance 表示的是页面实例。
// instance:表示触发事件的组件的 ComponentDescriptor 实例。
const propObserver = function (newValue, oldValue, ownerInstance, instance) {console.log('prop observer', newValue, oldValue);
};export default {touchmove: touchmove,propObserver: propObserver,
};

立即开发。 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/658231.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

可以举一反三的动态规划问题(最短编辑问题)

给定两个字符串 A 和 B&#xff0c;现在要将 A经过若干操作变为 B&#xff0c;可进行的操作有&#xff1a; 删除–将字符串 A 中的某个字符删除。插入–在字符串 A 的某个位置插入某个字符。替换–将字符串 A 中的某个字符替换为另一个字符。 现在请你求出&#xff0c;将 A 变…

第9章 安全漏洞、威胁和对策(9.1-9.2)

9.1 共担责任(shared responsibility) 共担责任是安全设计的原则&#xff0c;表明任何机构都不是孤立运行的。 相反&#xff0c;它们与世界有着千丝万缕的联系。我们使用相同的基本技术&#xff0c;遵循相同的通信协议规范&#xff0c;在同一个互联网上漫游&#xff0c;共用操…

Shell脚本——免交互

目录 一、Here Document免交互 1、免交互概述 2、语法格式 2.1示例&#xff1a;免交互方式实现对行数的统计&#xff0c;将要统计的内容置于标记EOF之间&#xff0c;直接将内容传给wc-l来统计 3、变量设定 ①变量图换成实际值 ②整行内容作为变量并输出结果 ③使输出内…

基于深度学习的鸟类识别系统matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1 卷积神经网络基础 4.2 GoogLeNet模型 4.3 鸟类识别系统 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 ............................…

STM32 IIC电量计LTC2944

1 描述 LTC2944 可在便携式产品应用中测量电池充电状态、电池电压、电池电流及其自身温度。宽输入电压范围允许使用高达 60V 的多节电池。精密库仑反向积分电流通过电池正极端子与负载或充电器之间的检测电阻器。 电压、电流和温度由内部 14 位无延迟 ΔΣ™ ADC 测量。测量结…

Linux:理解信号量以及内核中的三种通信方式

文章目录 共享内存的通信速度消息队列msggetmsgsndmsgrcvmsgctl 信号量semgetsemctl 内核看待ipc资源单独设计的模块ipc资源的维护 理解信号量总结 本篇主要是基于共享内存&#xff0c;延伸出对于消息队列和信号量&#xff0c;再从内核的角度去看这三个模块实现进程间通信 共享…

【教学类-44-04】20240130 print dashed(虚线字体)制作的数字描字帖

作品展示&#xff1a;背景需求&#xff1a; 制作绿色数字的数字描字帖 选用字体&#xff1a;print dashed&#xff08;虚线字体&#xff09; 【教学类-44-03】20240111阿拉伯数字字帖的字体&#xff08;三&#xff09;——德彪钢笔行书&#xff08;实线字体&#xff09;和pri…

如何使用Docker部署JSON Crack

文章目录 1. 在Linux上使用Docker安装JSONCrack2. 安装Cpolar内网穿透工具3. 配置JSON Crack界面公网地址4. 远程访问 JSONCrack 界面5. 固定 JSONCrack公网地址 JSON Crack 是一款免费的开源数据可视化应用程序&#xff0c;能够将 JSON、YAML、XML、CSV 等数据格式可视化为交互…

Kafka运维相关知识

目录 一、基本概念 二、技术特性 三、设计思想 四、运维建议 一、基本概念 Apache kafka 是一个分布式的基于push-subscribe的消息系统&#xff0c;它具备快速、可扩展、可持久化的特点。它的最大的特性就是可以实时的处理大量数据以满足各种需求场景&#xff1a;比如基于h…

Mysql基础篇笔记

数据表 链接&#xff1a;https://pan.baidu.com/s/1dPitBSxLznogqsbfwmih2Q 提取码&#xff1a;b0rp --来自百度网盘超级会员V5的分享 sql的执行顺序 根据顺序 也就是说 select后面的字段别名 只能在order by中使用 mysql不支持sql92的外连接 mysql不支持满外连接 可以…

java反射常用方法

反射思维导图 使用案例 package Reflection.Work.WorkTest01;import java.lang.reflect.Constructor; import java.lang.reflect.Field; import java.lang.reflect.InvocationTargetException; import java.lang.reflect.Method; import java.util.Arrays;public class WorkDe…

10-Nacos-灰度发布配置

用于生产上线后&#xff0c;针对指定主机IP做定向测试 1、在配置编辑中&#xff0c;勾选Beta发布&#xff0c;在文本框中勾选需要下发服务的IP地址&#xff0c;多个用英文逗号分隔。 正式版&#xff1a;这个是针对除了Beta版中指定的IP服务生效Beta版&#xff1a;灰度配置&am…

粤Z车牌申请需要什么条件?

深圳湾口岸: 上一年度纳税数额达到15万元以上的&#xff0c;可以申办1个商务车指标 上一年度的纳税数额达到50万元以上的&#xff0c;可以申办第2个商务车指标; 上一年度的纳税数额达到100万元以上的&#xff0c;可以申办第3个商务车指标; 从申办第4个商务车指标起&#xff0c;…

yolov8:pt 转 onnx

yolov8官方教程 1.安装包 我使用的是虚拟环境&#xff0c;yolov8包已经下载到本地了&#xff0c;因此直接在anaconda prompt 命令行继续安装 首先激活自己的虚拟环境&#xff0c;然后执行安装命令 pip install ultralytics yolov8中没有requirement.txt文件&#xff0c;直接…

RTC实时时钟之读取时间

1. RTC 基本介绍 RTC(Real Time Clock) 即实时时钟&#xff0c;它是一个可以为系统提供精确的时间基准的元器件&#xff0c;RTC一般采用精度较高的晶振作为时钟源&#xff0c;有些RTC为了在主电源掉电时还可以工作&#xff0c;需要外加电池供电 2. RTC 控制器 2.1 RTC的特点是:…

知识点积累系列(四)Kubernetes篇【持续更新】

云原生学习路线导航页&#xff08;持续更新中&#xff09; 本文是 知识点积累 系列文章的第四篇&#xff0c;记录日常学习中遇到的 Kubernetes 相关的知识点 1.Kubernetes琐碎知识点 1.1.为什么要有annotations annotation中除了能够记录一些额外信息&#xff0c;还可以解决k…

[BUUCTF]-PWN:cmcc_pwnme2解析

保护 ida 完整exp&#xff1a; from pwn import* context(log_leveldebug) #premote(node5.buuoj.cn,26964) pprocess(./pwnme2) addhome0x8048644 addflag0x8048682 getfile0x80485CB main0x80486F8 pop_ebp0x8048680 ret0x80483f2 pop_ebx0x8048409 pop_edi_ebp0x804867f st…

常见的网络安全威胁和防护方法

随着数字化转型和新兴技术在各行业广泛应用&#xff0c;网络安全威胁对现代企业的业务运营和生产活动也产生了日益深远的影响。常见的网络安全威胁通常有以下几种&#xff1a; 1. 钓鱼攻击 攻击者伪装成合法的实体&#xff08;如银行、电子邮件提供商、社交媒体平台等&#xf…

超越传统—Clean架构打造现代Android架构指南

超越传统—Clean架构打造现代Android架构指南 1. 引言 在过去几年里&#xff0c;Android应用开发经历了巨大的变革和发展。随着移动设备的普及和用户对应用的期望不断提高&#xff0c;开发人员面临着更多的挑战和需求。传统的Android架构在应对这些挑战和需求时显得有些力不从…

笔记---中国剩余定理

全程学自y总 AcWing.204.表达整数的奇怪方式 给定 2 n 2n 2n 个整数 a a a1, a a a2,…, a a an 和 m m m1, m m m2,…, m m mn&#xff0c;求一个最小的非负整数 x x x&#xff0c;满足 ∀ i ∈ [ 1 , n ] , x ≡ m ∀i∈[1,n],x≡m ∀i∈[1,n],x≡mi ( m o d a (mod a (…