将JS文件转为模块后pageLoad函数为何突然未定义？

之前传统开发JS应用时，在HTML头部按顺序引用脚本：

<head>
    ...
    <script src="./helpers.js"></script>
    <script src="./pwvlogic.js"></script>
</head>

现在想重构为模块方式：

1. 修改helpers.js，添加export导出函数：

export function createLineDiv(line) {
    ...
}

export function fillActionButtonsContainer(actionButtonsContainer, line) {
    ...
}
  
export function highlightSearchString(content) {
   ...
}

export default {
   createLineDiv,
   fillActionButtonsContainer,
   highlightSearchString
}

2. 在pwvlogic.js顶部添加导入语句：

import { createLineDiv, fillActionButtonsContainer, highlightSearchString } from './helpers.js';

3. 修改HTML，移除helpers.js的引用，并给pwvlogic.js的script标签加上type="module"：

<script src="./pwvlogic.js" type="module"></script>

但此时HTML中<body onload="pageLoad()">调用pwvlogic.js内的pageLoad函数时，出现错误：

Uncaught ReferenceError: pageLoad is not defined

疑问：为什么pageLoad突然未定义？模块中不能像普通JS文件那样引用全局函数吗？该如何修复？

ES模块（通过type="module"声明的脚本）运行在独立的模块作用域中，和普通脚本的全局作用域完全隔离。普通JS脚本会把顶级声明的变量、函数自动挂载到window全局对象上，所以HTML的onload能直接找到pageLoad；但模块里的顶级函数默认不会暴露到全局，HTML的全局上下文自然找不到这个函数。

有两种常用的解决思路：

方案一：将pageLoad暴露到全局对象 #

在pwvlogic.js中，定义完pageLoad函数后，手动把它挂载到window上：

function pageLoad() {
    // 原函数逻辑
}

// 暴露到全局
window.pageLoad = pageLoad;

这样HTML里的onload="pageLoad()"就能正常找到这个函数了。

方案二：在模块内监听页面加载事件 #

移除HTML中<body>的onload属性，改为在pwvlogic.js里直接监听页面加载事件：

function pageLoad() {
    // 原函数逻辑
}

// 监听页面加载完成事件
window.addEventListener('load', pageLoad);
// 或者如果不需要等待资源加载完成，只需要DOM就绪，用DOMContentLoaded：
// document.addEventListener('DOMContentLoaded', pageLoad);

这种方式更符合ES模块的开发规范，避免污染全局作用域。

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