当前位置：首页 > 科技 > 软件

低代码平台组件间通信方案复盘

来源：责编：时间：2023-09-28 10:05:26 204观看

导读背景介绍3年前我开发了一款零代码搭建平台 H5-Dooring, 主要目的是想用更低的成本, 更快的效率, 上线 web 页面(其实是不想写重复的代码了,写麻了). 好在陆陆续续折腾了3年, 目前已经可以满足基本的页面设计和搭建能

背景介绍

3年前我开发了一款零代码搭建平台 H5-Dooring, 主要目的是想用更低的成本, 更快的效率, 上线 web 页面(其实是不想写重复的代码了,写麻了). 好在陆陆续续折腾了3年, 目前已经可以满足基本的页面设计和搭建能力, 并能快速上线页面.

之前也在社区分享了很多低代码和零代码的技术实现, 接下来继续和大家聊聊低代码平台中组件与组件之间的通信方案设计.

可视化搭建平台的基本能力

根据我自己设计可视化搭建平台的经验, 其需要具备最最基本的两个能力:

静态页面设计能力(也就是可以用可视化平台制作我们想要的页面的能力)
组件交互能力(制作好静态页面之后, 页面元素能具备一定的交互, 比如跳转链接, 打开弹窗等)

以上的能力可以让我们将页面通过拖拽的方式搭建出来:

图片

虽然这已经可以满足很多展示型的需求, 但是仍然存在局限性, 比如可视化平台的组件与组件之间, 没办法相互通信.

更灵活自主的可视化搭建平台

这里给大家举一个实际的场景, 比如我们要做一个转盘H5页面, 它由转盘组件和按钮组件组成, 当点击按钮时, 转盘开始运动:

图片

这种场景就需要转盘组件和按钮组件相互通信, 来实现交互功能. 所以在可视化搭建平台中, 如果能实现组件间的通信, 那将覆盖更多的业务场景, 从而为个人或者企业带来更大的价值.

图片

接下来我将和大家分享一下低代码平台中组件间通信的几种方案, 共大家学习参考.

组件间通信的几种实现方案

图片

说到组件通信我们也许并不陌生, 比如在 vue 或者 React 框架中, 经常会涉及到父子组件通信以及组件与组件间的通信, 常用的方案也有很多, 比如:

props/$emit
子组件向父组件传值
eventBus($emit/$on)
vuex / redux
$attrs/$listeners
provide/inject

当然还有很多方式能帮我们实现传统组件间的通信, 那我们在低代码组件中, 也可以参考类似的方式来实现, 但是唯一的区别是需要设计一套规则, 来保证组件间通信可以通过用户配置的方式来运转.

接下来我们来分析几种低代码组件间的通信方案.

1.websocket

在设计组件通信方案前, 我们需全局维护一个公共的状态, 拿 H5-Dooring可视化平台举例, 我们用 redux 管理公共状态, 组件间通信本质就是触发公共状态的更新:

图片

为了保证低代码组件库足够纯净, 比如不应该在组件里连接 redux, 所以我们需要把 redux 触发器 dispatch 放在页面的全局, 这里就可以用 websocket, 在组件里触发 socket 指令, 在页面全局来监听, 并触发 dispatch :

图片

当然使用 socket 的方式仍然会让低代码组件库负重前行(虽然能实现更自由的通信场景, 比如组件自更新, 生命周期回调, 控制业务钩子等), 因为我们不得不为其搭建 socket 服务, 并且需要为其设计稳定的通信桥梁, 比如 socket 心跳连接等.

2.iframe通信 postmessage

利用 iframe 的 postmessage 等 API 虽然也能实现组件间通信, 但是我们需要设计一套通信机制, 保证 iframe 能接受组件传送的指令, 并对外暴露共享状态:

图片

我们从 Iframe 的通信模式可以发现它不仅可以作为中间桥梁起到通信作用, 有点类似于 eventBus的模式, 而且还可以实现页面间的通信, 比如目前很多微前端架构的底层支持也有采用 iframe 来设计的. 但是对于更细粒度的低代码组件来说, 有点小题大作了.

接下来给大家分享一下 iframe 通信的基本代码实现:

// 父页面和子页面通信// A.html （父）<iframe src="http://h5.dooring.cn/h5_plus" frameborder="1" id="Bframe"></iframe>const msg = {    name: "H5-Dooring"  }window.onload = () => {  // 自动调用必须放在onload中,通过事件调用则不用  // let frame = document.querySelector("#Bframe").contentWindow  let frame = window.frames[0]  frame.postMessage(msg, "http://h5.dooring.cn/preview")}// B.htmlwindow.addEventListener("message", (e) => {  console.log(e.data)  console.log(e.origin)  console.log(e.source)})// 子页面和父页面通信// A.html （父）<iframe src="http://h5.dooring.cn/h5_plus" frameborder="1" id="Bframe"></iframe>window.addEventListener("message", (e) => {  console.log(e.data)  console.log(e.origin)  console.log(e.source)})// B.htmlconst msg = {  name: "Dooring H5"}window.top.postMessage(msg, "http://h5.dooring.cn/preview")

3.Event Emitters

Event Emitters 的方式我觉得是最适合低代码组件间通信的方案, 类似于 js 里的事件监听机制, 我们可以给 dom 绑定监听, 并暴露事件给用户来实现手动触发机制. (虽然不一定是用户手动触发, 也有一种情况是逻辑触发, 比如当页面某个组件到达某一状态的时候, 后自动触发事件, 来改变其他组件的状态)

Event Emitters 类似一种观察者模式, 我们可以利用 javascript 的设计模式来实现它, 并在组件内部来监听或者触发, 一个简单的实现如下:

interface Events {  [key: string]: Function[];}export class EventEmitter {  public events: Events;  constructor(events?: Events) {    this.events = events || {};  }  public subscribe(name: string, cb: Function) {    (this.events[name] || (this.events[name] = [])).push(cb);    return {      unsubscribe: () =>        this.events[name] && this.events[name].splice(this.events[name].indexOf(cb) >>> 0, 1)    };  }  public emit(name: string, ...args: any[]): void {    (this.events[name] || []).forEach(fn => fn(...args));  }}

具体设计流程有点像我之前设计的 iframe 通信架构, 不过使用起来会更简单:

图片

低代码组件事件队列设计

以上只实现了组件的通信, 并没有将通信和实际的应用场景结合起来, 比如低代码用户需要如何操作,才能实现组件通信. 这里我之前也设计了一套模型:

图片

每个组件都有一套事件列表, 用户可以给一个组件添加多个交互事件, 在第代码内部通过循环遍历来依次触发事件队列:

图片

事件通信就可以用上面介绍的 Event Emitters来实现, 具体的低代码模式可以参考我之前的项目:

本文链接：//www.dmpip.com//www.dmpip.com/showinfo-26-11816-0.html低代码平台组件间通信方案复盘

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇：还不会部署微服务项目？保姆级教程来啦！

下一篇： Postman脚本批量转接口自动化用例

标签：

热门焦点

Rust中的高吞吐量流处理

作者 | Noz编译 | 王瑞平本篇文章主要介绍了Rust中流处理的概念、方法和优化。作者不仅介绍了流处理的基本概念以及Rust中常用的流处理库，还使用这些库实现了一个流处理程序
Automa-通过连接块来自动化你的浏览器

1、前言通过浏览器插件可实现自动化脚本的录制与编写，具有代表性的工具就是：Selenium IDE、Katalon Recorder，对于简单的业务来说可快速实现自动化的上手工作。Selenium IDEKat
三言两语说透设计模式的艺术-单例模式

写在前面单例模式是一种常用的软件设计模式，它所创建的对象只有一个实例，且该实例易于被外界访问。单例对象由于只有一个实例，所以它可以方便地被系统中的其他对象共享，从而减少
谷歌KDD'23工作：如何提升推荐系统Ranking模型训练稳定性

谷歌在KDD 2023发表了一篇工作，探索了推荐系统ranking模型的训练稳定性问题，分析了造成训练稳定性存在问题的潜在原因，以及现有的一些提升模型稳定性方法的不足，并提出了一种新
雅柏威士忌多款单品价格大跌，泥煤顶流也不香了？

来源 | 烈酒商业观察编 | 肖海林今年以来，威士忌市场开始出现了降温迹象，越来越多不断暴涨的网红威士忌也开始悄然回归市场理性。近日，LVMH集团旗下苏格兰威士忌品牌雅柏（Ardbeg
本地生活这块肥肉，拼多多也想吃一口

出品/壹览商业作者/李彦编辑/木鱼拼多多也看上本地生活这块蛋糕了。近期，拼多多在App首页“充值中心”入口上线了本机生活界面。壹览商业发现，该界面目前主要
腾讯VS网易，最卷游戏暑期档，谁能笑到最后？

作者：无锈钵来源：财经无忌7月16日晚，上海1862时尚艺术中心。伴随着幻象的精准命中，硕大的荧幕之上，比分被定格在了14：12，被寄予厚望的EDG战队以绝对的优势战胜了BLG战队，拿下了总决
iQOO 11S新品发布会

iQOO将在7月4日19:00举行新品发布会，推出杭州亚运会电竞赛事官方用机iQOO 11S。
OPPO K11评测：旗舰级IMX890加持 2000元档最强影像手机

【Techweb评测】中端机型用户群体巨大，占了中国目前手机市场的大头，一直以来都是各手机品牌的“必争之地”，其中OPPO K系列机型一直以来都以高品质、