Question

当我直接将模块添加到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来完成

编辑

发现问题了！

未在for循环中初始化索引。

EDIT2

以及需要添加的type =“ module”

Answer 1

import在Javascript中是异步的（在浏览器中不是Node.js），因此您在模块加载之前调用createSidebar()。您可以使用import来返回一个promise，这样您就可以在完成后执行代码。

从您的html中删除嵌入式Javascript，但保留指向app.js的链接。然后将app.js更改为此...

import("./visualModules/sidebarmodule")
    .then((sidebar) => {
        sidebar.createSidebar();
    });

Answer 2

在将app.js加载到html文件中时，请尝试添加：

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

当您想使用ESModules时应该可以使用。但无论如何，请更新我们：）

更新：好的，我自己使用HTML和JS创建了一个项目之后，发现了一些错误。

首先：使用ESModules时，您无法通过HTML使用JS中的任何功能，而必须从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文件中调用cumulator函数（就像我之前说的那样，您不能在其范围之外使用任何模块函数。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循环中声明索引，所以我只添加了一个变量。

希望这会有所帮助。

为什么在使用import-export时HTML不运行导入的javascript

2 个答案: