微前端框架micro-app中的数据通信机制

在微前端框架micro-app中,getData方法和addDataListener方法都是用于数据通信的重要工具,但它们在使用方式和功能上存在一些显著的差别。

getData方法

  • 功能getData方法用于直接获取micro-app框架注入的全局对象window.microApp中存储的数据。这些数据通常是由基座应用或其他子应用通过setData方法或其他通信方式发送过来的。
  • 使用场景 :当子应用需要获取来自基座应用或其他子应用的数据时,可以使用getData方法。例如,子应用可以在初始化时或某个事件触发时调用此方法以获取所需的数据。
  • 特点getData方法是一种主动获取数据的方式,它不会触发任何监听函数或回调。因此,它适用于那些需要即时获取数据的场景,但可能无法实时响应数据的变化。

addDataListener方法

  • 功能addDataListener方法用于为micro-app框架中的全局对象window.microApp添加数据监听器。当数据发生变化时,这个监听器会被触发,并接收新的数据作为参数。
  • 使用场景 :当子应用需要实时响应来自基座应用或其他子应用的数据变化时,可以使用addDataListener方法。例如,子应用可以在初始化时添加监听器,以便在数据发生变化时执行相应的逻辑。
  • 特点addDataListener方法是一种被动获取数据的方式,它依赖于数据的变化来触发监听器。此外,它还可以设置autoTrigger参数,以确定在初次绑定监听器时是否需要主动触发一次监听函数来获取缓存中的数据。这使得addDataListener方法更加灵活和强大,适用于那些需要实时响应数据变化的场景。

总结

  • 获取数据的主动性getData方法是主动获取数据,而addDataListener方法是被动获取数据(通过监听数据变化)。
  • 使用场景getData方法适用于即时获取数据的场景,而addDataListener方法适用于需要实时响应数据变化的场景。
  • 灵活性addDataListener方法通过提供autoTrigger参数,使得在初次绑定监听器时能够主动触发一次监听函数,从而获取缓存中的数据,这在某些情况下非常有用。
相关推荐
深念Y11 分钟前
NativeScript 移动端开发踩坑记录
前端·ui·vue·安卓·移动端·native·原生
HackTwoHub16 分钟前
Butter_Cookie 黄油曲奇|浏览器渗透插件,云存储检测、XSS、SQL 注入一站式 Web 安全测试工具
前端·sql·安全·web安全·网络安全·自动化·xss
2601_9620662323 分钟前
golang超详细基础入门教程_golang教程
前端·python·golang
单线程1213825 分钟前
从案例分析 Vue3 Tokenizer 源码二
前端·javascript·vue.js
单线程_0135 分钟前
从案例分析 Vue3 Tokenizer 源码二
前端·javascript·vue.js
山甫aa1 小时前
【从零开始的 Web 后端学习】文件上传一篇搞定(MultipartFile + 本地存储 + 阿里云 OSS 保姆级教程)
前端·学习·阿里云
风骏时光牛马1 小时前
AIRAGDebug智能检索链路异常定位与调试分析
前端
ljt27249606612 小时前
Flutter笔记--envied
前端·笔记·flutter
Flynt2 小时前
React Router v8 升了之后,我花了两天才把项目跑起来
前端·typescript·preact
泯泷9 小时前
手搓JSVMM第 8 篇:函数调用:参数、返回值与调用帧
前端·javascript·前端框架