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 操作、堅牢なエラー処理などの手法により、コードの管理が容易になり、将来のニーズに対応できるようになります。

これらの改善を実装することで、ランディング ページのメニューがデバイス間でスムーズに動作するようになります。モジュラーコードはより拡張性と適応性が高く、より良いユーザーエクスペリエンスを生み出し、将来のアップデートでバグやエラーが発生する可能性を減らします。