SAPUI5 fiori 开发的最佳实践 Best Practices for App Developers

2022-05-06 16:32:38 阅读：187 来源： 互联网

标签：控件 ... SAPUI5 App fiori 使用 ui sap view

一，只加载使用到的组件

1，使用manifest定义App所需要的依赖

"sap.ui5": {
	"dependencies": {
		"minUI5Version": "1.60.0",
		"libs": {
			"sap.ui.core": {},
			"sap.m": {},
			"sap.ui.layout": {}
		}
	}
	...
}

2，在js文件中，不使用的依赖一定要从sap.ui.define中删除

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/m/MessageToast",
	"sap/base/Log"
], function (Controller, MessageToast, Log) {
	...

3，使用Lazy加载（还没使用到的数据暂时不加载）。

下面List控件的例子，一次检索20条数据，滚轮滚动时，再取20条。
注意：要满足这个需求的话，后端ABAP代码，也需要一次取20条。

<List
	growing="true"
	growingThreshold="20"
	...>

二，使用MVC

1，使用官方推荐的文件夹结构

2，使用XML格式的view

UI5支持XML，JavaScript, JSON, or HTML 4种view，官方强烈推荐使用XML。
XML的好处是显示与逻辑可以分离开，易于维护；BAS工具可以识别XML，进行拖拽。

3，controller的名字要和view一样

如果有共通的功能，可以放在BaseController里面，别的controller继承BaseController。

三，view要短小和简单

1，使用sap.m作为默认的命名空间

xmlns="sap.m"不用起别名
其他的起别名，比如：xmls:a="sap.ui.layout"
a就是别名，别名一定要短。

<mvc:View
	xmlns="sap.m"
	xmls:l="sap.ui.layout"
	xmlns:mvc="sap.ui.core.mvc">
	<App>
		<Page>
			<l:HorizontalLayout>
			...

2，删除view里无效代码

property的默认值不需要写
删除没有使用到的xmlns命名空间
如果控件有默认的content 或者 items标签，则可以省略它们
如果控件没有使用aggregations，则使用自关闭标签。
比如:<Text text="aaa'/>

3，在List控件里，避免使用复杂控件和嵌套控件，会影响性能。

<List
	items={/Products}>
	<StandardListItem
		title="{Name}"
		description="{Text}"/>

4，写view前，尽早考虑把view分成多个view或者fragments

<App>
	<Page>
		<mvc:XMLView viewName="EmployeList"/>
	</Page>
</App>

5，选择最轻量的控件，来满足需求

UI5提供了丰富的控件，许多控件都能达到同样的目的，尽量选择最简单的。
Sample

四，给控件的id命名

如果不给控件id，则UI5就自动生产id。当以后想在controller里想通过byid找到控件时，就无法指定id。最好指定id。
Stable IDs: All You Need to Know

五，满足CSP要求

不要在html页面直接写JavaScript代码。

六，使用异步加载

异步加载会使App速度加快，用户体验变好。

1，启动异步加载功能

<script 
...
	data-sap-ui-async="true"
>

通过上面的代码，就可以开启浏览器的并行处理多个请求的功能

2，确保rootView和Routing的设置也开启的异步功能

"sap.ui5": {
	"rootView": {
        "viewName": "sap.ui.demo.walkthrough.view.App",
        ...
        "async": true
    },
    "routing": {
        "config": {
            ...
            "async": true
        }
    },
...

标签：控件,...,SAPUI5,App,fiori,使用,ui,sap,view
来源： https://www.cnblogs.com/xiaoshiwang/p/16229302.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9