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

本篇內(nèi)容主要講解“SAP Fiori里的List是怎么做到懶加載Lazy load的”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“SAP Fiori里的List是怎么做到懶加載Lazy load的”吧!

問(wèn)題：S/4HANA Fiori應(yīng)用里的列表，一旦Scroll到底部就會(huì)自動(dòng)向后臺(tái)發(fā)起新的請(qǐng)求把更多的數(shù)據(jù)讀取到前臺(tái)顯示。

以Product Master這個(gè)應(yīng)用為例，我點(diǎn)擊搜索之后，結(jié)果區(qū)域顯示當(dāng)前系統(tǒng)一共有140個(gè)product，但是只有前25個(gè)返回并顯示在瀏覽器里。

這個(gè)分頁(yè)效果是UI5 OData的參數(shù)實(shí)現(xiàn)的：$skip=0&top=25。

而總數(shù)140，是通過(guò)參數(shù)$inlinecount實(shí)現(xiàn)，其原理和ABAP Open SQL的SELECT COUNT(*)類似。

從Chrome開(kāi)發(fā)者工具能觀察到頭25個(gè)product的payload：

當(dāng)將列表滾動(dòng)至底部時(shí)，第二批共25個(gè)product從后臺(tái)讀取出來(lái)，顯示在前臺(tái)：

這個(gè)http請(qǐng)求的參數(shù)：$skip=25&top=25，用于讀取從第25個(gè)到第50個(gè)product。

從調(diào)用棧能清楚發(fā)現(xiàn)是scroll這個(gè)事件觸發(fā)的第二批product的讀取動(dòng)作。

然后再去GrowingEnablement.requestNewPage這一個(gè)調(diào)用棧，發(fā)現(xiàn)一個(gè)屬性_iLimit維護(hù)了一個(gè)開(kāi)始索引，每次scroll到底部的事件觸發(fā)之后，該屬性值都會(huì)被GrowingThreshold累加。 因?yàn)锳PI this._oControl.getGrowingThreshold每次返回的是一個(gè)常量25, 因此_iLimit的值每次scroll到底部之后看起來(lái)是這樣的：25,50,75,100 ... 這些值會(huì)被用來(lái)作為HTTP請(qǐng)求參數(shù)$skip的值傳到后臺(tái)：

我同事的問(wèn)題：growingThreshold在文件sap.m.ListBase.js里被硬編碼成20, 但是運(yùn)行時(shí)在何處被改寫(xiě)成了25？

要回答這個(gè)問(wèn)題，需要了解一些UI5 Smart Template的知識(shí)，因?yàn)槔永镞@個(gè)Product Master的Fiori應(yīng)用，也是基于Smart Template開(kāi)發(fā)的?？梢詤⒖嘉业牟┛蚆y understanding about how object page in Smart Template is rendered 來(lái)了解其工作原理。

當(dāng)Product Master這個(gè)應(yīng)用的UI Component被加載并馬上開(kāi)始渲染時(shí)，需要先加載Smart Template的庫(kù)文件:

在我博客My understanding about how object page in Smart Template is rendered 提到，ListReport.view.xml這個(gè)文件里有若干view fragment的聲明，每個(gè)聲明指向了一些其他的Smart Template庫(kù)文件。

這些庫(kù)文件一覽：

在Chrome開(kāi)發(fā)者工具查看從ABAP后臺(tái)加載的庫(kù)文件SmartTable.fragment.xml，能發(fā)現(xiàn)屬性growingThreshold在此處被硬編碼成25。

當(dāng)SmartTable.fragment.xml被加載之后其內(nèi)容會(huì)被解析， growingThreshold值為25，會(huì)通過(guò)控件的setter API寫(xiě)入到控件屬性里。這樣接下來(lái)在處理列表的scroll事件是，25這個(gè)值就會(huì)通過(guò)控件的getter API返回并累加到_iLimit上。

關(guān)于XML view從ABAP后臺(tái)加載到瀏覽器后是如何被解析并生成對(duì)應(yīng)的UI5控件，可以參考我的博客Why my formatter does not work? A trouble shooting example to know how it works

也許您按照我上面描述的步驟操作，但是無(wú)法觸發(fā)斷點(diǎn)。原因是因?yàn)閁I5框架針對(duì)基于Smart Template開(kāi)發(fā)的Fiori應(yīng)用的XML view設(shè)計(jì)了一套緩存機(jī)制。當(dāng)待渲染的XML view已經(jīng)在緩存中存在時(shí)，不會(huì)去ABAP后臺(tái)加載Smart Template的庫(kù)文件, 而是直接執(zhí)行第428行的IF分支。

通過(guò)調(diào)試我們可以發(fā)現(xiàn)緩存是通過(guò)IndexedDB加上LRU(Least recently used)算法實(shí)現(xiàn)的。

通過(guò)Chrome開(kāi)發(fā)者工具可以觀察到待渲染的view已經(jīng)有記錄存儲(chǔ)在IndexedDB里了：

如果想觀察Smart Template庫(kù)文件的加載，需點(diǎn)擊"Delete database"以手動(dòng)清除緩存。

緩存清除完畢后，即可觀察到期望中的Smart Template庫(kù)文件加載。

到此，相信大家對(duì)“SAP Fiori里的List是怎么做到懶加載Lazy load的”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！