zoukankan      html  css  js  c++  java
  • 使用代理模式改善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.

  • 相关阅读:
    ERROR: Cannot set priority of registrydns process 33740
    Hbase和Phoenix部署-单机版
    ambari安装hdp时,新建的ambari-hdp-1.repo中baseurl无值
    centos7.2升级openssh到8.0
    kafka一个broker挂掉无法写入
    对cdh搭建过程错误总结及解决方法
    streamsets
    [Spark]Task not serializable
    [Kafka]How to Clean Topic data
    Postgresql Master/Slaver
  • 原文地址:https://www.cnblogs.com/sap-jerry/p/13549130.html
Copyright © 2011-2022 走看看