为什么当我使用 import-export 时 html 不运行我导入的 javascript答案

【问题标题】：Why isn't html running javascript I import when I use import-export为什么当我使用 import-export 时 html 不运行我导入的 javascript
【发布时间】：2019-09-17 22:20:24
【问题描述】：

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

【问题讨论】：

导入是异步的。 sidebarmodule.js 在您尝试调用它时不会被加载。阅读the documentation on import 了解如何使用.then()
好的，谢谢大家的帮助。问题仍然存在。我按照 Archer 的建议更改了代码，但它仍然不会更改 html。 app.js 当前： import("./visualModules/sidebarmodule") .then((sidebar) => { sidebar.createSidebar(); });我还将 type="module" 添加到脚本标签，但它也没有帮助。我还尝试将脚本标签放入标题中，添加异步/延迟，但这些都不起作用。

标签： javascript html ecmascript-6

【解决方案1】：

当您在 html 文件中加载 app.js 时，尝试添加：

<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 添加到侧边栏模块。其次，我必须在 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 循环中声明索引，所以我只是添加了一个 var。

希望这会有所帮助。

【讨论】：

感谢您的帮助，但列表仍未加载到页面上。你加载了吗？
是的，它在我这边加载。你能发布你的 HTML 代码吗？
我用你发布的正文试了一下，还是不行。好像是 app.js 或者 vscode 的问题。
太棒了！乐于助人:)

【解决方案2】：

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

从您的 html 中删除嵌入的 Javascript，但保留 app.js 的链接。然后把 app.js 改成这个……

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

【讨论】：

不用担心 - 很乐意提供帮助 :)