解决方案：ES模块函数与DOM事件的正确绑定
为了在HTML中安全地使用ES模块导出的函数，同时避免全局污染，最佳实践是在HTML内部使用一个内联的
1. 导出函数 (JavaScript 文件)
首先，确保您的JavaScript文件正确导出了您需要的函数。
立即学习“前端免费学习笔记（深入）”；
js/script.js
// 这是一个ES模块，导出了一个名为 initPage 的函数
export function initPage() {
console.log('页面初始化函数已执行！');
// 这里可以放置所有页面加载时需要执行的逻辑
const bodyElement = document.querySelector('body');
if (bodyElement) {
bodyElement.style.backgroundColor = '#f0f8ff'; // 示例：改变背景色
}
}
// 如果有其他函数，也可以继续导出
export function anotherFunction() {
console.log('另一个函数被调用了。');
}2. 在HTML中导入并绑定 (HTML 文件)
接下来，在您的HTML文件中，您需要使用一个内联的
index.html
ES模块函数绑定示例
欢迎来到我的页面
这里有一些内容，将在页面初始化后被处理。
通过这种方式，initPage 函数被导入到内联
注意事项
- 导入路径: import { initPage } from './js/script.js'; 中的路径必须是相对于当前HTML文件的正确路径。
-
执行时机:
- DOMContentLoaded: 当HTML文档被完全加载和解析时触发，不等待样式表、图片等外部资源加载。适合于执行需要操作DOM的初始化脚本。
- window.onload: 当整个页面（包括所有依赖资源，如图片、样式表、子框架等）都加载完成后触发。通常比 DOMContentLoaded 晚。
- 对于多数页面初始化任务，DOMContentLoaded 是更优的选择，因为它能让页面更快地响应用户交互。
- 模块化优势: 这种方法保持了JavaScript的模块化特性，避免了将函数暴露到全局 window 对象，从而减少了命名冲突和全局污染的风险。
- : 建议将内联的
