微前端(Micro Frontend)
定义:微前端是一种前端架构模式,将大型前端应用拆分为多个可独立开发、测试和部署的小型应用,每个应用负责页面的一个独立功能区域。
与工具的关系:微前端在线组合器正是用于预览和验证微前端集成方案的可视化工具,帮助开发者在实际搭建微前端基座之前快速验证布局和集成效果。
iframe
定义:iframe(Inline Frame)是 HTML 中的内联框架元素,允许在当前页面中嵌入另一个 HTML 文档。每个 iframe 拥有独立的浏览上下文,可以加载任意 URL 的内容。
与工具的关系:微前端在线组合器的核心技术之一,通过 iframe 将各个子应用嵌入到预览页面中,实现多应用的可视化集成预览。
Web Components
定义:Web Components 是一组 Web 平台原生 API,允许开发者创建可重用的自定义 HTML 元素,包含 Custom Elements、Shadow DOM 和 HTML Templates 三大核心技术。
与工具的关系:本工具描述中提到支持 iframe 或 Web Components 两种集成方式,Web Components 是微前端架构中另一种重要的子应用封装和集成手段。
沙箱(Sandbox)
定义:沙箱是一种安全隔离机制,通过限制代码的执行权限来防止恶意或不受信任的代码影响宿主环境。在 iframe 中,sandbox 属性用于控制子页面的权限。
与工具的关系:微前端在线组合器使用 iframe 的 sandbox 属性限制子应用权限,包括脚本执行、表单提交、同源访问等,确保各子应用之间安全隔离。
X-Frame-Options
定义:X-Frame-Options 是一个 HTTP 响应头,用于控制页面是否可以被嵌入到 iframe、frame 或 object 中。常见值包括 DENY(禁止嵌入)和 SAMEORIGIN(仅允许同源嵌入)。
与工具的关系:部分网站设置了 X-Frame-Options 头导致无法在工具中通过 iframe 嵌入,使用时需要选择允许跨域嵌入的目标 URL。
localStorage
定义:localStorage 是 Web Storage API 的一部分,提供键值对形式的本地存储空间,数据持久化保存在浏览器中,不受会话生命周期限制,刷新页面和关闭浏览器后数据仍存在。
与工具的关系:微前端在线组合器使用 localStorage 自动保存用户的子应用配置和布局设置,确保刷新页面后配置不丢失,无需后端存储。
基座应用(Shell)
定义:基座应用是微前端架构中的宿主容器,负责加载和管理各个子应用的生命周期、路由分发和应用间通信,通常也称为主应用或 Shell 应用。
与工具的关系:微前端在线组合器模拟了基座应用的子应用加载和布局管理功能,是微前端基座原型验证的轻量替代方案。
CORS(跨域资源共享)
定义:CORS(Cross-Origin Resource Sharing)是一种浏览器安全机制,控制网页是否可以访问不同源(协议+域名+端口)的资源。服务器通过响应头中的 Access-Control-Allow-Origin 字段控制跨域访问权限。
与工具的关系:当子应用使用 iframe 嵌入时,跨域限制会影响父页面与子应用之间的通信能力,理解 CORS 机制有助于排查集成过程中的权限问题。
增量升级(Incremental Upgrade)
定义:增量升级是微前端架构的核心优势之一,指在不重构整个应用的前提下,逐步将老技术栈的模块替换为新技术栈,实现渐进式技术迁移。
与工具的关系:微前端在线组合器可以帮助团队在升级前预览不同技术栈子应用的集成效果,为增量升级策略提供可视化验证支持。
子应用(Sub Application)
定义:子应用是微前端架构中被拆分出来的独立前端模块,每个子应用拥有独立的代码仓库、技术栈选择、开发团队和部署流程,负责页面的一个功能区域。
与工具的关系:在微前端在线组合器中,每个通过 URL 添加的独立应用就是一个子应用,工具将其嵌入 iframe 中进行可视化集成预览。
UD5工具箱