Better way to share JavaScript code [closed]

Question

I am working on a website using .NET Razor Pages. I have multiple pages that share JavaScript code. I'm using vanilla JavaScript. I have to perform actions related to mapping using leaflet. Most of this logic is similar, drawing on a map, calculating distances/areas/intersection, changing layers, changing routes visible... There are very small differences with each page. For example, on one page we might allow drawing polygons where on another page we might not. I am using flags as a global variable. I have a script inside every page that sets some flags like this:

<script>
    const bgLayerName = '@Model.DefaultBackgroundLayer';
    const infoLayerName = '@Model.DefaultInformationLayer';
    const onlyEnablePolygon = true;
    const allowMultiplePolygons = true;
</script>

Then in my shared code I will have conditionals for each flag:

if (typeof onlyEnablePolygon !== 'undefined' && onlyEnablePolygon) {
    // conditional code...
}

How can or should I improve this? My shared JavaScript is around 1K loc and contains no needless abstractions and I would like to keep it simple. But I feel uneasy about global variables

Answer 1

You can find inspiration here on how to avoid polluting the global namespace: https://developer.mozilla.org/en-US/docs/Glossary/IIFE#avoid_polluting_the_global_namespace

Your shared JS would still contain 1 global (the function) that you could call with a config object like

<script>
    initializeMapLogic({
      bgLayerName : '@Model.DefaultBackgroundLayer',
      infoLayerName : '@Model.DefaultInformationLayer',
      onlyEnablePolygon : true,
      allowMultiplePolygons : true
    });
</script>