本文介绍在 HTML 多页应用（如基于 Vite 的纯前端项目）中，通过 ES 模块化机制复用通用工具函数（如 checkLogin、hideSections）的最佳实践，兼顾作用域安全、可维护性与工程可扩展性。
本文介绍在 html 多页应用（如基于 vite 的纯前端项目）中，通过 es 模块化机制复用通用工具函数（如 `checklogin`、`hidesections`）的最佳实践，兼顾作用域安全、可维护性与工程可扩展性。
在构建包含 20+ 页面的静态多页 Web 应用（如使用 Vite + jQuery 或原生 JS）时，频繁复用基础逻辑（例如登录状态校验、DOM 批量隐藏、URL 参数解析等）极易陷入两难：若在每个页面脚本中重复定义，将导致维护成本飙升（一处修改需同步 24 个文件）；若直接挂载到 window 上形成全局函数，则违背模块化原则，引发命名冲突、意外覆盖与调试困难等风险。
✅ 推荐方案：ES 模块（ESM）按需导入
现代浏览器原生支持 <script type="module">，Vite 默认启用 ESM 构建，无需额外配置即可实现真正隔离、可树摇、易测试的函数复用：</script>
1. 创建统一工具模块
新建 src/utils/index.js（或按功能拆分为 auth.js、dom.js 等）：
// src/utils/dom.js
export function hideSections(elements) {
elements.forEach(el => el.classList.add('hidden'));
}
// src/utils/auth.js
export function checkLogin() {
const token = localStorage.getItem('auth_token');
if (!token) {
window.location.href = '/login.html';
return false;
}
return true;
}
// src/utils/index.js —— 统一导出（便于批量导入）
export { hideSections } from './dom.js';
export { checkLogin } from './auth.js';
2. 在任意页面中按需导入并使用
在 page-dashboard.html 中：
<script type="module">
import { checkLogin, hideSections } from './src/utils/index.js';
// 页面加载时执行
document.addEventListener('DOMContentLoaded', () => {
if (checkLogin()) {
const sections = document.querySelectorAll('.admin-only');
hideSections(sections);
}
});
</script>
? 关键优势说明：
- 零全局污染：所有函数仅在模块作用域内有效，不会泄漏至 window；
- 精准复用：支持命名导入（import {a,b}）或默认导入（import utils from），避免加载未使用代码；
- Vite 友好：自动处理路径解析、HMR 热更新及生产环境代码分割；
- 可维护性强：函数逻辑集中管理，修改一次即全局生效，且支持 JSDoc 注释与单元测试；
- 渐进升级：旧页面可保留原有逻辑，新页面逐步迁移，无破坏性变更。
⚠️ 注意事项：
- 确保所有 HTML 页面的 <script> 标签均声明 type="module"，否则无法解析 import； </script>
- 路径需为相对路径（如 ./src/utils/index.js），不支持 bare specifiers（如 lodash）——若需第三方库，请通过 npm install 后用 import _ from 'lodash'；
- 若仍需兼容极老浏览器（
通过模块化组织，你不仅解决了“写一遍、改 everywhere”的痛点，更在代码结构中自然体现了关注点分离——页面负责视图逻辑，工具函数专注通用能力。这才是面向协作、可持续演进的前端工程实践。
