SAP Fiori里的List是怎么做到懶加載Lazy load的

本篇內容主要講解“SAP Fiori里的List是怎么做到懶加載Lazy load的”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“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庫文件加載。

到此，相信大家對“SAP Fiori里的List是怎么做到懶加載Lazy load的”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！