SAP Fiori里的List是如何做到懒加载Lazy load的-低调大师

SAP Fiori里的List是如何做到懒加载Lazy load的

2018-03-30 568

今天一同事问我这个问题：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的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码:

微信关注我们

原文链接：https://yq.aliyun.com/articles/573778

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

【干货合集】让我们聊一聊如何用世界上最流行的脚本语言——JavaScript写出优美的代码

云栖社区编程语言系列讲座，4月16日-JavaScript专场，和资深技术专家一起学习JavaScript编程实战！你还在等什么，赶快报名吧！！！ JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。JavaScript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。JavaScript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。近年来，随着 HTML5 和 Node.js 的发展，JavaScript 在各个领域遍地开花，已经从“

2018-03-30

716

/* * 有些时候，我们是可以对异常进行处理的，但是又有些时候，我们根本就没有权限去处理某个异常。 * 或者说，我处理不了，我就不处理了。 * 为了解决出错问题，Java针对这种情况，就提供了另一种处理方案：抛出。 * * 格式： * throws 异常类名 * 注意：这个格式必须跟在方法的括号后面。 * * 注意： * 尽量不要在main方法上抛出异常(因为这样就没有意义了)。 * 但是我讲课为了方便我就这样做了(将来实际开发中是弹出页面)。 * * 小结： * 编译期异常的抛出，将来调用者必须处理。 * 运行期异常的抛出，将来调用可以不用处理，也可以处理(像处理编译期异常那样处理)。。 */ 示例代码如下： 1 package cn.itcast_05; 2 3 import java.text.ParseException; 4 import java.text.SimpleDateFormat; 5 import java.util.Date; 6 7 /* 8 * 有些时候，我们是可以对异常进行处理的，但是又有些时候，我们根本就没有权限去处理某个异常。 9 * 或...

2018-03-30

545

资源下载

更多资源

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。