Namespaces of src files-CodePudding

I have a website made in ReactJS. In public/index.html, I have

<head>
  <script src="/lib/analyzejs-v1.js"></script>
  <script src="/lib/analyzejs-v2.js"></script>
</head>
<body>
  <div id="root"></div>
</body>

Some functions of analyzejs-v1.js and some functions of analyzejs-v2.js have same name. So in components, sometimes, I want to call f() of analyzejs-v1.js; sometimes, I want to call f() of analyzejs-v2.js.

Does anyone know how to manage the namespaces here to avoid confusion?

CodePudding user response：

The best way would be to group the functions inside your javascript files into classes or objects

// test.js
const testNamespace = {
    print = () => console.log('print was called from test.js')
}

// test1.js
const anotherNamespace = {
    print = () => console.log('print was called from test1.js')
}

now you can call these functions using


anotherNamespace.print();
testNamespace.print();

CodePudding user response：

If you import these files in your code like so:

import analyzejs-v1 from '/lib/analyzejs-v1.js'
import analyzejs-v2 from '/lib/analyzejs-v2.js'

in your code you can call them under different objects:

analyzejs-v1.f();
analyzejs-v2.f();