这种做法会导致Uncaught ReferenceError: initPage is not defined。原因在于：
- 模块作用域： script.js是一个ES模块，initPage函数仅存在于该模块的私有作用域内。
- 全局环境： onload="initPage()"是在全局执行环境中查找initPage函数，而ES模块的导出函数并未自动添加到全局作用域。
- 加载时序： 即使模块被加载，其内部的导出也无法直接被HTML的内联事件处理器识别。
解决方案：内联模块导入与DOMContentLoaded事件
要正确地在HTML中调用ES模块导出的函数，我们需要将模块的导入逻辑和函数调用封装在一个内联的
立即学习“前端免费学习笔记（深入）”；
核心步骤：
使用内联 在HTML中，创建一个
在内联模块中导入函数： 在这个内联的模块脚本中，使用import语句从外部JS模块文件中导入所需的函数。确保路径是正确的，相对于HTML文件或服务器根目录。
利用DOMContentLoaded事件： 将函数调用逻辑包装在document.addEventListener('DOMContentLoaded', ...)回调中。DOMContentLoaded事件在HTML文档完全加载并解析完成后触发，但不需要等待样式表、图片等外部资源加载完成。这比window.onload（等待所有资源加载完成）更早，对于操作DOM的脚本来说，通常是更合适的时机。
示例代码：
js/script.js (外部JS模块文件):
// js/script.js
export function initPage() {
console.log('initPage函数被成功调用！');
// 页面初始化逻辑：例如，修改DOM元素内容
const pageTitle = document.querySelector('h1');
if (pageTitle) {
pageTitle.textContent = '欢迎来到ES模块初始化的页面！';
}
document.body.style.backgroundColor = '#e0f7fa'; // 更改背景色
}
export function anotherUtilityFunction(message) {
console.log('这是一个辅助函数，消息:', message);
}index.html (HTML文件):
Python之模块学习 中文WORD版
下载
本文档主要讲述的是Python之模块学习；python是由一系列的模块组成的，每个模块就是一个py为后缀的文件，同时模块也是一个命名空间，从而避免了变量名称冲突的问题。模块我们就可以理解为lib库，如果需要使用某个模块中的函数或对象，则要导入这个模块才可以使用，除了系统默认的模块（内置函数）不需要导入外。希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看
ES模块函数导入与DOM就绪事件
页面加载中...
此段落将在JS模块函数执行后更新。
在上述示例中，我们不再使用
的onload属性。取而代之的是，在标签结束前放置一个内联的
