這個時候收到東子的面試，問的比較基礎，主要是JavaScript和CSS基礎，問了下關于微前端的了解

大廠還是比較看重基礎的

微前端：

• 各個子應用可以使用不同的技術棧。例如，一個子應用可以用 React 構建，另一個子應用可以用 Vue 或者原生 JavaScript 編寫。這樣就可以充分利用每個團隊的技術專長，而不用強制所有團隊使用同一種技術。
• 比如，公司 A 收購了公司 B，公司 A 的前端應用是基于 React 開發的，公司 B 的前端應用是基于 Vue 開發的。通過微前端架構，可以將公司 B 的 Vue 應用以子應用的方式集成到公司 A 的 React 主應用中，減少技術整合的難度。
• 沙箱機制（Sandbox）

1. • qiankun 的沙箱機制是其重要的特性之一。它主要有兩種沙箱：
   • JavaScript 沙箱：用于隔離子應用的 JavaScript 執行環境。當子應用運行時，它的全局變量（如window對象上的屬性）不會影響主應用和其他子應用。例如，子應用 1 定義了一個全局變量globalVar，這個變量在子應用 1 的沙箱內有效，不會污染主應用或者子應用 2 的全局環境。
   • CSS 沙箱：可以防止子應用的樣式泄漏到主應用和其他子應用中。通過在 DOM 節點上添加特定的屬性和樣式規則來實現樣式隔離。比如，子應用的樣式只會應用到它自己的 DOM 節點范圍內，不會影響主應用的樣式布局。

實現方式：

1. 路由分發式微前端
   • 原理：通過主應用的路由來控制子應用的顯示。當用戶訪問不同的路由路徑時，主應用根據路由規則加載相應的子應用。
   • 例如，主應用的路由配置為/app1時加載子應用 1，/app2時加載子應用 2。這種方式比較簡單直接，適用于子應用之間相對獨立，交互較少的場景。
2. iframe 方式
   • 原理：將子應用嵌入到主應用的iframe標簽中。iframe提供了一個獨立的瀏覽器上下文，子應用在這個獨立的環境中運行。
   • 優點是隔離性好，子應用的樣式和腳本不會輕易影響主應用。但是iframe也有一些缺點，如通信相對復雜，加載性能可能會受到影響，而且iframe的樣式和主應用的樣式整合比較困難。
3. Web Components 方式
   • 原理：將子應用封裝成 Web Components（自定義元素），然后在主應用中使用這些自定義元素。Web Components 有自己的生命周期和作用域，能夠很好地隔離子應用。
   • 例如，可以使用CustomElementRegistry來定義一個自定義元素，這個自定義元素可以是一個完整的子應用。這種方式可以實現比較好的封裝性和隔離性，同時也方便在主應用中進行組合和復用。