Создаются классы с модулями, использующие одни и те же переменные
Собирается бандл с помощью 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 подключается очень много где