本文介绍使用 ES 模块的 import/export 机制，在 HTML 多页应用中集中管理并按需复用通用工具函数（如 checkLogin、hideSections），避免重复编写与全局污染，兼顾可维护性、作用域安全与现代构建友好性。
本文介绍使用 es 模块的 `import/export` 机制，在 html 多页应用中集中管理并按需复用通用工具函数（如 `checklogin`、`hidesections`），避免重复编写与全局污染，兼顾可维护性、作用域安全与现代构建友好性。
在构建大型多页 Web 应用（如基于 Vite + jQuery 的 24+ 页面项目）时，频繁复用基础逻辑（例如登录状态校验、DOM 批量隐藏、表单验证等）极易陷入两难：若在每个页面脚本中重复定义，将导致维护成本飙升；若直接挂载到 window 对象上，则违背模块化原则，引发命名冲突、调试困难与树摇失效等问题。
推荐方案：ES 模块化工具函数库
核心思路是将通用函数统一抽离为独立的 .js 模块，通过原生 <script type="module"> 在各页面中按需导入——既保持严格作用域隔离，又实现零重复、易更新、可测试的代码结构。</script>
✅ 示例：创建 src/utils/ 工具目录
// src/utils/checkLogin.js
export function checkLogin() {
const token = localStorage.getItem('auth_token');
if (!token) {
window.location.href = '/login.html';
return false;
}
return true;
}
// src/utils/hideSections.js
export function hideSections(elements) {
elements.forEach(el => {
if (el instanceof HTMLElement) el.style.display = 'none';
});
}
// src/utils/index.js —— 统一导出（可选，便于批量导入）
export { checkLogin } from './checkLogin.js';
export { hideSections } from './hideSections.js';
? 在任意 HTML 页面中使用（无需构建步骤，Vite 原生支持）：
<!-- login.html -->
<script type="module">
import { checkLogin } from './src/utils/checkLogin.js';
import { hideSections } from './src/utils/hideSections.js';
document.addEventListener('DOMContentLoaded', () => {
if (checkLogin()) {
hideSections([document.getElementById('guest-banner')]);
}
});
</script>
? 进阶建议：
-
路径别名优化：在 Vite 配置中设置 resolve.alias，将 @utils 指向 src/utils，使导入更简洁：
import { checkLogin } from '@utils/checkLogin.js'; - 类型安全增强：搭配 TypeScript 编写工具函数，自动生成类型提示与编译时检查；
- 按需加载（进阶）：对非首屏关键函数，可用 dynamic import() 实现懒加载，减少初始包体积；
- jQuery 兼容注意：若工具函数内部依赖 $，确保在导入前已加载 jQuery 模块（可通过 import 'jquery' 或 Vite 的 optimizeDeps.include 配置）。
⚠️ 注意事项：
- 所有模块脚本必须使用 type="module"，且路径需为相对或绝对 URL（不能省略扩展名 .js）；
- 避免在工具函数中隐式依赖全局状态（如未声明的 window.apiBase），应通过参数或配置对象显式传入；
- 若需跨页面共享状态（如用户信息），建议封装为带 getter/setter 的模块级单例，而非暴露可变全局变量。
通过该方式，一次修改 utils/ 中的函数，所有引用页面自动生效；每个页面仅加载自身所需逻辑，职责清晰、边界明确——真正实现“高内聚、低耦合”的工程实践。
