使用代理模式改善SAP UI5应用的图片加载体验
For training purpose I am already implemented samples of various variants of proxy design pattern implementation in ABAP and Java. And now I need to find a meaningful example for proxy pattern used in JavaScript.
Let’s review the concept of proxy pattern in Wikipedia:
“A proxy, in its most general form, is a class functioning as an interface to something else. The proxy could interface to anything: a network connection, a large object in memory, a file, or some other resource that is expensive or impossible to duplicate. In short, a proxy is a wrapper or agent object that is being called by the client to access the real serving object behind the scenes. Use of the proxy can simply be forwarding to the real object, or can provide additional logic. In the proxy extra functionality can be provided, for example caching when operations on the real object are resource intensive, or checking preconditions before operations on the real object are invoked. For the client, usage of a proxy object is similar to using the real object, because both implement the same interface.“
Let’s use a real case to illustrate its usage.
Normal Solution
I have an XML view which contains one Image control:
<core:View xmlns:core="sap.ui.core" xmlns:common="sap.ui.commons" controllerName="buttontutorial.view.simple">
<common:Button text="Load Image" id="jerryButton" press="onPress"/>
<common:Image id="jerryImage"
height="400px"
width="400px"/>
</core:View>
And implement it in my controller.
sap.ui.define(["sap/ui/core/mvc/Controller"], function(Controller){
"use strict";
return Controller.extend("buttontutorial.view.simple",{
BIG_IMAGE: "https://cloud.githubusercontent.com/assets/5669954/24836808/7d78976e-1d58-11e7-9c28-2c76d90c9e12.png",
onPress: function(){
var image = this.byId("jerryImage");
this.loadImageNormal(image);
},
loadImageNormal: function(image){
image.setSrc(this.BIG_IMAGE);
}
});
}
);
Nothing special. The drawback of this solution is, when you try to load a big image file, only a fragment of image is displayed first and then accompanied with the left part gradually.
Proxy Solution
New source code of controller:
sap.ui.define(["sap/ui/core/mvc/Controller"], function(Controller){
"use strict";
return Controller.extend("buttontutorial.view.simple",{
BIG_IMAGE: "https://cloud.githubusercontent.com/assets/5669954/24836808/7d78976e-1d58-11e7-9c28-2c76d90c9e12.png",
onPress: function(){
var image = this.byId("jerryImage");
this.loadImageWithProxy(image);
},
injectProxy: (function(){
var imgProxy = new Image();
return function(img, src){
imgProxy.onload = function(){
img.setSrc(this.src);
};
img.setSrc("buttontutorial/view/loading.gif");
imgProxy.src = this.BIG_IMAGE;
};
})(),
loadImageWithProxy: function(image){
this.injectProxy(image);
}
});
}
);
In this solution, once button is pressed:
(1) a local animation gif will be displayed as loading indicator.
(2) At the same time, a proxy Image instance is created which issues the load of the big file in secret.
(3) When the loading of big file is finished, the onload callback is called, and only at this time the image control defined in xml view itself could display the completely loaded image file.
相关文章
- SAP 电商云 Spartacus UI 里的 ASM 模块启用的前置条件
- 关于 SAP UI5 所有控件的共同祖先 - sap.ui.base.ManagedObject
- SAP操作小技巧
- SAP UI5 sap.ui.export.Spreadsheet API 介绍
- 使用 SAP UI5 sap.ui.export.Spreadsheet API 进行 Excel 导出的一些限制
- 七大场景,带你玩转SAP ECN
- 关于 Fiori 应用里 SAP UI5 前端开发和 SEGW 后台 OData 服务开发的工作量比值问题
- SAP Gateway 上的 Metadata Cache
- SAP UI5 sap.m.Table Manual Pop-In Mode 概述
- 安装SAP,Linux获台前瞻未来(linux安装sap)
- 添加SAP_ALL权限详解编程语言
- SAP发送邮件详解编程语言
- SAP移动平均价格与标准价格详解编程语言
- sap中如何追踪生产订单的修改记录详解编程语言
- SAP在Linux上安装(sap安装linux)
- SAP vs Oracle:差异点与解析(sap和oracle的区别)
- 对比:Oracle 与 SAP的优势(oracle 与 sap)
- Oracle从SAP抽取数据的简单方法(oracle从sap抽数)
- Oracle与SAP权衡利弊比较之路(oracle与sap比较)
- Oracle与SAP金蝶谁更具竞争力(oracle sap金蝶)
- Oracle和SAP教程一步一步学习(oracle sap教程)