-1

I'm building a website using a premium html template, part of the template is in Javascript. So in the template I have something like this - its in the 'master template' every page.

//Template JS
<script src="/js/core.min.js"></script>
<script src="/js/script.js"></script>

Also as part of this website I am using an ecommerce plugin and those files also need to be on the page, so something like this:

//Plgin JS

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
        <script src="~/Scripts/jquery.validate.min.js"></script>
        <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
        <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
        <script src="~/Scripts/underscore.min.js"></script>
        <script src="~/Scripts/bootstrap.min.js"></script>
 <script src="~/App_Plugins/Merchello/client/js/merchello.ui.min.js"></script>
        <script src="~/App_Plugins/Merchello/client/js/merchello.ui.settings.js"></script>
        <script src="~/App_Plugins/Merchello/client/js/fasttrack.js"></script>

The problem is the JS conflicts when they are all on the page together. is there a way to group the java script files in a way they they can only see whats in that group... like a namespace kind of concept?

Or will I just have to unpick it all?

Ayo Adesina
  • 2,231
  • 3
  • 37
  • 71

1 Answers1

-1

Using script tags in the same html page no because browser creates only one global space which visible and shared between all scripts.

You can try to use some module bundlers like webpack, requirejs etc. Or you can use iframe to create a page inside page and move the plugin html and scripts to the iframe.

maksimr
  • 4,891
  • 2
  • 23
  • 22