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

问题描述 投票：1回答：1

我正在研究单页架构（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()负载 页面.js
  • page.js 将其数据注册到 水疗 可变的
  • 现在控制权又跳了回来 spa.js 和来自 spa.数据 为页，它将执行 应用()

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

这个... 应用() 方法可以访问裸露的 getMSG()但当我尝试执行 getMSG() 通过浏览器的开发控制台，我得到了ReferenceError，暗示着 getMSG() 是完全没有定义的! 我们的 页面数据

下面是托管的heroku应用，你可以试试--。代客进口

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

谁能解释一下，我怎样才能访问定义在 page.js. 我知道导出，但它是以某种方式可以不导出！我正在做单页架构（SPA）Web应用程序。

javascript single-page-application dynamic-import
1个回答
1
投票

如果模块中定义的函数和变量没有被导出，你就不能直接访问它们。

原因是 spa 变量在全球范围内都可以访问，是因为 spa.js 是正常的文字，在HTML文档头部引用。

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

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

当然，你也可以将函数 getMSG() 对全球的影响 spa 可变 pageData但两者都是变通的办法。

spa.getMSG = getMSG;

你可以在这里阅读更多关于模块和标准脚本之间的区别--。MDN JavaScript模块.

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.