使用代理模式改善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.
- 【学术】将吴恩达的第一个深度神经网络应用于泰坦尼克生存数据集
- 使用 HttpClient 调用 Restful 接口
- 元宵佳节:看Oracle技术粉们用SQL画团圆
- java 脚本引擎
- 不怕学不会 使用TensorFlow从零开始构建卷积神经网络
- 微信公众平台增加批量获取用户基本信息接口
- 谈网络适配器
- 【框架】为降低机器学习开发者门槛,苹果发布了Turi Create框架
- 新闻数据库分表案例
- 建立智能的解决方案:将TensorFlow用于声音分类
- Plugin Hook 设计与实现
- 数据与应用程序间通信·UDP Socket
- Java 数据类型转换
- Spring boot with Scheduling
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法