SAP Fiori裡的List是如何做到懶載入Lazy load的

今天一同事問我這個問題：S/4HANA Fiori應用裡的列表，一旦Scroll到底部就會自動向後臺發起新的請求把更多的資料讀取到前臺顯示。

以Product Master這個應用為例，我點選搜尋之後，結果區域顯示當前系統一共有140個product，但是隻有前25個返回並顯示在瀏覽器裡。

這個分頁效果是UI5 OData的引數實現的：$skip=0&top=25。

而總數140，是通過引數$inlinecount實現，其原理和ABAP Open SQL的SELECT COUNT(*)類似。

從Chrome開發者工具能觀察到頭25個product的payload：

當將列表滾動至底部時，第二批共25個product從後臺讀取出來，顯示在前臺：

這個http請求的引數：$skip=25&top=25，用於讀取從第25個到第50個product。

從呼叫棧能清楚發現是scroll這個事件觸發的第二批product的讀取動作。

然後再去GrowingEnablement.requestNewPage這一個呼叫棧，發現一個屬性_iLimit維護了一個開始索引，每次scroll到底部的事件觸發之後，該屬性值都會被GrowingThreshold累加。 因為API this._oControl.getGrowingThreshold每次返回的是一個常量25, 因此_iLimit的值每次scroll到底部之後看起來是這樣的：25,50,75,100 ... 這些值會被用來作為HTTP請求引數$skip的值傳到後臺：

我同事的問題：growingThreshold在檔案sap.m.ListBase.js裡被硬編碼成20, 但是執行時在何處被改寫成了25？

要回答這個問題，需要了解一些UI5 Smart Template的知識，因為例子裡這個Product Master的Fiori應用，也是基於Smart Template開發的。可以參考我的部落格My understanding about how object page in Smart Template is rendered 來了解其工作原理。

當Product Master這個應用的UI Component被載入並馬上開始渲染時，需要先載入Smart Template的庫檔案:

在我部落格My understanding about how object page in Smart Template is rendered 提到，ListReport.view.xml這個檔案裡有若干view fragment的宣告，每個宣告指向了一些其他的Smart Template庫檔案。

這些庫檔案一覽：

在Chrome開發者工具檢視從ABAP後臺載入的庫檔案SmartTable.fragment.xml，能發現屬性growingThreshold在此處被硬編碼成25。

當SmartTable.fragment.xml被載入之後其內容會被解析， growingThreshold值為25，會通過控制元件的setter API寫入到控制元件屬性裡。這樣接下來在處理列表的scroll事件是，25這個值就會通過控制元件的getter API返回並累加到_iLimit上。

關於XML view從ABAP後臺載入到瀏覽器後是如何被解析並生成對應的UI5控制元件，可以參考我的部落格Why my formatter does not work? A trouble shooting example to know how it works

也許您按照我上面描述的步驟操作，但是無法觸發斷點。原因是因為UI5框架針對基於Smart Template開發的Fiori應用的XML view設計了一套快取機制。當待渲染的XML view已經在快取中存在時，不會去ABAP後臺載入Smart Template的庫檔案, 而是直接執行第428行的IF分支。

通過除錯我們可以發現快取是通過IndexedDB加上LRU(Least recently used)演算法實現的。

通過Chrome開發者工具可以觀察到待渲染的view已經有記錄儲存在IndexedDB裡了：

如果想觀察Smart Template庫檔案的載入，需點選"Delete database"以手動清除快取。

快取清除完畢後，即可觀察到期望中的Smart Template庫檔案載入。

這篇文章介紹瞭如何通過除錯找到同事提出問題的答案。我把它加在了我UI5除錯文章分享的合集裡：My UI5 debugging tips and experience collection - how to resolve UI5 issues through debugging by yourself
要獲取更多Jerry的原創技術文章，請關注公眾號"汪子熙"或者掃描下面二維碼:

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/24475491/viewspace-2152474/，如需轉載，請註明出處，否則將追究法律責任。