页面集成技术方案汇总

1.window.open()

优点:

1. 新开窗口或标签页展示内容：允许在新的浏览器窗口或标签页中打开指定的URL，适用于需要独立页面交互的场景。
2. 隔离性：新窗口拥有独立的执行环境，不会干扰主页面的JavaScript上下文和DOM结构。
3. 易于实现：通过简单的JavaScript调用即可实现，无需复杂的配置。

缺点:

1. 用户体验：频繁弹出新窗口可能打断用户浏览流程，造成较差的用户体验。
2. 资源消耗：每个新窗口都会占用额外的系统资源，过多的新窗口可能导致性能问题。
3. 跨域限制：虽然新窗口可以加载不同源的内容，但直接的JavaScript交互受到同源策略限制。

适用场景:

• 需要在新窗口展示详细报告、打印页面、弹出登录框等独立功能。
• 用户需要在不离开主页面的情况下对比查看多个页面内容。

// 打开一个新的窗口显示指定URL
window.open('https://www.example.com', '_blank');

2.iframe

优点:

1. 模块化内容：可以将不同的内容模块（如广告、第三方插件）嵌入到主页面中，实现内容的隔离。
2. 同页面交互：通过postMessage等API可实现跨域通信，便于主页面与iframe间的数据交换。
3. 动态加载：可以按需加载iframe内容，提高初始页面加载速度。

缺点:

1. 页面加载阻塞：加载iframe可能会阻塞主页面的渲染，影响用户体验。
2. 安全性问题：容易遭受点击劫持等安全攻击，需配合X-Frame-Options等头部设置防护。
3. 资源消耗：iframe会增加额外的HTTP请求，消耗更多带宽和计算资源。

适用场景:

• 集成第三方内容或服务，如地图、支付接口。
• 在同一页面内展示不同来源或需要隔离的动态内容。

<!-- 在页面中嵌入iframe -->
<iframe src="https://www.example.com" width="600" height="400"></iframe>

3.qiankun（乾坤）

优点:

1. 微前端解决方案：为大型项目提供微服务化的前端架构支持，便于多团队并行开发和维护。
2. 生态集成：良好的生态支持，包括子应用预加载、样式和JS隔离、丰富的生命周期管理等。
3. 高性能：优化了加载策略和资源管理，减少资源冗余和加载时间。
4. 灵活的加载方式：支持JS Entry和HTML Entry，适应不同类型的子应用集成。

缺点:

1. 学习成本：相对于直接使用iframe或window.open，qiankun引入了一定的学习曲线。
2. 架构复杂度：适用于中大型项目，对于小型项目可能引入不必要的复杂度。
3. 依赖管理：子应用间的依赖需要妥善管理，避免冲突。

适用场景:

• 中大型企业级应用，特别是需要进行微服务化改造或多个子系统集成的场景。
• 多团队协作开发，每个团队负责一个或多个子应用的独立开发和部署。

// 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', // 子应用挂载的容器ID
    activeRule: '/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('子应用卸载');
}