With these single global function packed in small footprint js library file, you can make your multi pages html process more efficient. In traditional way, we have to rewrite/includes all headers (styles and script block) all over again in every html page in our project. The only to way to connect all those html page are through a href or using framework with SPA based concept. Using this single library now we can link all those html page in a modular way, which means we only require headers (styles and script block) only once, will be able to place our html+javascript module file to specific target element in our main file, and also the best part is we do not need any frontend framework to achieve that.

This packages includes mini project (index.html modules css js) to show how to use this library.  Within modularity.min.js there is 1 global function :

1. loadModule : function to load other formated html page as a module

Standar browser with javascript enabled

1. link modularity.min.js to your script src attribute, included in your main html file

2. make your module html file with below structures :

 

Other module

3. use global function loadModule in your main html file to load other html formated file
const res = await loadModule('modules/frmUser') or const res = await loadModule('modules/frmUser', '#target_element') or loadModule('modules/frmUser') if you're not require to verify its response

** Example how to implement can be found in index.html