這個時候收到東子的面試,問的比較基礎,主要是JavaScript和CSS基礎,問了下關于微前端的了解
大廠還是比較看重基礎的
微前端:
- 各個子應用可以使用不同的技術棧。例如,一個子應用可以用 React 構建,另一個子應用可以用 Vue 或者原生 JavaScript 編寫。這樣就可以充分利用每個團隊的技術專長,而不用強制所有團隊使用同一種技術。
- 比如,公司 A 收購了公司 B,公司 A 的前端應用是基于 React 開發的,公司 B 的前端應用是基于 Vue 開發的。通過微前端架構,可以將公司 B 的 Vue 應用以子應用的方式集成到公司 A 的 React 主應用中,減少技術整合的難度。
- 沙箱機制(Sandbox)
-
- qiankun 的沙箱機制是其重要的特性之一。它主要有兩種沙箱:
- JavaScript 沙箱:用于隔離子應用的 JavaScript 執行環境。當子應用運行時,它的全局變量(如
window對象上的屬性)不會影響主應用和其他子應用。例如,子應用 1 定義了一個全局變量globalVar,這個變量在子應用 1 的沙箱內有效,不會污染主應用或者子應用 2 的全局環境。
- CSS 沙箱:可以防止子應用的樣式泄漏到主應用和其他子應用中。通過在 DOM 節點上添加特定的屬性和樣式規則來實現樣式隔離。比如,子應用的樣式只會應用到它自己的 DOM 節點范圍內,不會影響主應用的樣式布局。
實現方式:
- 路由分發式微前端
- 原理:通過主應用的路由來控制子應用的顯示。當用戶訪問不同的路由路徑時,主應用根據路由規則加載相應的子應用。
- 例如,主應用的路由配置為
/app1時加載子應用 1,/app2時加載子應用 2。這種方式比較簡單直接,適用于子應用之間相對獨立,交互較少的場景。
- iframe 方式
- 原理:將子應用嵌入到主應用的
iframe標簽中。iframe提供了一個獨立的瀏覽器上下文,子應用在這個獨立的環境中運行。
- 優點是隔離性好,子應用的樣式和腳本不會輕易影響主應用。但是
iframe也有一些缺點,如通信相對復雜,加載性能可能會受到影響,而且iframe的樣式和主應用的樣式整合比較困難。
- Web Components 方式
- 原理:將子應用封裝成 Web Components(自定義元素),然后在主應用中使用這些自定義元素。Web Components 有自己的生命周期和作用域,能夠很好地隔離子應用。
- 例如,可以使用
CustomElementRegistry來定義一個自定義元素,這個自定義元素可以是一個完整的子應用。這種方式可以實現比較好的封裝性和隔離性,同時也方便在主應用中進行組合和復用。