I've been facing an issue with my code structure, particularly with the duplication of header script imports in multiple places. Every time I need to add a new script, I find myself manually inserting
<script type="text/javascript" src="js/new.js" defer></script>.html file header. This has led to a lot of duplicated code and maintenance headaches.
Recently, I discovered a convenient solution for stylesheets by importing one master.css stylesheet in all .html file headers. Now, I simply add new styles to master.css to avoid repetition. The content of master.css is structured like this:
/* Register all base website imports here. */
@import url(base.css);
@import url(home.css);
@import url(topnav.css);
@import url(containers.css);
...
My query pertains to whether there is a similar JavaScript approach to group HTML header imports as shown above. I experimented with $.getScript("test.js");, but it doesn't seem to execute the script in the same manner as using <head> tags. Additionally, it behaves oddly with the defer attribute.