动态导入JavaScript中声明的变量如何访问？SPA场景技术问询

为什么控制台访问不到getMSG()和pageData？ #

这其实是ES模块的作用域隔离特性在起作用：

• 当你用await import('./page.js')加载脚本时，浏览器会把page.js当作一个ES模块来处理，而非普通的全局脚本。ES模块有自己独立的模块作用域，顶层的变量、函数（比如getMSG、pageData）默认只会在模块内部可见，不会自动挂载到全局的window对象上。
• 而pageData.apply()能正常调用getMSG()，是因为它们处于同一个模块作用域内，作用域链可以直接找到getMSG函数，这属于模块内部的闭包访问，不受外部作用域的限制。

如果换成普通的<script>标签加载page.js（不带type="module"），这些变量会自动挂到全局，控制台就能访问了，但你用了动态import()，就触发了模块加载机制。

不使用exports的情况下，如何让这些方法/变量能被外部访问？ #

既然不能用ES模块的导出语法，我们可以主动把需要暴露的内容挂载到全局对象或者你已经创建的全局spa对象上：

方案1：挂载到window全局对象

修改你的page.js，在注册pageData之后，把需要暴露的变量绑定到window：

const pageData = {
  apply: () => {
    document.body.innerHTML = getMSG()
  }
}
function getMSG() {
  return "hello message!"
}
spa.register('page', pageData)

// 主动暴露到全局
window.getMSG = getMSG;
window.pageData = pageData;

之后在控制台直接输入getMSG()或者pageData就能访问到了。

方案2：挂载到全局spa对象（更符合你的SPA架构）

既然spa已经是全局可用的对象，我们可以在它上面新增一个属性来存放需要暴露的工具方法/数据，避免污染全局window：

const pageData = {
  apply: () => {
    document.body.innerHTML = getMSG()
  }
}
function getMSG() {
  return "hello message!"
}
spa.register('page', pageData)

// 挂载到spa对象上，避免污染全局
spa.exposed = spa.exposed || {};
spa.exposed.getMSG = getMSG;
spa.exposed.pageData = pageData;

之后在控制台可以通过spa.exposed.getMSG()来调用函数，用spa.exposed.pageData访问对象。

补充说明 #

本质上，ES模块的设计就是为了避免全局作用域污染，所以默认隔离内部变量。你遇到的现象正是这种设计的体现——模块内部的代码可以自由访问内部成员，但外部（包括控制台的全局作用域）无法直接访问，除非主动暴露。

内容的提问来源于stack exchange，提问作者Ankur Parihar