feat: 支持内联事件处理器在子应用作用域中执行 (#1091) feat: 支持内联事件处理器在子应用作用域中执行 添加 getWujieWindow 辅助函数,用于在 ShadowDOM 中动态获取子应用 window 在 processTpl 中编译内联事件处理器,包裹 with(getWujieWindow(this)){} 解决传统页面中 onclick=”greet(…)” 无法访问子应用函数的问题 添加相应的类型定义 问题背景: wujie 采用 ShadowDOM + iframe 双沙箱架构,导致内联事件处理器在主应用 ShadowDOM 中执行时,无法访问 iframe 闭包中定义的函数。 解决方案: 在 HTML 解析阶段,将 onclick=”…” 编译为 onclick=”with(getWujieWindow(this)){ … }”, 通过 DOM 查询动态获取子应用的 proxyWindow,实现作用域绑定。 feat: 支持内联事件处理器在子应用作用域中执行 添加 getWujieWindow 辅助函数,用于在 ShadowDOM 中动态获取子应用 window 在 processTpl 中编译内联事件处理器,包裹 with(getWujieWindow(this)){} 解决传统页面中 onclick=”greet(…)” 无法访问子应用函数的问题 添加相应的类型定义 问题背景: wujie 采用 ShadowDOM + iframe 双沙箱架构,导致内联事件处理器在主应用 ShadowDOM 中执行时,无法访问 iframe 闭包中定义的函数。 解决方案: 在 HTML 解析阶段,将 onclick=”…” 编译为 onclick=”with(getWujieWindow(this)){ … }”, 通过 DOM 查询动态获取子应用的 proxyWindow,实现作用域绑定。 fix: 修复 typescript 未使用参数警告 style: 移除多余空行 test: 添加内联事件处理器测试页面 在 vue3 示例项目中添加 InlineEvent.vue 测试页面 测试场景包括:基本功能、多参数、全局变量访问、复杂表达式、事件对象、多事件 添加相应的路由配置 test: 在主应用菜单中添加 inline-event 测试入口 fix: 在 patchElementEffect 中编译动态创建元素的内联事件 添加 compileInlineEvents 函数,处理元素的内联事件属性 在 patchElementEffect 中调用,确保动态创建的元素也能正确编译内联事件 递归处理子元素,确保所有嵌套元素都被处理 fix: 拦截 setAttribute 以支持 Vue 等框架动态设置内联事件 添加 patchSetAttribute 函数,拦截 Element.prototype.setAttribute 当设置 ‘on*’ 属性时,自动编译为 with(getWujieWindow(this)){ … } 解决 Vue 等框架先 appendChild 后 setAttribute 导致的时机问题 fix: 降级模式下直接使用 iframe.contentWindow 作为内联事件的作用域 降级模式下使用 localGenerator,不返回 proxyWindow,所以 this.proxy 是 undefined。 修改 getWujieWindow 函数: 非降级模式:返回 wujieData.proxy 降级模式:直接返回 iframe.contentWindow(因为 window.basicTest 定义在这里) fix: 修复降级模式下 getWujieWindow 的降级逻辑 找不到 iframe 时返回主应用 window(完全找不到子应用) 找到 iframe 后,降级应返回 iframe.contentWindow(子应用的 window) 非降级模式:返回 wujieData.proxy 降级模式:直接返回 iframe.contentWindow test: 在顶部菜单栏和 vue3 子菜单中添加 inline-event 入口 fix: 移除 main-vue 顶部菜单栏多余的 inline-event 入口 inline-event 入口已在 vue3 子项目的 App.vue 中添加,不需要在 main-vue 顶部重复 test: 添加 inline-event 测试入口和格式化代码 vue3 子项目 App.vue 添加内联事件导航入口 main-vue 和 main-react 的 vue3 子菜单添加 inline-event 入口 更新 InlineEvent.vue 实现原理说明 格式化代码
feat: 支持内联事件处理器在子应用作用域中执行 (#1091)
问题背景: wujie 采用 ShadowDOM + iframe 双沙箱架构,导致内联事件处理器在主应用 ShadowDOM 中执行时,无法访问 iframe 闭包中定义的函数。
解决方案: 在 HTML 解析阶段,将 onclick=”…” 编译为 onclick=”with(getWujieWindow(this)){ … }”, 通过 DOM 查询动态获取子应用的 proxyWindow,实现作用域绑定。
fix: 修复 typescript 未使用参数警告
style: 移除多余空行
test: 添加内联事件处理器测试页面
test: 在主应用菜单中添加 inline-event 测试入口
fix: 在 patchElementEffect 中编译动态创建元素的内联事件
降级模式下使用 localGenerator,不返回 proxyWindow,所以 this.proxy 是 undefined。 修改 getWujieWindow 函数:
test: 在顶部菜单栏和 vue3 子菜单中添加 inline-event 入口
fix: 移除 main-vue 顶部菜单栏多余的 inline-event 入口
inline-event 入口已在 vue3 子项目的 App.vue 中添加,不需要在 main-vue 顶部重复
无界微前端是一款基于 Web Components + iframe 微前端框架,具备成本低、速度快、原生隔离、功能强等一系列优点。
动机:动机
文档详见:文档
演示详见:demo
微前端已经是一个非常成熟的领域了,但开发者不管采用哪个现有方案,在适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户核心诉求都或存在问题、或无法提供支持。
Web Components 是一个浏览器原生支持的组件封装技术,可以有效隔离元素之间的样式,iframe 可以给子应用提供一个原生隔离的运行环境,相比自行构造的沙箱 iframe 提供了独立的 window、document、history、location,可以更好的和外部解耦。无界微前端采用 webcomponent + iframe 的沙箱模式,在实现原生隔离的前提下比较完善的解决了上述问题。
npm install wujie -S
import { startApp } from "wujie"; startApp({ name: "唯一id", url: "子应用路径", el: "容器", sync: true });
# vue2 框架 npm i wujie-vue2 -S # vue3 框架 npm i wujie-vue3 -S
// vue2 import WujieVue from "wujie-vue2"; Vue.use(WujieVue); // vue3 import WujieVue from "wujie-vue3"; app.use(WujieVue);
<WujieVue width="100%" height="100%" name="xxx" :url="xxx" :sync="true" :fetch="fetch" :props="props" :beforeLoad="beforeLoad" :beforeMount="beforeMount" :afterMount="afterMount" :beforeUnmount="beforeUnmount" :afterUnmount="afterUnmount" ></WujieVue>
npm i wujie-react -S
import WujieReact from "wujie-react";
<WujieReact width="100%" height="100%" name="xxx" url="{xxx}" sync="{true}" fetch="{fetch}" props="{props}" beforeLoad="{beforeLoad}" beforeMount="{beforeMount}" afterMount="{afterMount}" beforeUnmount="{beforeUnmount}" afterUnmount="{afterUnmount}" ></WujieReact>
详见文档
运行以下脚本,可以本地开发无界微前端框架,支持实时编译调试开发。
nvm use v14.20.0 // 切换node版本到14版本,因为有些demo的node版本比较低 pnpm i // 安装包依赖,务必使用pnpm npm run start // 启动所有应用
无界微前端解决方案来源于团队的无极低代码平台。无极是专注于高效实现企业B端应用、专业的一站式低代码解决方案,是腾讯内部应用最广泛的低代码平台,360度覆盖全企业应用场景。通过无界微前端,存量页面和低代码页面可以丝滑的互相内嵌,闭环新老系统的连接。欢迎体验【腾讯无极低代码】,感受智能而高效的研发模式!
版权所有:中国计算机学会技术支持:开源发展技术委员会 京ICP备13000930号-9 京公网安备 11010802047560号
wujie(无界)
无界微前端是一款基于 Web Components + iframe 微前端框架,具备成本低、速度快、原生隔离、功能强等一系列优点。
文档
动机:动机
文档详见:文档
演示详见:demo
背景
微前端已经是一个非常成熟的领域了,但开发者不管采用哪个现有方案,在适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户核心诉求都或存在问题、或无法提供支持。
Web Components 是一个浏览器原生支持的组件封装技术,可以有效隔离元素之间的样式,iframe 可以给子应用提供一个原生隔离的运行环境,相比自行构造的沙箱 iframe 提供了独立的 window、document、history、location,可以更好的和外部解耦。无界微前端采用 webcomponent + iframe 的沙箱模式,在实现原生隔离的前提下比较完善的解决了上述问题。
特性
快速上手
直接使用
vue 框架
react 框架
常见问题
详见文档
本地开发
运行以下脚本,可以本地开发无界微前端框架,支持实时编译调试开发。
One more thing
无界微前端解决方案来源于团队的无极低代码平台。无极是专注于高效实现企业B端应用、专业的一站式低代码解决方案,是腾讯内部应用最广泛的低代码平台,360度覆盖全企业应用场景。通过无界微前端,存量页面和低代码页面可以丝滑的互相内嵌,闭环新老系统的连接。欢迎体验【腾讯无极低代码】,感受智能而高效的研发模式!