lundi 8 janvier 2018

es5 modular design pattern to es6

I have a large website with about a minimum of lakh users/day. Currently, we are writing code in Jquery/Vanilla JS using the modular design pattern. A simple js to hide/show loader is as below

"use strict";
var loaderHandler = (function(){
    var loader = document.getElementById('main_loader');
    return{
        showProcessLoader : function(){
            loader.style.display = 'block';
            loader.style.opacity = '0.5';
        },
        hideLoader : function(){
            loader.style.display = 'none';
        }
    }
})();
docReady(function() {
    loaderHandler.hideLoader();

});

Now whenever I want to show loader at some place I just call loaderHandler.showProcessLoader(); and loaderHandler.hideLoader(); to hide it. Similarly, I have other JS files which are written using the same design pattern and I create a single minified JS using a gulp task from all the js that is required on that page. Currently, everything works fine and I am able to call one js file function inside the other without any problem.

I have decided to move my application to the latest es6 now I have the following issues/queries

1) What is the design pattern in es6 which will be equivalent to my modular design pattern?

2) I don't intend to rewrite my existing js files but write only new js in es6. So I want the new design pattern shouldn't interfere with the existing architecture and still provide me support to write new js files in es6.

3) Also, I still should be easily able to call one js file function in other when a single minified file for a page is created.

Aucun commentaire:

Enregistrer un commentaire