0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

Taro 鸿蒙技术内幕系列(三) - 多语言场景下的通用事件系统设计

京东云 来源:京东零售 朱天健 作者:京东零售 朱天健 2024-11-27 11:42 次阅读

作者:京东零售 朱天健

基于 Taro 打造的京东鸿蒙 APP 已跟随鸿蒙 Next 系统公测,本系列文章将深入解析 Taro 如何实现使用 React 开发高性能鸿蒙应用的技术内幕

背景

在鸿蒙生态系统中,虽然原生应用通常基于 ArkTS 实现,但在实际研发过程中发现,使用 C++ 可以显著提升应用框架和业务的性能表现。随着鸿蒙系统的不断迭代升级,不同语言环境间的协作已成为不可或缺的开发范式,共同构建了更丰富的研发生态。

Taro 通过接入鸿蒙端的 C-API 相关能力,将组件、样式布局等运行时逻辑下沉到 C++ 层,从而极大地提升了页面的渲染性能。

在这样的背景下,构建一套在 C++、ArkTS 等不同语言环境之间高效通信的事件系统,成为了一个极具价值,对于 Taro 来说也是必修的课题。

多语言环境的事件处理机制

Harmony 端的适配过程中,事件系统扮演着双重角色:不仅驱动应用、页面和各模块组件的生命周期,还因为 ArkTS 和业务代码(JS)之间存在人为设定的界限,需要事件作为桥梁,以便 JS 能够调用 ArkTS 的原生能力。

跨语言环境事件驱动架构的设计考量

在设计跨语言环境的事件驱动架构时,需要同时考虑 ArkTS、JS 和 C++ 等多个语言环境的限制和运行时差异。如何实现事件在这些环境之间的有序传递,以驱动页面和组件的生命周期,是事件系统设计的重要考量。

wKgZPGdGlSOAPZcrAAGmqc6Gcg8659.png

通过 C++ 实现事件的底层逻辑,构建一个高效的事件管理系统,可以有效避免冗余接口的设计。同时,与鸿蒙的 C-API 支持的事件系统对接,将各类事件分发到不同语言环境,确保跨语言环境的事件分发与处理的有序性、高效性。

wKgZO2dGlSSAf2CAAAHX5DoMO1s102.png

回顾 Taro 开始适配鸿蒙至今,事件系统也随之经历了从简单到完善的演进历程。从最初在 ArkTS 方案中的基础实现,到随着 Taro for Harmony 方案迭代发展,事件系统的设计也面临 ArkTS 带来的一些限制。

在 ArkTS 语言环境中事件架构的局限性

基于 ArkTS 语言环境实现的事件架构,在性能方面存在较大局限性。特别是在事件冒泡过程中,性能较差的语法,和回调逻辑可能会导致性能严重劣化,甚至阻塞主线程。这不仅会影响应用的响应速度,更有甚者可能对整体用户体验产生负面影响。

wKgZPGdGlSSAHGGSAADA2t22D_w421.png

为了解决这些问题,提升性能以保证用户体验成为关键目标。通过将事件处理逻辑下沉到 C++ 层,并置于后台线程执行等优化手段。能够有效提高代码执行效率,同时避免逻辑阻塞主线程导致的延迟响应,以提升应用的流畅性,提供更佳的用户体验。

wKgZO2dGlSWAFW8dAADnlqBBExY053.png

构建多语言环境下的事件系统

在构建多语言环境下的事件系统时,首要考虑各种类型的事件,比如:鸿蒙提供的组件通用事件、手势等。事件系统需要有效地管理这些不同的事件来源,并根据框架和用户的监听行为有序进行事件的分发。

wKgZPGdGlSWAV9nbAADVPJmdvnw220.png

在这些事件类型中,大致可以分为普通事件和节点事件两类。前者涵盖系统层面和应用、组件等生命周期的变化,通常由系统或应用状态的改变触发,主要由事件中心(eventCenter)来处理;节点事件则与 DOM Tree 紧密相关,这些事件通常需要快速响应,以确保用户界面的流畅性和交互的即时性。

事件中心(eventCenter)的实现

作为 Taro 运行时中的基础模块,事件中心专注于处理系统事件和生命周期。它允许框架和应用开发者在后台线程注册事件队列,并异步分发事件,从而有效减轻主线程的负担。事件中心能够快速响应各种事件,同时具备健壮的错误处理机制,帮助开发者快速定位和解决事件回调中的问题,从而提升开发效率和系统稳定性。

事件监听与分发

开发者可以在 C++ 和 ArkTS 等多种语言环境中创建事件监听器,并将相应的回调函数添加到事件队列中。这一机制允许开发者在不同的编程语言中灵活地定义和处理事件响应逻辑。

当事件触发时,会根据不同语言环境的运行时差异,将事件参数转换为对应的格式。这种参数转换确保了各语言环境能够正确理解并处理事件及包含的数据,无论是简单的数据类型还是复杂的对象结构,都能在不同语言之间无缝传递。

wKgZO2dGlSWAX-UNAAC4KKWUoWs688.png

事件队列会根据监听器的类型,按照预定义的顺序,将事件分发到相应的语言环境中。这样一来,每个监听器都能在其所属的环境中高效地执行对应的回调函数。通过这种方式,不仅可以实现了跨语言的事件处理,优化事件的分发效率,并确保应用在响应用户交互时保持高性能和高稳定性。

需要注意的是,受限于底层限制,在 ArkTS 环境中注册的事件需要回到主线程执行,同时在鸿蒙端不支持 Symbol 类型的事件。

节点事件处理(domEvent)

在 HTML 中,节点事件处理流程会如下图所示,事件从根节点开始向下传播至目标节点,触发后再从目标节点顺着节点树向上冒泡。在鸿蒙端实现中,Taro 基于这一事件传播流程,为开发者提供一致的事件处理机制。

事件类型

在 Taro 框架中,节点主要处理三种类型的事件:鸿蒙事件、鸿蒙手势事件和自定义事件。这些事件都是从TaroElement上进行监听和触发的。根据事件的类型不同,节点会从相应的事件源设置Receiver(事件接收器)来进行监听并处理回调逻辑。

wKgZPGdGlSaAPAyhAAFa9l80Ruk679.png

鸿蒙事件和鸿蒙手势事件分别通过RenderNode注册到Receiver,确保事件能够正确地传递和触发。而自定义事件则根据节点实现或用户自行触发,以满足各种不同类型的交互响应。

事件传播

当TaroElement上的事件被触发后,事件会沿着节点树向上传播。每个节点依次接收到事件,并执行相应的回调。执行完回调后,会检查开发者是否阻止冒泡,以决定是否继续向上传播。事件从目标节点开始,逐级往上直到根节点或者冒泡被阻止。

wKgZO2dGlSaAZxgwAABZX9izNiM649.png


这允许开发者在事件传播过程中,通过任意节点处理或拦截事件来调整业务逻辑实现,以更灵活的方式在特定节点上执行逻辑,或通过阻止冒泡避免对上层节点的影响。这样的设计对于前端开发者来说,更加熟悉、直观。

鸿蒙系统的底层节点事件也有自己的传播逻辑,但由于其机制与 ArkNode 节点树差异,为避免其事件干扰,需要阻止其冒泡行为并接管其传播流程,以确保事件传播与节点树正确关联。

事件回调

由于节点事件也需要回调 JS 环境中执行,根据事件类型的不同,按照 Web 标准将相应的节点、值和方法如 target、stopPropagation、value 等等挂载到事件对象上。通过执行当前回调的序列化方法,确保事件在不同语言环境传递时,可以保证其回调对象能力一致、参数完整。

在 C++ 中,许多组件依赖于事件机制来实现功能。例如,通过鸿蒙事件更新组件属性,还有各个组件节点间的事件传递等。这些组件利用事件机制来确保数据变化能够及时反映,并且用户交互能够顺利传递到系统的各个部分。

总结与展望

在多语言环境中,确保事件在不同语言环境传递时的一致性尤为重要,各个模块以及应用内不同页面或组件通过事件解耦驱动来提升可维护性。当前的解决方案有效提升了系统的响应速度和模块间的协作能力。

当下方案实现中仍然存在一些问题,比如早期通过事件绕过 ArkTS 与 JS 之间相互调用限制等场景,可以通过 TurboModule 来提供更加直接的调用方案。

未来,在 Taro for Harmony 场景下,各语言模块的协同将进一步增强。基于事件系统的设计,可以有效地解耦模块间逻辑,实现更灵活的组合。

审核编辑 黄宇

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 系统设计
    +关注

    关注

    0

    文章

    153

    浏览量

    21595
  • 鸿蒙
    +关注

    关注

    57

    文章

    2320

    浏览量

    42748
收藏 人收藏

    评论

    相关推荐

    鸿蒙Taro实战:01-搭建开发环境

    ## 配置鸿蒙环境 ### 下载安装 DevEco ### 配置IDE 打开 `Prefreences`, `OpenHarmony SDK`, 勾选 `API Version 12
    发表于 11-06 16:42

    Taro 鸿蒙技术内幕系列(二):如何让 W3C 标准的 CSS跑在鸿蒙

    作者:京东零售 马银涛   基于 Taro 打造的京东鸿蒙 APP 已跟随鸿蒙 Next 系统公测,本系列文章将深入解析
    的头像 发表于 10-31 10:54 126次阅读
    <b class='flag-5'>Taro</b> <b class='flag-5'>鸿蒙</b><b class='flag-5'>技术</b><b class='flag-5'>内幕</b><b class='flag-5'>系列</b>(二):如何让 W3C 标准的 CSS跑在<b class='flag-5'>鸿蒙</b>上

    ChatGPT 的多语言支持特点

    技术迎来了巨大的挑战和机遇。ChatGPT,作为一个领先的语言模型,其多语言支持的特点成为了它在众多应用场景中不可或缺的优势。 1. 多语言
    的头像 发表于 10-25 17:30 687次阅读

    Taro鸿蒙技术内幕系列(一):如何将React代码跑在ArkUI上

    基于 Taro 打造的京东鸿蒙 APP 已跟随鸿蒙 Next 系统公测,本系列文章将深入解析 Taro
    的头像 发表于 10-25 17:24 251次阅读
    <b class='flag-5'>Taro</b><b class='flag-5'>鸿蒙</b><b class='flag-5'>技术</b><b class='flag-5'>内幕</b><b class='flag-5'>系列</b>(一):如何将React代码跑在ArkUI上

    科大讯飞发布讯飞星火4.0 Turbo大模型及星火多语言大模型

    ,科大讯飞以其一贯的创新精神,开创性地发布了星火多语言大模型。这一创新之举不仅进一步巩固了科大讯飞在中文和英文处理领域的领先地位,更将语言的支持范围大幅扩展,涵盖了俄语、日语、阿拉伯语、韩语、法语、西班牙语、葡萄牙语以及
    的头像 发表于 10-24 13:58 329次阅读

    鸿蒙系统防平板怎么样

    鸿蒙系统防平板是一款功能强大、性能卓越的平板电脑,其独特的防设计使其成为各种恶劣环境的理想选择。无论是户外探险、工地作业还是军事应用,
    发表于 04-12 14:26

    OpenHarmony开发技术:【国际化】实例

    ArkUI开发框架对多语言的支持比较友好,只需要在 `resources` 目录下创建对应国家的文件夹,名称对国家简码,例如中国为 `zh` ,则在 `resources` 创建 `zh` 文件夹,然后在 `zh` 文件创建
    的头像 发表于 04-11 09:40 371次阅读
    OpenHarmony开发<b class='flag-5'>技术</b>:【国际化】实例

    鸿蒙系统防平板电脑突出的性能和环境的适用性

    、防摔等方面表现出色,能够在恶劣环境稳定运行,满足用户在各种场景的使用需求。一、性能卓越鸿蒙系统
    发表于 04-09 14:24

    这个多语言包 怎么搜不到

    大家好,这个多语言包怎么搜不到 seven language lib 谁有离线包不 感谢分享,
    发表于 03-24 10:06

    语言模型(LLMs)如何处理多语言输入问题

    研究者们提出了一个框架来描述LLMs在处理多语言输入时的内部处理过程,并探讨了模型中是否存在特定于语言的神经元。
    发表于 03-07 14:44 559次阅读
    大<b class='flag-5'>语言</b>模型(LLMs)如何处理<b class='flag-5'>多语言</b>输入问题

    纯血鸿蒙系统,拿什么与安卓、iOS比?

    、数码、车载等等一系列生态闭环。 而华为鸿蒙是全栈自研底座,从AI大模型、AI框架、安全隐私、集成开发环境、设计系统、编程框体、编译器、编程语言和文件系统,到操作
    发表于 02-21 21:04

    语言模型中的语言与知识:一种神秘的分离现象

    自然语言处理领域存在着一个非常有趣的现象:在多语言模型中,不同的语言之间似乎存在着一种隐含的对齐关系。
    发表于 02-20 14:53 499次阅读
    大<b class='flag-5'>语言</b>模型中的<b class='flag-5'>语言</b>与知识:一种神秘的分离现象

    使用 Taro 开发鸿蒙原生应用 —— 快速上手,鸿蒙应用开发指南

    鸿蒙原生应用。 在 《使用 Taro 开发鸿蒙原生应用》 系列文章中,我们已经介绍了 鸿蒙的基本概念 和
    的头像 发表于 02-02 16:09 826次阅读
    使用 <b class='flag-5'>Taro</b> 开发<b class='flag-5'>鸿蒙</b>原生应用 —— 快速上手,<b class='flag-5'>鸿蒙</b>应用开发指南

    GT Designer3 画面多语言切换功能

    新建工程后点击“系统”---选择 “语言切换”---勾选“使用语言切换”----填写“语言切换软元件 D200(可自定义PLC未使用的软元件)”通过改变
    的头像 发表于 12-04 15:07 1343次阅读
    GT Designer3 画面<b class='flag-5'>多语言</b>切换功能

    多语言开发的流程详解

    现在不少应用都是要求有多语言切换的, 使用QT开发上位机也同样需要做多语言功能, 不过QT是自带了多语言翻译功能, 可以很方便的借助原生工具进行, 下面就简单来看看多语言开发的流程!
    的头像 发表于 11-30 09:08 1051次阅读