不使用全局变量，避免多页面脚本重复编写相同函数的方法

针对你在多页面Web应用中遇到的通用函数复用问题，完全不用在“重复定义”和“全局污染”之间二选一——基于Vite的模块化能力，我们可以用更优雅的方案解决：

1. 模块化封装通用函数 #

把所有通用基础函数按职责归类到独立的模块文件中，避免全局挂载：

比如创建src/utils/auth.js处理登录相关逻辑：

// src/utils/auth.js
export function checkLogin() {
  // 你的登录状态检查逻辑，比如验证token、跳转登录页等
}

再创建src/utils/dom.js处理DOM操作类函数：

// src/utils/dom.js
export function hideSections(arr) {
  arr.forEach(el => $(el).hide());
}

这种方式下，所有函数都处于模块局部作用域，不会污染全局环境，而且职责清晰，后续开发者能快速找到对应逻辑。

2. Vite多页面配置确保模块可访问 #

因为是24+页面的多页应用，需要在vite.config.js中正确配置页面入口，让Vite能正确解析各个页面的模块依赖：

// vite.config.js
import { defineConfig } from 'vite';
import { resolve } from 'path';

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        index: resolve(__dirname, 'index.html'),
        userCenter: resolve(__dirname, 'pages/user-center.html'),
        // 依次添加所有24+页面的HTML入口路径
      }
    }
  }
});

3. 按需引入或全局初始化 #

按需引入 #

在需要用到函数的页面脚本中，直接导入对应模块的函数即可：

// pages/user-center.js
import { checkLogin } from '../utils/auth.js';
import { hideSections } from '../utils/dom.js';

$(document).ready(() => {
  checkLogin();
  hideSections(['#unauthorized-section', '#guest-only-content']);
});

全局通用逻辑自动执行 #

如果像checkLogin这种所有页面都需要执行的函数，可以创建一个全局初始化脚本src/core/boot.js，统一处理全局逻辑：

// src/core/boot.js
import { checkLogin } from '../utils/auth.js';

// 页面加载完成后执行全局初始化
$(document).ready(() => {
  checkLogin();
});

然后在每个页面的HTML中引入这个初始化脚本（或者通过Vite的html插件自动注入，减少重复代码）：

<!-- 每个页面的HTML中添加 -->
<script type="module" src="/src/core/boot.js"></script>
<script type="module" src="/src/pages/user-center.js"></script>

4. 额外的可维护性优化 #

• 添加注释：给通用函数添加JSDoc注释，明确参数、返回值和功能，方便后续开发者理解：

  /**
   * 检查用户登录状态，未登录时自动跳转至登录页
   * @returns {boolean} 是否已登录
   */
  export function checkLogin() {
    // 逻辑实现
  }
  

• 模块拆分：不要把所有通用函数堆到一个文件里，按功能拆分成auth.js、dom.js、storage.js等小模块，可读性更高。

这种方案既避免了重复代码，又完全规避了全局变量的弊端，同时保证了代码的可维护性和可读性——后续接手的开发者能清晰看到通用逻辑的位置，修改时只需要改一次模块文件，所有依赖的页面都会自动生效。

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