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', // 子應用掛載的容器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('子應用卸載');
}