Что мешает мне использовать JS модуль?

Question

CrystalTempest

three.js , javascript , flask

Что мешает мне использовать JS модуль?

Я разрабатываю карту здания на основе Flask и Three.js. В файле index.html я создал SVG элементы для комнат, например: 
<pre><code class="html">&lt;rect class="room" x="850" y="0" width="300" height="300" data-info="Кабинет 101" id="room-101" data-script="101.js"/&gt;
...
                    &lt;rect class="room" x="1200" y="0" width="300" height="300" data-info="Кабинет 104" id="room-104" data-script="102.js"/&gt;</code></pre> 
Также я добавил JavaScript код в index.html, который загружает файлы 101.js ... 104.js:
<pre><code class="javascript">&lt;script&gt;
        const tooltip = d3.select("body").append("div")
            .attr("class", "tooltip")
            .style("opacity", 0);

        d3.selectAll(".room, polygon")
            }).on("click", function(event, d) {
                const roomId = d3.select(this).attr("id");
                const scriptFile = d3.select(this).attr("data-script");

                // Удаляем предыдущий загруженный скрипт, если он существует
                const existingScript = document.getElementById('dynamic-script');
                if (existingScript) {
                    document.body.removeChild(existingScript);
                }

                if (roomId &amp;&amp; scriptFile) {
                    document.querySelector('.main-content').style.display = 'none';
                    document.getElementById('scene-container').style.display = 'block';

                    const script = document.createElement('script');
                    script.id = 'dynamic-script'; // Присваиваем ID для удобного удаления
                    script.src = "/static/js/" + scriptFile; // Используем data-script для определения файла
                    document.body.appendChild

13 октября 2024 г. 21:02

Ответы на вопрос 2

Похожие вопросы

Answer 1

Судя по вашему описанию, у вас возникли проблемы с динамической загрузкой JavaScript модулей при клике на элементы карты. Вы загружаете JavaScript файлы, связанные с конкретными комнатами, но, возможно, сталкиваетесь с одной из следующих проблем:

### 1. Ошибка загрузки файла
Убедитесь, что файлы `101.js`, `102.js` и так далее действительно существуют по указанному пути (`/static/js/`). Проверьте консоль браузера для выявления ошибок загрузки.

### 2. Проблемы с модульной системой
Если ваши JavaScript файлы являются ES модулями (например, они используют `import` и `export`), то их нужно загружать немного иначе. Для этого вам нужно будет использовать `type="module"` при создании тега `<script>`.

Пример:

```javascript
if (roomId && scriptFile) {
const script = document.createElement('script');
script.id = 'dynamic-script'; // Присваиваем ID для удобного удаления
script.src = "/static/js/" + scriptFile; // Используем data-script для определения файла
script.type = 'module'; // Обратите внимание на этот атрибут
document.body.appendChild(script);
}
```

### 3. Порядок выполнения скриптов
Если ваши скрипты зависят от других библиотек или модулей, убедитесь, что они загружаются в правильном порядке. Иногда ошибки могут возникать при попытке обращения к переменным или функциям, которые еще не инициализированы.

### 4. Контексты выполнения скрипта
Имейте в виду, что скрипты, загруженные динамически, будут выполняться отдельно от контекста, в котором был загружен основной скрипт. Если ваши загружаемые скрипты полагаются на определенные глобальные переменные, их нужно передавать другим образом.

### 5. Конфликт в id скрипта
Убедитесь, что при загрузке нового скрипта предыдущий скрипт должным образом удаляется, чтобы избежать конфликтов. В вашем коде это реализовано, но убедитесь, что удаление срабатывает корректно.

### Рекомендации
- Проверьте негативные результаты в консоли разработчика, возможно, они помогут в диагностике.
- Убедитесь, что ваш сервер Flask настроен на корректное обслуживание статических файлов.
- Если вы используете какие-либо библиотеки или фреймворки, удостоверьтесь, что они совместимы с загружаемыми скриптами.

Попробуйте внести предложенные изменения и посмотрите, решат ли они вашу проблему.

Answer 2

При использовании импортов тип скрипта должен быть указан как "module". Попробуйте так: 
 <script type="module"> // <-- =========  здесь =============
        const tooltip = d3.select("body").append("div")
            .attr("class", "tooltip")
            .style("opacity", 0);
//=============
                    const script = document.createElement('script');
                    script.id = 'dynamic-script'; 
                    script.type = 'module';    //================= Добавляем этот атрибут================
                    script.src = "/static/js/" + scriptFile; 
                    document.body.appendChild(script);
//=============
</script>