为什么type='module'脚本中仅导入函数可用 自定义函数调用报错

ES 模块默认拥有独立的模块作用域，你在 type="module" 的脚本中声明的函数、变量默认仅在模块内部可访问，不会自动挂载到全局 window 对象上。而写在 HTML 标签上的 onmousemove 这类内联事件处理器，执行时会从全局作用域查找对应的函数，因此找不到模块内声明的 mouseMoved 就会抛出引用错误。

方案1：手动挂载需要全局访问的函数到window对象 #

改造成本最低，适合快速适配原有内联事件的代码，只需在 script.js 中声明完函数后，手动将其挂载到全局 window 上即可：

import {bfs} from "./algorithms.js"

function mouseMoved() {
  console.log('mouse moved') 
}
// 新增这一行，将函数暴露到全局作用域
window.mouseMoved = mouseMoved

方案2（更推荐）：移除内联事件，在模块内部绑定事件 #

放弃在 HTML 中写 onxxx 内联事件的写法，改用标准的 addEventListener 在模块内部绑定事件，不需要暴露全局变量，也符合模块化的封装规范：

1. 先删除 HTML 标签上的 onmousemove="mouseMoved()" 代码
2. 在 script.js 中添加事件绑定逻辑：

import {bfs} from "./algorithms.js"

function mouseMoved() {
  console.log('mouse moved') 
}

// 等待DOM加载完成后绑定事件
document.addEventListener('DOMContentLoaded', () => {
  // 替换为你实际需要绑定事件的元素选择器
  document.querySelectorAll('td').forEach(cell => {
    cell.addEventListener('mousemove', mouseMoved)
  })
})

type="module" 的脚本默认自带 defer 属性，会等到DOM解析完成后再执行，添加 DOMContentLoaded 监听可进一步提升兼容性，避免特殊场景下DOM未加载就执行绑定逻辑的问题。

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