JavaScript内联事件处理器作用域问题：动态导入函数调用报未定义

你遇到的报错是两个原因共同导致的：

• ES Module的导出变量默认是模块私有作用域，不会自动挂载到window全局对象上，而行内onclick事件只能调用window全局下挂载的函数
• 你动态调用import()时没有处理返回的Promise结果，没有把模块内的导出暴露到全局可访问的位置

方案1：修改模块内容，手动挂载到全局 #

修改根目录的script.js代码，把checker挂载到window对象：

export const checker = () => console.log(2020);
window.checker = checker;

该方案无需修改原有HTML逻辑，改动最小。 #

方案2：调整事件绑定逻辑，避免污染全局 #

修改HTML代码，移除行内onclick，在模块加载完成后绑定点击事件：

<button id="testBtn" onmouseover="async function load_script(){const module = await import('/script.js');this.onclick = module.checker;};load_script.call(this)">Click</button>

该方案不需要改动JS文件，也不会产生全局变量，更符合模块化开发规范。 #

注意事项 #

• 动态import()是异步执行的，必须通过await或者.then()才能拿到模块的导出内容
• 不推荐大量使用行内事件绑定，后续如果逻辑复杂建议把JS逻辑和HTML标签分离

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