基于数据源驱动的跨组件通信最佳实践(低码篇)(跨数据源联合查询)

hello, 大家好, 我是徐小夕, 之前一直在研究可视化零代码相关产品的技术落地, 也分享了很多可视化低代码的 技术实践, 今天和大家继续分享一下低代码平台中组件通信的一些技术方案和实现.

背景

聊到低代码或零代码大家也许并不陌生, 国内外有很多优秀的低代码或零代码产品, 可以帮助我们更低成本的搭建页面或者应用. 从完整的业务搭建流程上看, 低代码的页面搭建能力需要具备如下3点:

基于数据源驱动的跨组件通信最佳实践(低码篇)(跨数据源联合查询)

image.png

静态页面设计能力组件交互能力 我之前也做过很多分享和开源, 感兴趣的大家可以参考一下:

  • 低代码开发平台核心功能设计——组件自定义交互实现
  • 基于自然流布局的可视化拖拽搭建平台设计方案
  • 用第三方拖拽库快速撸一个可视化搭建平台
  • 轻松教你搞定组件的拖拽, 缩放, 多控制点伸缩和拖拽数据上报

接下来我们重点介绍 跨组件通信能力.

为什么要实现跨组件通信

传统的可视化搭建平台更多的能力在于设计层, 我们使用它可以很好地搭建出静态页面, 比如易企秀, 早期的Dooring V1.0版本, 覆盖的更多是宣传页, 电子相册, 简单的信息收集页等:

基于数据源驱动的跨组件通信最佳实践(低码篇)(跨数据源联合查询)

image.png

为了让可视化搭建平台更多的渗透到业务层, 一定离不开以下两点:

  • 复杂的交互逻辑
  • 与数据接口的打通

复杂的交互能力 意味着我们搭建的每个组件都不是孤立的个体, 而是可以相互影响联动的, 更多的还原真实开发的体验(比如 vue 开发中通过 vuex 来实现组件间数据互通与交互, react 中的redux 或者 mobx 等实现跨组件的数据传递和互通).

基于数据源驱动的跨组件通信最佳实践(低码篇)(跨数据源联合查询)

image.png

和数据接口的打通 意味着我们要在组件搭建层让用户配置自定义的api接口和数据自定义的能力, 那么基于这样的背景, 我们就可以设计标准的 数据源 来解决. 有关数据源的一些实现方案我也在之前的文章中分享过, 感兴趣的可以参考一下:

  • (低代码)可视化搭建平台数据源设计剖析

所以目前主流低代码或者侧重业务层面的零代码平台一定会满足以上两个痛点, 这样才能让平台更大程度的覆盖业务场景, 实现降本增效的目标.

接下来我会分享一下如何基于数据源, 来实现跨组件通信.

效果演示

我们以常用的搜索功能来演示跨组件通信.

首先我们在搭建平台拖拽1个搜索组件和一个商品组件:

基于数据源驱动的跨组件通信最佳实践(低码篇)(跨数据源联合查询)

2023-12-14 13.15.18.gif

然后将商品组件和搜索组件关联, 最后保存页面访问:

基于数据源驱动的跨组件通信最佳实践(低码篇)(跨数据源联合查询)

2023-12-14 13.18.25.gif

以上演示可以看到, 搜索组件可以将商品组件的内容搜索出来, 进而实现了组件联动.

实现方案

基于数据源驱动的跨组件通信最佳实践(低码篇)(跨数据源联合查询)

image.png

我之前也分享了几种常用的组件通信方案, 如下:

  1. props/$emit
  2. 子组件向父组件传值
  3. eventBus($emit/$on)
  4. vuex / redux
  5. $attrs/$listeners
  6. provide/inject

具体的实现方式我在 低代码平台组件间通信方案复盘 有详细的介绍, 这里和大家分享一下我最近设计的一种组件间通信的方案 —— 自定义事件通信.

没错, 我们用的就是 CustomEvent.

事件本质上是一种通信方式,一种消息机制,我们在遇到多对象多模块场景时,使用事件进行通信是一种非常有效的方式。在多模块化开发时,可以使用自定义事件进行模块间通信。

基于数据源驱动的跨组件通信最佳实践(低码篇)(跨数据源联合查询)

image.png

我们使用自定义事件也很简单, 就像我上面画的图一样, 我们只需要具备3个条件:

  • 事件创建者
  • 事件监听者
  • 事件派发者

接下来我们用MDN的案例来说明如何使用它:

const form = document.querySelector("form");const textarea = document.querySelector("textarea");// 创建一个新事件,允许冒泡,并提供要传递给“detail”属性的任何数据const eventAwesome = new CustomEvent("awesome", { bubbles: true, detail: { text: () => textarea.value },});// 表单(form)元素监听自定义的“awesome”事件,然后在控制台打印传递的 text() 方法的输出form.addEventListener("awesome", (e) => console.log(e.detail.text()));// 当用户输入时,表单中的文本区域会分派/触发事件,并以自身为事件的起点textarea.addEventListener("input", (e) => e.target.dispatchEvent(eventAwesome));

以上就实现了一下自定义事件的监听和派发, 我们可以让不同的元素监听同一个事件, 并进行不同的逻辑处理.

同时它的兼容性也非常好, 主流浏览器都支持:

基于数据源驱动的跨组件通信最佳实践(低码篇)(跨数据源联合查询)

image.png

有了以上基础, 我们接下来来实现一下在低代码中基于事件的组件通信模式.

基于数据源驱动的跨组件通信

上面介绍了跨组件通信, 但是我们为了让业务层能更好的接入低代码或者零代码, 我们需要设计统一的数据源规范.

基于数据源驱动的跨组件通信最佳实践(低码篇)(跨数据源联合查询)

image.png

对于数据源的设计, 根据实际的业务需求, 我们可以分为静态数据源和动态数据源. 静态数据源是用户可以通过可视化的方式在低代码平台上创建的, 比如编辑数据表格等.

动态数据源是指用户可以自定义的请求第三方的数据服务, 组件消费数据源完全是动态调用的, 类似于我们传统开发时使用的ajax请求.

基于数据源驱动的跨组件通信最佳实践(低码篇)(跨数据源联合查询)

image.png

当然为了保持普适性和接入的规范性, 我们需要提前约定数据源的字段和字段格式, 这样不同企业的业务数据都可以通过适配器来被通用的低代码组件消费. 这里分享一下 Dooring 的零代码创建数据源的模式:

基于数据源驱动的跨组件通信最佳实践(低码篇)(跨数据源联合查询)

image.png

数据源其实就是用户的一个通过可视化的方式来创建管理的数据库, 我们可以静态的录入数据, 也可以动态的通过接口获取数据:

基于数据源驱动的跨组件通信最佳实践(低码篇)(跨数据源联合查询)

image.png

基于数据源驱动的跨组件通信最佳实践(低码篇)(跨数据源联合查询)

image.png

然后我们在组件配置面板中就可以一键绑定数据源了:

基于数据源驱动的跨组件通信最佳实践(低码篇)(跨数据源联合查询)

image.png

接下来我们来实现组件通信的部分, 效果如下图:

基于数据源驱动的跨组件通信最佳实践(低码篇)(跨数据源联合查询)

2023-12-14 13.18.25.gif

首先在搜索组件中创建事件并派发:

const handleSearch = () => { if(targetId) { document.dispatchEvent(new CustomEvent(`search_${targetId}`, { detail: textRef.current.value })) } }

为了保持事件被监听的对象可控, 我们需要通过组件id来明确指定组件的监听目标, 所有事件名可以用目标id 业务词来组成.

接下来我们可以在商品组件来设计统一的监听:

useEffect(() => { const eventName = `search_${id}`; function handleDataChange(event: any) { // 将数据传递给业务函数 handleSearch(event.detail); } document.addEventListener(eventName, handleDataChange) return () => document.removeEventListener(eventName, handleDataChange) }, [])

这样我们就能将 搜索组件的值通过 event.detail 方式传递给商品组件, 并在搜索按钮中触发事件的执行, 从而影响商品组件的业务函数的执行.

当然这只是一个简单的案例, 我们还可以利用这样的机制设计更复杂的通信, 比如事件队列, 让一个组件依次执行一系列的事件逻辑.

基于数据源驱动的跨组件通信最佳实践(低码篇)(跨数据源联合查询)

image.png

好啦,今天的内容就分享到这, 后续还会持续分享低代码零代码的最佳实践和技术复盘, 如果你也对它感兴趣, 欢迎随时交流沟通. 也可以关注 《低代码可视化》, 获取更多低代码零代码干货.

更多推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)
上一篇 2024年5月16日 上午10:30
下一篇 2024年5月16日 上午10:42

相关推荐

  • 四川省教育科研课程资源管理系统

    四川省教育科研课程资源管理系统 四川省教育科研课程资源管理系统是一种用于收集,管理和分享教育科研课程资源的软件系统。该系统旨在提高四川省的教育水平,为教育科学研究提供有效的资源支持…

    科研百科 2024年10月28日
    0
  • 2018有机肥补贴新政出台:每吨补贴400元 如何申请?

      有机肥不仅能为农作物提供全面营养,而且肥效长,可增加和更新土壤有机质,促进微生物繁殖,改善土壤的理化性质和生物活性,种出来的农产品绿色健康,是绿色食品生产的主要养分来源。UPB…

    科研百科 2022年5月15日
    389
  • 学术思想

    学术思想是研究某个领域或主题的思想和方法,是学者们长期探索和思考的结果。它不仅是学科的基础,也是推动学科发展的重要力量。本文将介绍一些学术思想,这些思想涵盖了多个学科领域,包括哲学…

    科研百科 2024年10月1日
    18
  • 投屏怎么投到电视上,这个软件带你轻松搞定(投屏怎么投到电视上,这个软件带你轻松搞定)

    手机屏幕太小,大家就想把手机投屏投到电视上,放大了看。下面就为大家介绍下投屏怎么投到电视上。首先需要在电视上安装当贝投屏。这是一款支持苹果、华为、安卓手机投屏的投屏软件。 下面就先…

    科研百科 2023年3月12日
    223
  • 项目管理信系统

    项目管理信系统 随着信息技术的不断发展,项目管理信系统已经成为了现代项目管理中不可或缺的一部分。项目管理信系统是一种通过电子邮件或短信等方式进行项目管理的工具,它可以帮助管理者高效…

    科研百科 2024年8月17日
    40
  • PMP考试易混淆知识点概念+混淆图(附上备考资料总集)

    | PMP知识点整合合集: 一篇足以:吐血分享史上超全PMP考试资料、项目管理资料 – 知乎 | 混淆概念 德尔菲技术 德尔菲技术是组织专家达成一致意见的一种方法。项目…

    科研百科 2022年12月12日
    373
  • 医院保卫科工作制度(医院保卫科工作制度、职责)

    为认真贯彻党的路线、方针政策和国家的法律法规,确保医院医疗、教学、科研等工作的正常开展及顺利完成,落实预防为主、突出重点、保障安全的工作方针,保卫科人员各尽其责,特制定本制度。 一…

    科研百科 2024年1月28日
    112
  • 项目工程进度软件

    项目工程进度软件 随着现代工程领域的迅速发展,项目工程进度软件已经成为了项目管理人员必备的工具之一。项目工程进度软件可以帮助项目管理人员更好地控制和管理项目进度,提高项目的效率和质…

    科研百科 2024年8月16日
    46
  • 省科协书记什么级别

    省科协书记是省科技馆的领导人,也是省科学技术协会的主席,是省科学技术协会的主要负责人之一。省科协书记的级别属于正厅级别。 省科协书记的工作主要是负责省科技馆的管理工作,推动科学技术…

    科研百科 2024年10月17日
    2
  • 如何用excel表格做工程管理系统

    如何用Excel表格做工程管理系统 随着数字化时代的到来,工程管理也逐渐走向信息化。如何通过一个简单的电子表格来管理系统的各个环节,提高效率,降低成本,是工程管理中一个非常重要的问…

    科研百科 2024年10月14日
    8