目录
yiludege

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 实现原理说明
  • 格式化代码
4天前336次提交

logo

wujie(无界)

无界微前端是一款基于 Web Components + iframe 微前端框架,具备成本低、速度快、原生隔离、功能强等一系列优点。

文档

动机:动机

文档详见:文档

演示详见:demo

背景

微前端已经是一个非常成熟的领域了,但开发者不管采用哪个现有方案,在适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户核心诉求都或存在问题、或无法提供支持。

Web Components 是一个浏览器原生支持的组件封装技术,可以有效隔离元素之间的样式,iframe 可以给子应用提供一个原生隔离的运行环境,相比自行构造的沙箱 iframe 提供了独立的 window、document、history、location,可以更好的和外部解耦。无界微前端采用 webcomponent + iframe 的沙箱模式,在实现原生隔离的前提下比较完善的解决了上述问题。

特性

  1. 成本低
    • 主应用使用成本低
    • 子应用适配成本低
  2. 速度快
    • 子应用首屏打开速度快
    • 子应用运行速度快
  3. 原生隔离
    • css 样式通过 Web Components 可以做到严格的原生隔离
    • js 运行在 iframe 中做到严格的原生隔离
  4. 功能强大
    • 支持子应用保活
    • 支持子应用嵌套
    • 支持多应用激活
    • 支持应用共享
    • 支持去中心化通信
    • 支持生命周期钩子
    • 支持插件系统
    • 支持 vite 框架

快速上手

直接使用

  • 安装
npm install wujie -S
  • 使用
import { startApp } from "wujie";

startApp({ name: "唯一id", url: "子应用路径", el: "容器", sync: true });

vue 框架

  • 安装
# 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>

react 框架

  • 安装
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           // 启动所有应用

One more thing

无界微前端解决方案来源于团队的无极低代码平台。无极是专注于高效实现企业B端应用、专业的一站式低代码解决方案,是腾讯内部应用最广泛的低代码平台,360度覆盖全企业应用场景。通过无界微前端,存量页面和低代码页面可以丝滑的互相内嵌,闭环新老系统的连接。欢迎体验【腾讯无极低代码】,感受智能而高效的研发模式!

    Gitlink(确实开源)
  • 加入我们
  • 官网邮箱:gitlink@ccf.org.cn
  • QQ群
  • QQ群
  • 公众号
  • 公众号

版权所有:中国计算机学会技术支持:开源发展技术委员会
京ICP备13000930号-9 京公网安备 11010802047560号