时间戳

首页 > 解决方案 > 访问在动态导入的 JavaScript 中声明的变量？

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

问题描述

我正在开发单页架构 (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)

工作流程说明：

这工作正常。但这里有一件奇怪的事情！

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

这是托管的heroku应用程序，您可以尝试-dyn-import

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

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

标签： javascriptsingle-page-applicationdynamic-import

解决方案

如果未导出，则无法直接访问模块中定义的函数和变量。

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

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

另一方面，如果您使用import脚本，则变量位于不同的范围内，除非您将它们导出。所以page.js被视为一个模块。

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

spa.getMSG = getMSG;

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

推荐阅读