все!
Я ссылаюсь на код, который я непосредственно подключаю к странице как модуль:
<script type='module' src="./newTab.js"></script>
Файл newTab.js также импортирует несколько других модулей, но один из них, viewer.js , теперь является проблемой:
В тот момент, когда я решил, что мое приложение должно иметь три разных макета, я разбил viewer.js на viewer_lay1.js , viewer_lay2.js, viewer_lay3.js и загрузите один из них. И, конечно же, мне часто приходится переписывать один фрагмент кода три раза. Поэтому я решил сделать это мудрее.
Очевидно, что для этого нужно сохранить viewer.js и импортировать один из трех модулей, представляющих выбранный макет, инкапсулируя функции, характерные для этого самого макета.
Проблема: эти конкретные функции все еще нуждаются в переменных и функциях, определенных в области действия viewer.js . Например. var selectedN = 0; представляет количество выбранных элементов.
Решение: определяют вещи как свойства объекта окна. Например. var selectedN = 0; становится window.selectedN = 0; Это делает эту переменную видимой в областях действия обоих модулей: viewer.js и viewer_lay1.js по простой прямой ссылке selectedN.
Проблема: Тем не менее, есть много других переменных и функций, которые необходимо определить таким образом. Что кажется очень неудобным. Кроме того, я хотел бы внедрить рабочее решение и в другие части кода.
Решение: присоединить импортированный материал из viewer_lay1.js к пространству имен модуля viewer.js . Например. this.func1 = viewer_lay1.func1 в области viewer.js . Это должно сделать func1 видимым в главном модуле viewer.js , как это было раньше, под простой прямой ссылкой func1.
Проблема: область действия viewer.js не определена this. Ни то, ни другое module или global.
Понятно, я не совсем понимаю, что такое пространства имен. Может кто-нибудь сказать, как заставить это работать? Это должно быть распространенной проблемой, так как программисты всегда разбивают свой код на отдельные файлы. Но как справиться с этим в JS?
Заранее спасибо!