天天看點

SAP 電商雲 Spartacus UI SSR 裡 engine 和 engine instance 的差別

傳入 originalEngine 到裝飾器 decorateExpressEngine 裡:

SAP 電商雲 Spartacus UI SSR 裡 engine 和 engine instance 的差別

傳出的是一個 engine 函數,engine 函數包括了 original Engine 這個函數,然後調用 engine 函數,同時将 Engine 參數傳入,得到第二個 engine instance 函數。

最後的伺服器端渲染,就是該 engine instance 函數負責處理。

我們再來看看生産版本的 engine 實作原理:傳入 decorator 的第一個 engine 執行個體,來自 Angular @nguniversal/express-engine:

SAP 電商雲 Spartacus UI SSR 裡 engine 和 engine instance 的差別

這個裝飾器傳回一個新的函數。

(1) NgExpressEngine 的輸入參數

(2) Spartacus 開發團隊引入的優化參數,通過閉包傳入

(3) Angular 标準的 NgExpressEngine 執行個體

SAP 電商雲 Spartacus UI SSR 裡 engine 和 engine instance 的差別

在實際的生産代碼裡,通過裝飾器的 get 方法,傳入 nguniversal/express-engine 标準的 engine,傳回 ngExpressEngine:

SAP 電商雲 Spartacus UI SSR 裡 engine 和 engine instance 的差別

然後這個 ngExpressEngine 被作為參數,傳入 server.engine 處理參數:

SAP 電商雲 Spartacus UI SSR 裡 engine 和 engine instance 的差別

再看單元測試裡的代碼:傳入裝飾器的第二個參數為 null,意思是不使用 optimization engine:

SAP 電商雲 Spartacus UI SSR 裡 engine 和 engine instance 的差別

第135行代碼傳回的是下圖第47行的函數體本身:

SAP 電商雲 Spartacus UI SSR 裡 engine 和 engine instance 的差別

如果我們觀察傳回的 engine 執行個體,就能發現它内部包含兩個閉包,存儲了裝飾器調用時,傳入的 originalEngine 和 optimization option 的值:

SAP 電商雲 Spartacus UI SSR 裡 engine 和 engine instance 的差別

接下來執行第136行代碼,即 135行裝飾器傳回的新函數的函數體:

SAP 電商雲 Spartacus UI SSR 裡 engine 和 engine instance 的差別

當然,因為 ngExpressEngine 已經被 mock 過了,是以傳回 callFake 指定的 mock 版本的實作:

SAP 電商雲 Spartacus UI SSR 裡 engine 和 engine instance 的差別

因為傳入的 optimization option 為空,是以不使用 optimization engine,是以傳回 original engine instance:

SAP 電商雲 Spartacus UI SSR 裡 engine 和 engine instance 的差別