其他分享
首页 > 其他分享> > SAPUI5 fiori 开发的最佳实践 Best Practices for App Developers

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

作者:互联网

一,只加载使用到的组件

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里无效代码

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