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

背景介绍

3年前，开发了零代码搭建平台 H5-Dooring，旨在降低上线 web 页面的成本和提高效率。该平台经过3年的改进，已具备页面设计和搭建的基本能力，并能快速上线页面。作者曾分享低代码和零代码的技术实现，本文将讨论低代码平台中组件间通信的设计。

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

作者根据经验指出，可视化搭建平台需要具备静态页面设计能力和组件交互能力。这使得用户能够通过拖拽的方式搭建页面，满足展示型需求，但组件间的通信局限性仍存在。

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

介绍了转盘H5页面的案例，说明了组件间通信的重要性。如果平台能实现组件间的通信，将覆盖更多业务场景，为个人或企业带来更大价值。

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

在Vue或React框架中，组件通信方案众多，如props/$emit、eventBus、vuex/redux等。在低代码平台中，也可以借鉴这些方式，但需要设计规则以确保通信能通过用户配置运转。

1. Websocket

通过全局维护一个公共状态，使用redux管理状态，并通过websocket在页面全局触发dispatch实现组件通信。但这样会给组件库带来负担，需要搭建socket服务和设计稳定的通信桥梁。

2. Iframe通信 postmessage

利用iframe的postmessage API实现组件间通信，但需要设计通信机制，确保iframe能接收指令并暴露共享状态。提供了iframe通信的基本代码实现，但对低代码组件来说可能过于复杂。

3. Event Emitters

Event Emitters是适合低代码组件间通信的方案，类似于事件监听机制，可通过JavaScript设计模式实现。提供了EventEmitter类的简单实现，使得组件能监听或触发事件。

低代码组件事件队列设计

解释了如何将组件通信与应用场景结合，通过为每个组件设计事件列表和事件队列，使用Event Emitters实现事件通信。最后，提及了作者的其他相关文章和项目，邀请读者继续关注。

总结

作者承诺会分享更多关于H5-Dooring低代码平台的实践和思考，并将在下一篇文章中讨论低代码印章组件的实现方案，同时欢迎读者提供反馈和建议。

给DevOps加点料——融入安全性的DevSecOps

了解更多

想要了解更多内容？

查看原文：低代码平台组件间通信方案复盘

文章来源：

趣谈前端

扫码关注公众号