如何为多页面网页公共组件统一添加JavaScript功能并避免报错？

1. 先检查元素存在性再执行操作 #

每个DOM相关操作前，先判断目标元素是否存在，避免因元素不存在调用方法导致报错。示例：

// 侧边栏切换逻辑
const sidebarToggle = document.querySelector('#sidebar-toggle');
if (sidebarToggle) {
  sidebarToggle.addEventListener('click', () => {
    document.querySelector('#sidebar').classList.toggle('open');
  });
}

// 菜单悬停展开逻辑
const menuItems = document.querySelectorAll('.main-menu-item');
if (menuItems.length > 0) {
  menuItems.forEach(item => {
    item.addEventListener('mouseenter', () => {
      const submenu = item.querySelector('.submenu');
      if (submenu) submenu.style.display = 'block';
    });
  });
}

2. 拆分JS代码，按页面按需引入 #

把公共功能（比如导航栏、页脚的通用交互）抽离到common.js，每个页面特有的逻辑单独写对应文件（比如about.js、projects.js）。这样每个页面只加载需要的JS，减少不必要的DOM查询：

• 所有页面都引入common.js（处理导航栏、页脚的公共交互）
• about.html额外引入about.js（处理关于页特有的逻辑）
• projects.html额外引入projects.js（处理项目页特有的逻辑）

3. 确保DOM加载完成后再执行代码 #

把所有DOM操作代码包裹在DOMContentLoaded事件监听里，保证页面元素完全加载后再执行JS，避免因DOM未渲染完成导致获取不到元素：

document.addEventListener('DOMContentLoaded', () => {
  // 在这里写所有需要操作DOM的代码
  const tooltipIcons = document.querySelectorAll('.tooltip-icon');
  if (tooltipIcons.length > 0) {
    tooltipIcons.forEach(icon => {
      icon.addEventListener('mouseover', () => {
        const tooltip = icon.getAttribute('data-tooltip');
        // 显示提示文本逻辑
      });
    });
  }
});

4. 用模块化函数封装功能 #

把每个独立功能封装成函数，在页面中根据元素是否存在来调用对应的函数，让代码更清晰易维护：

// 封装侧边栏切换功能
function initSidebarToggle() {
  const toggle = document.querySelector('#sidebar-toggle');
  if (!toggle) return;
  toggle.addEventListener('click', () => {
    document.querySelector('#sidebar').classList.toggle('active');
  });
}

// 封装图标悬停提示功能
function initIconTooltips() {
  const icons = document.querySelectorAll('.icon-with-tooltip');
  if (icons.length === 0) return;
  icons.forEach(icon => {
    icon.addEventListener('mouseenter', () => {
      const tooltipText = icon.dataset.tooltip;
      // 创建并显示提示框的逻辑
    });
  });
}

// 初始化所有需要的功能
document.addEventListener('DOMContentLoaded', () => {
  initSidebarToggle();
  initIconTooltips();
  // 其他功能函数调用
});

内容的提问来源于stack exchange，提问作者Pradeep Jais