Почему html не запускает JavaScript, который я импортирую, когда использую import-export - PullRequest
Новая
       1

Почему html не запускает JavaScript, который я импортирую, когда использую import-export

2 голосов
/ 29 апреля 2019

Мой код работает нормально, когда я добавляю свой модуль прямо в HTML-код, но он не загружается, когда я пытаюсь сначала импортировать модуль в другой файл JavaScript.

Я попытался экспортироватьвсе, из моего модуля.

HTML : 

<html>
    <head>
        <title>
            Hello world
        </title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    <body>

        <h1>Tradingpost, done by no css gang.</h1>

        <div id="sidenav">Here be the links to other pages</div>

        <br>

        <footer id="footer">
            Done whenever. Copyright is mine.
        </footer>

        <script src="js/app.js"></script>
    </body>

</html>

app.js : 

import * as sidebar from "./visualModules/sidebarmodule"

function cumulator() {
    sidebar.createSidebar()
}

sidebarmodule.js : 

function sidebarAdder(pages) {
    const sidebar = document.getElementById("sidenav")

    const list = document.createElement("UL")

    for(index = 0; index < pages.length; index++) {

        const ul = document.createElement("LI")
        const a = document.createElement("A")

        a.setAttribute("href", "/" + pages[index])
        a.innerHTML = "" + pages[index]

        ul.appendChild(a)
        list.appendChild(ul)

    }
    sidebar.appendChild(list)
}

export function createSidebar() {

    var pages = [
        "home",
        "tradingpost"
    ]

    sidebarAdder(pages)
}

Следует добавить элементы в div.Но он этого не сделает, если я не буду использовать sidebarmodule.js.Я хочу сделать это через app.js

EDIT

Обнаружена проблема!

Не инициализировать индекс в цикле for.

EDIT2

И тип = "модуль", который необходимо добавить

Ответы [ 2 ]

0 голосов
/ 29 апреля 2019

Когда вы загружаете app.js в ваш HTML-файл, попробуйте добавить: 

<script type="module" src="js/app.js"></script>

Это должно работать, когда вы хотите использовать ESModules. Но, пожалуйста, обновите нас, независимо от того:)

Обновление: Хорошо, после создания проекта с использованием HTML и JS я обнаружил несколько ошибок.

Во-первых: при использовании ESModules, вы не можете использовать какие-либо функции в JS через ваш HTML, вам придется вводить все из app.js.

index.html: 

<body>
    <div id="sidenav">
        Here be the links to other pages
    </div>
    <br>
    <footer id="footer">
        Done whenever. Copyright is mine.
    </footer>
    <script type="module" src="js/app.js"></script>

app.js: 

import { createSidebar } from './visualModules/sidebarmodule.js';

cumulator();

function cumulator() {
    createSidebar()
}

Обратите внимание на две вещи: в конце импорта, поскольку мы не используем компилятор, модули не распознают файлы без их расширения. Поэтому мне пришлось добавить .js в sidebarmodule. Во-вторых, мне пришлось вызывать функцию кумулятора в файле app.js (как я уже говорил ранее, вы не можете использовать какие-либо функции модуля вне их области действия. В ESModules нет глобальных переменных).

sidebarmodule.js: 

function sidebarAdder(pages) {
    const sidebar = document.getElementById("sidenav")

    const list = document.createElement("UL")

    for(var index = 0; index < pages.length; index++) {

        const ul = document.createElement("LI")
        const a = document.createElement("A")

        a.setAttribute("href", "/" + pages[index])
        a.innerHTML = "" + pages[index]

        ul.appendChild(a)
        list.appendChild(ul)

    }
    sidebar.appendChild(list)
}

export function createSidebar() {

    var pages = [
        "home",
        "tradingpost"
    ]

    sidebarAdder(pages)
}

Вы не объявили индекс внутри цикла for, поэтому я просто добавил переменную.

Надеюсь, это поможет.

0 голосов
/ 29 апреля 2019

import асинхронен в Javascript (в браузере, а не в Node.js), поэтому вы вызываете createSidebar() перед загрузкой модуля.Вы можете использовать импорт, чтобы вернуть обещание, чтобы выполнить код после его завершения.

Удалите встроенный Javascript из вашего html, но оставьте ссылку на app.js.Затем измените app.js на этот ... 

import("./visualModules/sidebarmodule")
    .then((sidebar) => {
        sidebar.createSidebar();
    });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...