Создаются классы с модулями, использующие одни и те же переменные

Собирается бандл с помощью gulp и browserify

main.js

import App from './app.js';
window.App = App;

app.js

import {increment} from './counter.js';
import {subIncrement} from './sub-counter.js';

export default class App {
    increment() {
        increment();
    }
    subIncrement() {
        subIncrement();
    }
}

counter.js

let i=0;

export function increment() {
    i++;
    console.log(i);
}

sub-counter.js

import {increment} from './counter.js';

export function subIncrement() {
    increment();
}

То есть на выходе мы имеем класс.

В бандле мы много где подключаем counter.js, который увеличивает значение переменной на 1

Теперь, если мы создадим два таких класса, то при вызове метода increment мы увидим, что для этих классов переменная одна

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Новости</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    </head>
    <body>
        <script>
            function loadApplication() {
                let app1 = new App;
                app1.increment();
                app1.increment();
                app1.subIncrement();

                let app2 = new App;
                app2.increment();
                app2.increment();
                app2.subIncrement();
            }
        </script>
        <script
            src="./js/main.js"
            onload="loadApplication();"
        ></script>
    </body>
</html>

output

1
2
3
4
5
6

Задача в том, чтобы переменная была своя локальная для каждого созданного класса

Изначально не было задачи создавать 2 класса, только один. И все работало

Теперь общие переменные в подключаемых модулях мешают работе классов

Есть вариант в increment передавать некий id, но его придется тащить по всему проекту сверху вниз, что очень не удобно. В реальном проекте аналог counter.js подключается очень много где


Ответы (0 шт):