ABAP和JavaScript的懒加载,单例和桥接模式的实现和比较

简介: ABAP和JavaScript的懒加载,单例和桥接模式的实现和比较

According to Wikipedia Lazy loading is a design pattern commonly used in computer programming to defer initialization of an object until the point at which it is needed. It can contribute to efficiency in the program’s operation if properly and appropriately used.

In this blog, I will use an example of SCN log on to illustrate its usage in JavaScript and how to simulate the implementation in ABAP.

When we click log on link in SCN:

image.pngLet’s assume that SCN creates a dummy div element with proper CSS style to achieve this mask effect. Of course the productive implementation might be completely different and more complex.


Pseudo Implementation version 1

Suppose we have a log on button with a click event handler. Every time it is clicked, a new mask div element is created.

image.pngimage.pngDrawback of this version

From single responsibility principle point of view, the function createMask mixes the mask div element creation with element buffering. Is there any approach to decouple these two different tasks?


Pseudo Implementation version 5 – the final one

image.pngIn this version we use a Bridge design pattern to decouple the concrete staff ( mask div element creation ) with the abstract staff ( created element must be singleton ), so that each staff can change independently without influence on the other.


Lazy Loading in ABAP

In ABAP actually it is also very easy to implement Lazy Loading: we just declare some private member attribute in class or static variable in function module for instance buffer. Nevertheless, let’s try to simulate the implementation done in JavaScript with Bridge pattern, in order to deepen our understanding on Bridge pattern as an ABAPer.

I have a dummy class to simulate DOM node:

image.pngimage.pngLet’s first see what is achieved in ABAP.

This is a test report:

REPORT zsingleton_test.
DATA(lv_new_fm) = zcl_singleton_factory=>get( iv_func = 'ZCREATE_MASK' ).
DATA: lo_node1 TYPE REF TO zcl_dom_node,
      lo_node2 TYPE REF TO zcl_dom_node,
      lo_node3 TYPE REF TO zcl_dom_node,
      lo_node4 TYPE REF TO zcl_dom_node.
CALL FUNCTION lv_new_fm
   EXPORTING
      iv_node_name = 'Jerry'
   IMPORTING
      eo_node = lo_node1.
CALL FUNCTION lv_new_fm
   EXPORTING
      iv_node_name = 'Jerry'
   IMPORTING
      eo_node = lo_node2.
CALL FUNCTION lv_new_fm
   EXPORTING
      iv_node_name = 'Java'
   IMPORTING
      eo_node = lo_node3.
CALL FUNCTION lv_new_fm
   EXPORTING
      iv_node_name = 'Java'
   IMPORTING
      eo_node = lo_node4.
zcl_singleton_factory=>cleanup( ).

A new function module is dynamically generated by ZCL_SINGLETON_FACTORY based on original function module ZCREATE_MASK. The new function module name is stored in variable lv_new_fm.

The new function module has exactly the same signature as ZCREATE_MASK. When it is called, we can observed that the singleton is fulfilled.

image.pngimage.pngThe main idea of the function module automatic generation is very similar as introduced in my blog Functional programming – Simulate Curry in ABAP.


Summary

In JavaScript, it only takes 6 simply lines to get a singleton factory which can wrap any function to behave with singleton functionality. In fact this is implemented via closure in JavaScript.

image.pngAnd in ABAP, due to lack of support in language perspective, I spend totally 351 lines of ABAP codes for simulation.

Hope this small simulation can help you as ABAPers to understand some language features in JavaScript.


Further reading

I have written a series of blogs which compare the language feature among ABAP, JavaScript and Java. You can find a list of them below:


Lazy Loading, Singleton and Bridge design pattern in JavaScript and in ABAP

Functional programming – Simulate Curry in ABAP

Functional Programming – Try Reduce in JavaScript and in ABAP

Simulate Mockito in ABAP

A simulation of Java Spring dependency injection annotation @Inject in ABAP

Singleton bypass – ABAP and Java

Weak reference in ABAP and Java

Fibonacci Sequence in ES5, ES6 and ABAP

Java byte code and ABAP Load

How to write a correct program rejected by compiler: Exception handling in Java and in ABAP

An small example to learn Garbage collection in Java and in ABAP

String Template in ABAP, ES6, Angular and React

Try to access static private attribute via ABAP RTTI and Java Reflection


相关文章
|
1月前
|
设计模式 XML 存储
关于 ABAP 单例设计模式的一个冷门知识点
关于 ABAP 单例设计模式的一个冷门知识点
|
8月前
|
JavaScript 前端开发 API
什么是懒加载,JS如何实现懒加载,在php中如何去实现懒加载
什么是懒加载,JS如何实现懒加载,在php中如何去实现懒加载
|
5天前
|
JavaScript 前端开发
JS懒加载
JS懒加载
5 0
|
9月前
|
JavaScript
jQuery lazyload.js 懒加载可视范围图片
jQuery lazyload.js 懒加载可视范围图片
46 0
|
1月前
|
JavaScript 算法 前端开发
JS懒加载 -- 适用于商城主页商品懒加载、图片懒加载,算法简单、易于理解、萌新福音
JS懒加载 -- 适用于商城主页商品懒加载、图片懒加载,算法简单、易于理解、萌新福音
34 0
|
7月前
|
JavaScript 前端开发 5G
js 图片懒加载
js 图片懒加载
57 0
|
8月前
|
JavaScript 前端开发 API
如何使用 JavaScript 代码连接部署在 SAP ABAP 服务器上的 OData 服务试读版
如何使用 JavaScript 代码连接部署在 SAP ABAP 服务器上的 OData 服务试读版
|
10月前
|
JavaScript 前端开发 UED
详解用JS实现页面懒加载
详解用JS实现页面懒加载
83 0
|
JavaScript 前端开发 UED
如何实现一个基于Vue.js的图片懒加载插件
在Web开发中,图片懒加载是一个常用的技术,可以减少页面首次加载时的请求数量,提高页面的响应速度,降低带宽使用。在Vue.js框架中,我们可以很容易地实现一个基于Vue.js的图片懒加载插件。
136 0