Было разработано приложение, на выходе - возможность создавать объект и работать с ним.
Но вот потребовалось на одной и той же странице создать второй объект этого класса и я понял что допустил фундаментальную ошибку при разработке.
Сейчас опишу пример.
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();
}
index.html
<!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>
В консоли видим
1
2
3
4
5
6
То есть код подключаемых модулей не замкнут на экземпляре класса, который был создан, он общий для всех.
А хочется чтобы все что подключается в проекте было в контексте создаваемых объектов.
Модули вроде counter.js подключаются в проекте очень много где. Как вариант тащить каким-то образом от класса вниз некий id объекта, чтобы внутри модулей была работа в контексте этого id, но придется переписать почти все модули и всех, кто их использует.
Пытался придумать как замкнуть все это внутрь какой-нибудь (function(){})(), но не хватило ума.
