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.

  • 相关阅读:
    leetcode 10 正则表达式匹配(c++)
    基于.NetCore3.1系列 —— 日志记录之初识Serilog
    AspNetCore WebApi:Serilog(日志)
    .NET Core下的日志(3):如何将日志消息输出到控制台上
    Asp.Net Core用NLog记录日志操作方法
    .NET Core3.0 日志 logging-最好用的日志集合介绍
    .net core 3.1 使用nlog记录日志 NLog.Web.AspNetCore
    NetCore3.1 日志组件 Nlog的使用
    配置 ASP.NET Core 请求(Request)处理管道
    vue进入页面每次都调用methods里的方法
  • 原文地址:https://www.cnblogs.com/sap-jerry/p/13549130.html
Copyright © 2011-2022 走看看