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