访问在动态导入 JavaScript 中声明的变量？

Question

我正在研究单页架构 (SPA) Web 应用程序。我已经实现了动态加载不同应用程序页面的功能。

这就是我的 spa.js 的样子

var spa = {
    init: async () => {

        await import('./page.js')
        spa.data['page'].apply()
    },

    register: (page, data) => {
        spa.data[page] = data
    },

    data: {},
}

window.onload = () => {
    spa.init()
}

这就是我的 page.js 的样子

const pageData = {
    apply: () => {
        document.body.innerHTML = getMSG()
    }
}

function getMSG() {
    return "hello message!"
}

spa.register('page', pageData)

工作过程说明：

最初 spa.js 加载。 spa.data为空
它启动 spa.init()，加载 page.js
page.js 将其数据注册到 spa 变量
现在控制跳回到spa.js，从spa.data页面，它将执行申请（）

这很好用。但是有一件奇怪的事！

apply() 方法可以访问裸 getMSG()，但是当我尝试执行 getMSG () 通过浏览器的开发人员控制台我得到 ReferenceError 暗示 getMSG() 根本没有定义！我们的 pageData

也是如此

这里是托管的heroku应用，你可以试试 - dyn-import

虽然这很好，因为我不必担心不同文件中的函数冲突，但我想知道这是怎么发生的。

谁能解释一下如何访问 page.js 中定义的方法和变量。我知道出口，但没有出口也是可能的！

Answer 1

模块中定义的函数和变量如果不导出则不能直接访问。

spa 变量可全局访问的原因是因为 spa.js 是普通脚本 ，在 HTML 文档头中引用。

<head>
    ...
    <script src="./spa.js"></script>
</head>

另一方面，如果您 import 脚本，变量在不同的范围内，除非您导出它们。所以 page.js 被当作一个模块 .

当然，您可以将函数 getMSG() 附加到全局 spa 变量，或者 pageData，但两者都是解决方法。

spa.getMSG = getMSG;

您可以在此处阅读有关模块和标准脚本之间差异的更多信息 - MDN JavaScript modules。

访问在动态导入 JavaScript 中声明的变量？

Access variables declared in dynamically imported JavaScript?

javascript

dynamic-import

single-page-application