养花知识
您所在的位置:主页 > 养花知识 >

框架怎么激活(lsp框架怎么激活)

字号+ 作者:admin 来源:未知 2022-04-13 23:42

框架怎么激活(lsp框架怎么激活) 作者:damyxu,腾讯 PCG 前端开发工程师 iframe是一个天然的微前端方案,但受限于跨域的严格限制而无法很好的应用,本文介绍一种基于 iframe 的全新微前端方案,继承iframe的优点,补足 iframe 的缺点,让 iframe 焕发新生。 背景 前端开发中我们对...

框架怎么激活(lsp框架怎么激活)

作者:damyxu,腾讯 PCG 前端开发工程师

iframe是一个天然的微前端方案,但受限于跨域的严格限制而无法很好的应用,本文介绍一种基于 iframe 的全新微前端方案,继承iframe的优点,补足 iframe 的缺点,让 iframe 焕发新生。

背景

前端开发中我们对iframe已经非常熟悉了,那么iframe的作用是什么?可以归纳如下:

在一个web应用中可以独立的运行另一个web应用

这个概念已经和微前端不谋而合,相对于目前配置复杂、高适配成本的微前端方案来说,采用iframe方案具有一些显著的优点

非常简单,使用没有任何心智负担隔离完美,无论是 js、css、dom 都完全隔离开来多应用激活,页面上可以摆放多个iframe来组合业务

但是开发者又厌恶使用iframe,因为缺点也非常明显:

路由状态丢失,刷新一下,iframe 的 url 状态就丢失了dom 割裂严重,弹窗只能在 iframe 内部展示,无法覆盖全局通信非常困难,只能通过 postmessage 传递序列化的消息白屏时间太长,对于SPA 应用应用来说无法接受

能否打造一个完美的iframe,保留所有的优点的同时,解决掉所有的缺点呢?

无界方案

无界微前端框架通过继承iframe的优点,解决iframe的缺点,打造一个接近完美的iframe方案。

来看无界如何一步一步的解决iframe的问题,假设我们有 A 应用,想要加载 B 应用:

在应用 A 中构造一个shadow和iframe,然后将应用 B 的html写入shadow中,js运行在iframe中,注意iframe的url,iframe保持和主应用同域但是保留子应用的路径信息,这样子应用的js可以运行在iframe的location和history中保持路由正确。

image-20211206160113792

在iframe中拦截document对象,统一将dom指向shadowRoot,此时比如新建元素、弹窗或者冒泡组件就可以正常约束在shadowRoot内部。

接下来的三步分别解决iframe的三个缺点:

✅ dom 割裂严重的问题,主应用提供一个容器给到shadowRoot插拔,shadowRoot内部的弹窗也就可以覆盖到整个应用 A✅ 路由状态丢失的问题,浏览器的前进后退可以天然的作用到iframe上,此时监听iframe的路由变化并同步到主应用,如果刷新浏览器,就可以从 url 读回保存的路由✅ 通信非常困难的问题,iframe和主应用是同域的,天然的共享内存通信,而且无界提供了一个去中心化的事件机制

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

如没特殊注明,文章均为资源网络原创,转载请注明来自:http://www.shaidaren.cn

相关文章
  • 招商银行e招贷怎么还款

    招商银行e招贷怎么还款

    2022-04-13 23:39

  • 龙趸怎么做(龙趸怎么做

    龙趸怎么做(龙趸怎么做

    2022-04-13 23:34

  • 民间借贷被起诉后果(民

    民间借贷被起诉后果(民

    2022-04-13 23:32

  • 美团签到现金券怎么用

    美团签到现金券怎么用

    2022-04-13 23:25