這是Jerry 2021年的第 14 篇文章，也是汪子熙公衆号總共第 285 篇原創文章。
在本篇文章之前，Jerry 印象最深的幽靈，應該要算《星際争霸I》裡人族能夠隐形的空中機關 Wraith( 幽靈戰機 ），以及能施放核彈的 Ghost( 幽靈特工).
上周 Jerry 做 SAP Spartacus 開發時，接觸到一個新的和幽靈相關的術語：
Skeleton Design(Ghost Design)
讀了幫助文檔後，發現該名詞對我來說隻不過是舊瓶裝新酒罷了。
本文目錄
SAP UI5 Busy Dialog
使用代理模式( Proxy Pattern ) 提高 SAP UI5 大尺寸圖檔的加載體驗
SAP Spartacus Spinner 控件
SAP Spartacus 幽靈設計
我對應用軟體的 User Experience 即使用者體驗領域知之甚少。在 SAP 内部，有專門的使用者體驗設計師負責這個領域，是以我也不清楚 Skeleton / Ghost Design 準确的中文翻譯是啥，姑且就直譯成“幽靈設計”吧。
在我看來，無論是幽靈設計，還是之前 SAP UI5 提供的頁面加載動畫效果，都是改善使用者使用體驗的一種手段：提示使用者目前頁面正在加載背景資料，或是執行一些比較費時的操作。
Jerry 從2014年開始使用 SAP UI5 進行 Fiori 開發，經曆了 Fiori 1.0 到 2.0 的版本疊代。還記得處理的第一個 CRM Fiori 應用 My Opportunities 的 bug，症狀就是修改了 Opportunity 資料之後，使用者可以短時間内快速點選下圖的 Save 按鈕，進而産生多個到 CRM 背景的 OData 儲存請求。
當時我的修複該問題的政策就是，在 Save 按鈕點選之後，設定一個 Busy Dialog，讓其鎖住整個頁面。這樣，使用者沒有機會再點選 UI 進行任何操作了。直至 OData 請求在背景成功完成，或者收到錯誤提示，再關閉該 Busy Dialog，頁面就能重新恢複可點選狀态。
在 Fiori 1.0 時代，Busy Dialog 的外觀是一個由5朵花瓣組成的花朵，具有不斷旋轉的動畫效果。
可以通過這個視訊檢視運作時效果：
https://v.qq.com/x/page/y3225pbaqpa.htmlJerry 曾經寫過一篇 SAP 社群部落格：Fiori Busy Dialog – when is it opened and closed
該文章介紹了 SAP UI5 Busy Dialog 在 Fiori 應用中的使用場景。
一個典型的例子是，使用者點選 Fiori Launchpad tile，跳轉到某個具體的 Fiori 應用時，浏覽器位址欄裡的 url 發生變化， sap.ui.controller.doHashChange 會調用 BusyDialog.open 方法，繪制一個花瓣的動畫效果：
如 Jerry 之前的文章 深入學習SAP UI5架構代碼系列之二：UI5 控件的渲染器 所述，這個花瓣效果的實作 位于其渲染器 LoadingDialogRenderer 的方法 renderFioriFlower 内：
5片花瓣的視覺效果，通過5個 div 元素實作：
而花瓣旋轉的動畫效果，通過 div 元素 css 類的 animation 系列屬性實作：
到了 Fiori 3.0 ，Jerry 發現 Busy Dialog 的外觀，已經變成了三個大小不斷變化的圓圈。
我在 2015 年擔任 一個德國 Fiori 客戶上線的 Dev Angel 時，該客戶有一個自開發需求：其産品主資料的配圖動辄超過 10 MB，客戶希望浏覽器在成功加載這些尺寸巨大的圖檔之前，顯示一些加載動畫效果。待到圖檔完全加載結束時，再關閉加載動畫，顯示實際圖檔。
先看沒有經過任何優化處理的情況下，如何在 SAP UI5 裡使用 Image 控件顯示一個 url 指向的圖檔：第10行調用 SAP UI5 控件 Image 執行個體的 setSrc 方法，加載 BIG_IMAGE 變量指向的圖檔。
再看我給客戶推薦的基于圖檔代理的解決方案。
這是運作時的效果：
https://v.qq.com/x/page/n32257vdvui.html這個方案實作源代碼如下：
上圖代碼按照運作時執行的先後順序，有4個關鍵點，分别用序号1～4表示：
第10行代碼，建立一個新的 Image 執行個體，充當圖檔代理的角色。
第15行代碼，UI5 應用裡原始的 Image 執行個體，調用 setSrc 方法，傳入的不是實際的大圖檔位址，而是一個存儲在本地的，表示圖檔正在加載的 gif 檔案( 客戶自己準備，一個該企業 Logo 旋轉的動畫效果). 這樣，使用者打開頁面時，首先映入眼簾的，是該本地 gif 檔案 loading.gif 實作的不斷旋轉的動畫效果。
第16行代碼，将待加載大尺寸圖檔的 url 通過輸入參數，傳遞給代理 Image 控件的 setSrc 方法。這會觸發浏覽器發起對大尺寸圖檔的加載。
第13行代碼，當代理 Image 控件觸發的大尺寸圖檔加載完成後，觸發其 load 回調函數。該回調函數觸發，說明大尺寸圖檔的資料已經完全加載到本地，此時在回調函數裡，将大尺寸圖檔的 url 設定給原始 Image 控件的 src 屬性，即可将該圖檔顯示出來。
Spartacus 裡的 Spinner 控件作用類似 SAP UI5 Busy Dialog，下面是一個例子：當第九行代碼的元件屬性 supportedDeliveryModes$.length 可用時，說明目前訂單支援的商品遞貨模式的相關配置資訊，已經從背景取到前台了，此時顯示遞貨模式的選擇頁面；否則，則顯示 ID 為 loading 辨別的模闆頁面，裡面隻包含一個 Spinner 控件：
這個 Spinner 控件的外觀及實作細節，請參考 Jerry 的視訊：
https://v.qq.com/x/page/w3160fich85.html 最後來說說 SAP Spartacus 的幽靈設計。
Spartacus B2B 功能子產品裡，正常的 Cost Centers 清單顯示如下：
在這些 Cost Center 的資料從背景取回來之前，頁面顯示如下，這種設計在 SAP Spartacus的幫助文檔裡，被稱為 Skeleton 或者 Ghost Design：
這些在真實資料尚未從背景加載完畢之前，以“占位符”的方式顯示在前台的灰色矩形條，綁定在 Angular Component 裡的資料，就稱為幽靈資料( Ghost Data ).
從Spartacus list.service.ts 的實作源代碼能看出，幽靈資料就是一個 length 屬性值為10的空數組。
在 Chrome 開發者工具裡，能觀察到這些幽靈資料具有對應的 CSS class，這使得它們具有灰色矩形的視覺外觀：
Cost Center 表格顯示的資料最終通過 list.service.ts 從 SAP Commerce Cloud 背景取出，取數邏輯通過 Angular 響應式程式設計庫 RxJS的 pipe 方法驅動：第101行 switchMap 操作符裡的箭頭函數，輸入參數 pagination 包含了去 Commerce Cloud 取資料使用的分頁設定，函數體 this.load 發送 HTTP 請求，消費 Commerce Cloud 的 OCC API. 而第102行的 startWith操作符，語義上相當于給 pipe 驅動的 Observable 流賦上一個初始值，該初始值即為 length 屬性為10的空數組。
這樣，從運作時序來說，任何消費 getData 函數傳回的 Observable 對象的 Angular UI 元件，都會先顯示 startWith 設定的初始值，即幽靈資料。待從 Commerce Cloud 背景加載的真實資料傳回給浏覽器之後，元件自動重新整理并顯示這些真實的業務資料。
本文介紹了 Jerry 工作過的 SAP 産品裡，當使用者操作 UI 觸發了某些背景資料加載時，為了提升使用者體驗而引入的一些頁面效果的技術實作，希望對大家有所幫助，感謝閱讀。