這是Jerry 2021年的第 14 篇文章，也是汪子熙公衆号總共第 285 篇原創文章。
在本篇文章之前，Jerry 印象最深的幽靈，應該要算《星際争霸I》裡人族能夠隐形的空中機關 Wraith( 幽靈戰機 ），以及能施放核彈的 Ghost( 幽靈特工).
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 應用中的使用場景。
如 Jerry 之前的文章
深入學習SAP UI5架構代碼系列之二：UI5 控件的渲染器所述，這個花瓣效果的實作 位于其渲染器 LoadingDialogRenderer 的方法 renderFioriFlower 内：
我在 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 清單顯示如下：
這些在真實資料尚未從背景加載完畢之前，以“占位符”的方式顯示在前台的灰色矩形條，綁定在 Angular Component 裡的資料，就稱為幽靈資料( Ghost Data ).
從Spartacus list.service.ts 的實作源代碼能看出，幽靈資料就是一個 length 屬性值為10的空數組。
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 觸發了某些背景資料加載時，為了提升使用者體驗而引入的一些頁面效果的技術實作，希望對大家有所幫助，感謝閱讀。
更多閱讀
SAP UI和Salesforce UI開發漫談
SAP UI 搜尋分頁技術
Jerry在2020 SAP全球技術大會的分享：SAP Spartacus技術介紹的文字版
SAP UI5應用開發人員了解UI5架構代碼的意義
SAP UI5 module懶加載機制
SAP UI5 控件渲染機制
HTML原生事件 VS SAP UI5 Semantic事件
SAP UI5控件中繼資料的中繼資料實作
SAP UI5控件的執行個體資料修改和讀取邏輯
SAP UI5控件資料綁定的實作原理
SAP UI5控件資料綁定的三種模式：One Way, Two Way和OneTime實作原理比較
SAP UI5控件ID的生成邏輯
SAP UI5控件的多語言(國際化,Internationalization,i18n)支援的實作原理
XML視圖裡的button控件
button控件和它背後的DOM元素
SAP UI5 OData謠言粉碎機：極短時間内發送兩個Odata request,前一個會自動被cancel掉嗎
漫談SAP産品裡頁面上的Checkbox設計與實作系列之一
SAP UI渲染模式：用戶端渲染 VS 伺服器端渲染