优化 JavaScript 以打造干净高效的菜单系统

更干净、高效的 JavaScript 菜单交互

使用带有事件委托的普通 JavaScript 来简化代码重复并提高性能。

// Select the parent container holding all menu items
const navList = document.querySelector('.nav-list');

// Add an event listener to the parent using event delegation
navList.addEventListener('click', (event) => {
  if (event.target.tagName === 'A') {
    // Close the menu when any link is clicked
    navList.classList.remove('show-menu');
  }
});

使用 JavaScript 实现可重用功能的优化解决方案

此方法使用循环来迭代所有菜单项，确保代码可重用而无需事件委托。

// Select all menu items
const menuItems = document.querySelectorAll('.nav-list a');

// Loop through each menu item
menuItems.forEach(item => {
  item.addEventListener('click', () => {
    // Close the menu on click
    navList.classList.remove('show-menu');
  });
});

具有错误处理功能的模块化且可重用的 JavaScript

该解决方案以模块化方式构建，将功能封装在可重用函数中，包括错误处理。

// Function to handle menu closure
function closeMenu() {
  try {
    const navList = document.querySelector('.nav-list');
    const menuItems = document.querySelectorAll('.nav-list a');

    if (!navList || !menuItems) {
      throw new Error('Menu elements not found');
    }

    menuItems.forEach(item => {
      item.addEventListener('click', () => {
        navList.classList.remove('show-menu');
      });
    });

  } catch (error) {
    console.error('Error in menu handling:', error);
  }
}

// Call the function
closeMenu();

菜单交互的单元测试

测试菜单交互以确保它在单击每个项目时正确关闭。

// Sample unit test using Jest
test('Menu closes on item click', () => {
  document.body.innerHTML = `
    <ul class="nav-list show-menu">`
    <li><a href="#" class="Item">Link1</a></li>`
    <li><a href="#" class="Item">Link2</a></li>`
    </ul>`;

  closeMenu(); // Initialize the event listeners

  const link = document.querySelector('.Item');
  link.click(); // Simulate a click

  expect(document.querySelector('.nav-list').classList.contains('show-menu')).toBe(false);
});

有关 JavaScript 菜单优化的常见问题

1. JavaScript 中的事件委托如何工作？
2. 事件委托允许您添加单个事件 addEventListener 到可以处理来自其子元素的事件的父元素。这避免了向每个子项单独添加侦听器的需要。
3. 使用有什么好处 querySelectorAll？
4. querySelectorAll 允许您一次性选择与 CSS 选择器匹配的所有元素，从而在处理菜单项等元素组时更加高效。
5. 为什么我应该使用像这样的循环 forEach 与菜单项？
6. forEach 允许您迭代每个菜单项并应用相同的操作，例如添加事件侦听器，而无需手动为每个项目重复代码。
7. 什么是 classList.remove() 在菜单上下文中做什么？
8. classList.remove() 从元素中删除特定的类（例如 show-menu），在这种情况下，单击某个项目时会关闭导航菜单。
9. 错误处理如何改进我的 JavaScript 代码？
10. 使用 try...catch 允许您管理代码中的潜在错误。这样，如果缺少某个元素或出现某些问题，则会捕获并记录错误，而不会破坏整个脚本。

关于简化 JavaScript 重复的最终想法

通过删除重复代码来优化 JavaScript 可增强可维护性和性能。事件委托、高效 DOM 操作和强大的错误处理等技术使代码更易于管理和适应未来的需求。

通过实施这些改进，您可以确保着陆页的菜单在不同设备上顺利运行。模块化代码更具可扩展性和适应性，可以创造更好的用户体验并减少未来更新中出现错误和错误的可能性。