访问在动态导入的JavaScript中声明的变量? [英] Access variables declared in dynamically imported JavaScript?
问题描述
我正在研究单页体系结构(SPA)Web应用程序.我已经实现了动态加载应用程序不同页面的功能.
I am working on Single Page Architecture (SPA) Web application. I am have implemented functionality to dynamically load different pages of application.
这就是我的 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()
- Initially spa.js loads. spa.data is empty
- It initiates spa.init(), which loads page.js
- page.js registers its data to spa variable
- Now control jumps back at spa.js and from spa.data for page, it will execute apply()
这很好.但这是一件奇怪的事！
This works fine. But here's a strange thing!
apply()方法可以访问裸露的 getMSG()，但是当我尝试通过浏览器开发人员执行 getMSG()时，控制台，我收到ReferenceError，暗示根本没有定义 getMSG()！我们的 pageData
The apply() method has access to bare getMSG(), but when I try to execute getMSG() it via browser's developer console I get ReferenceError implying that getMSG() is not defined at all! Same goes with our pageData
这是托管的heroku应用，您可以尝试- dyn导入
Here is the hosted heroku app, you can try - dyn-import
尽管它非常好，因为我不必担心不同文件中的功能冲突，但我想知道这是怎么回事.
Although it is very good as I don't have to worry about clashing functions in different files, I want to know how this is happening.
有人可以解释如何访问 page.js 中定义的方法和变量.我知道出口，但是如果没有出口，这是有可能的！
Can someone explain how can I access methods and variables defined in page.js. I am aware about exports, but it is somehow possible without exports!
推荐答案
如果未导出模块中定义的函数和变量，则不能直接访问它们.
You cannot directly access functions and variables defined in the module if they are not exported.
为什么spa变量可以全局访问的原因是 spa.js是普通脚本，在HTML文档头中引用.
Reason why spa variable is accessible globally is because spa.js is normal script, referenced in the HTML document head.
<head>
...
<script src="./spa.js"></script>
</head>
另一方面，如果您使用import脚本，则除非导出变量，否则变量将位于不同的范围内.因此， page.js被视为模块.
If you, on the other hand, import script, variables are in different scope, unless you export them. So page.js is treated as a module.
您当然可以将函数getMSG()附加到全局spa变量或pageData，但这两者都是解决方法.
You could, of course, attach function getMSG() to the global spa variable, or pageData, but both would be workarounds.
spa.getMSG = getMSG;
You can read more about differences between modules and standard scripts here - MDN JavaScript modules.
这篇关于访问在动态导入的JavaScript中声明的变量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
