如何理解 SAP 電商雲 Spartacus UI 中的 proxy facade？

Jerry 這篇文章[什麼是 SAP 電商雲 Spartacus UI 的 proxy façade](https://jerry.blog.csdn.net/article/details/121205967)提供了理論上的解釋。

本文介紹一個實際例子。

當我們開啟如下 url 時，預設是不會觸發 Quick Order Core module 的載入的，因為我們根本沒有使用到 Quick Order 任何功能：

http://localhost:4299/electronics-spa/en/USD/

![](https://img-blog.csdnimg.cn/img_convert/be0895a49b2311bd978bf09b98d245c6.png)

當然，我們仍然有辦法，在 homepage 的 app.module.ts 裡手動編寫一些程式碼，這些程式碼需要 Quick Order core module 被載入之後才能正常執行：

![](https://img-blog.csdnimg.cn/img_convert/2021927ebaa73cd9366d9f570447614a.png)

上面程式碼注入的依賴 QuickOrderFacade，雖然是 Quick Order root module 的一部分，被正常載入，但是 QuickOrderFacade 只是一個 Abstract Class，需要 core module 裡提供的具體實現才能繼續執行。因此，加上了上述程式碼之後，我們訪問 Spartacus UI 的 homepage，也會觸發 Quick Order Core module 的載入。

上述結論可以在 Chrome 開發者工具 network 標籤頁裡觀察到 Quick Order Core Module 的載入：

![](https://img-blog.csdnimg.cn/img_convert/00398e58372c18a585ae37c1426d48e8.png)

以及對應除錯程式碼的列印：
![](https://img-blog.csdnimg.cn/img_convert/8e17ca26e8edd7fa3b773581ad067a5b.png)

在執行時，當 AppModule 作為入口 module 被載入時，Angular 框架會呼叫     _resolveInjectorDefTypes 解析器建構函式里宣告的依賴：

![](https://img-blog.csdnimg.cn/img_convert/83319b475b0c819de396b08d388aaa4c.png)

此時因為 QuickOrder core module 尚未載入，因此透過 QuickOrderFacade 提供的工廠方法 FacadeFactory 去提供依賴：

![](https://img-blog.csdnimg.cn/img_convert/4e29f80709a69bd4848c0179212dc57d.png)

![](https://img-blog.csdnimg.cn/img_convert/f8a74eef863257f519438d8d2518f406.png)

這裡呼叫標準的來自 Angular/core 的 inject，結合傳入的 descriptor，進行注入：

![](https://img-blog.csdnimg.cn/img_convert/4dd079f4da961efb8f1498f18e5bc02c.png)

呼叫 inject 注入 FacadeFactoryService 的結果是什麼？

![](https://img-blog.csdnimg.cn/img_convert/982900571ef222e981ddde691979de23.png)

結果就是得到了 FacadeFactoryService 的一個例項，且該例項的每個屬性欄位也均被注入了對應的例項了：

![](https://img-blog.csdnimg.cn/img_convert/8368073267ca2e20909694732d680166.png)

這裡我們準備建立 cartQuickOrderCore 的具體實現，首先需要檢查這個 feature 是否已經啟用：

![](https://img-blog.csdnimg.cn/img_convert/5ad0c58e20a9cfb9bd8a97586b784a68.png)

this.cmsConfig.featureModules 裡確實存在 cartQuickOrder 的記錄：
![](https://img-blog.csdnimg.cn/img_convert/ec587bc2b4421f2aea0d3027950d9f39.png)

![](https://img-blog.csdnimg.cn/img_convert/f2ebddac8684f3213db94ab17c246a27.png)

這裡試圖獲取 QuickOrderFacade 的實現：

![](https://img-blog.csdnimg.cn/img_convert/98f3e659d0e4deef3d6029edab28d302.png)

最終是透過 QuickOrderService 注入的。

![](https://img-blog.csdnimg.cn/img_convert/22afdd61f14c0f88f55582672f0287dd.png)

此時 Quick Order core module 應該已經載入了。

![](https://img-blog.csdnimg.cn/img_convert/5792be0d30d44cbe08b2c4d03def16f9.png)

我們來具體看一下到底是哪行程式碼觸發的 core module 載入？

![](https://img-blog.csdnimg.cn/img_convert/dce75ec526d59849b5725c5bb35028b9.png)

入口：
![](https://img-blog.csdnimg.cn/img_convert/df67cdb3f92f58d25f03262af39869ca.png)

這一行的下一個函式呼叫觸發延遲載入：
![](https://img-blog.csdnimg.cn/img_convert/0a5e6de3f2e80ff11900a5f920302ea6.png)

最終位置：
![](https://img-blog.csdnimg.cn/img_convert/ffd5a8b6d68d15cee59c1c75942e1cae.png)

SAP 電商雲 Spartacus UI Proxy Facade 的一個實際例子

相關文章