1.window.open()
优点:
- 新开窗口或标签页展示内容：允许在新的浏览器窗口或标签页中打开指定的URL，适用于需要独立页面交互的场景。
- 隔离性：新窗口拥有独立的执行环境，不会干扰主页面的JavaScript上下文和DOM结构。
- 易于实现：通过简单的JavaScript调用即可实现，无需复杂的配置。
缺点:
- 用户体验：频繁弹出新窗口可能打断用户浏览流程，造成较差的用户体验。
- 资源消耗：每个新窗口都会占用额外的系统资源，过多的新窗口可能导致性能问题。
- 跨域限制：虽然新窗口可以加载不同源的内容，但直接的JavaScript交互受到同源策略限制。
适用场景:
- 需要在新窗口展示详细报告、打印页面、弹出登录框等独立功能。
- 用户需要在不离开主页面的情况下对比查看多个页面内容。
// 打开一个新的窗口显示指定URL
window.open('https://www.example.com', '_blank');2.iframe
优点:
- 模块化内容：可以将不同的内容模块（如广告、第三方插件）嵌入到主页面中，实现内容的隔离。
- 同页面交互：通过
postMessage等API可实现跨域通信，便于主页面与iframe间的数据交换。 - 动态加载：可以按需加载iframe内容，提高初始页面加载速度。
缺点:
- 页面加载阻塞：加载iframe可能会阻塞主页面的渲染，影响用户体验。
- 安全性问题：容易遭受点击劫持等安全攻击，需配合
X-Frame-Options等头部设置防护。 - 资源消耗：iframe会增加额外的HTTP请求，消耗更多带宽和计算资源。
适用场景:
- 集成第三方内容或服务，如地图、支付接口。
- 在同一页面内展示不同来源或需要隔离的动态内容。
<!-- 在页面中嵌入iframe -->
<iframe src="https://www.example.com" width="600" height="400"></iframe>3.qiankun（乾坤）
优点:
- 微前端解决方案：为大型项目提供微服务化的前端架构支持，便于多团队并行开发和维护。
- 生态集成：良好的生态支持，包括子应用预加载、样式和JS隔离、丰富的生命周期管理等。
- 高性能：优化了加载策略和资源管理，减少资源冗余和加载时间。
- 灵活的加载方式：支持JS Entry和HTML Entry，适应不同类型的子应用集成。
缺点:
- 学习成本：相对于直接使用iframe或window.open，qiankun引入了一定的学习曲线。
- 架构复杂度：适用于中大型项目，对于小型项目可能引入不必要的复杂度。
- 依赖管理：子应用间的依赖需要妥善管理，避免冲突。
适用场景:
- 中大型企业级应用，特别是需要进行微服务化改造或多个子系统集成的场景。
- 多团队协作开发，每个团队负责一个或多个子应用的独立开发和部署。
// main.js 或类似入口文件
import { createApp } from 'qiankun';const app = createApp({// 基座应用的生命周期钩子bootstrap() {console.log('基座应用启动中');},mount(props) {console.log('子应用挂载成功', props);// 这里可以通过props获取子应用传递的信息},unmount() {console.log('子应用卸载');},
});// 注册子应用
app.registerMicroApps([{name: 'subApp', // 子应用名称entry: '//localhost:8001', // 子应用入口container: '#container', // 子应用挂载的容器IDactiveRule: '/sub-app', // 激活子应用的路由规则},
]);// 启动基座应用
app.start();// 子应用的入口文件，如main.js
export async function bootstrap() {console.log('子应用启动');
}export async function mount(props) {console.log('子应用挂载', props);// 根据props进行初始化操作，如动态设置路由等
}export async function unmount() {console.log('子应用卸载');
}