ಒಂದು ಕ್ಲೀನ್ ಮತ್ತು ದಕ್ಷ ಮೆನು ಸಿಸ್ಟಮ್‌ಗಾಗಿ JavaScript ಅನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವುದು

ನಿಮ್ಮ ಲ್ಯಾಂಡಿಂಗ್ ಪೇಜ್ ಮೆನು ಸಂವಹನವನ್ನು ಸುವ್ಯವಸ್ಥಿತಗೊಳಿಸಲಾಗುತ್ತಿದೆ

ಲ್ಯಾಂಡಿಂಗ್ ಪುಟವನ್ನು ನಿರ್ಮಿಸುವುದು ಅನೇಕ ವಿವರಗಳನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ ಮತ್ತು ಅತ್ಯಂತ ಪ್ರಮುಖವಾದ ಅಂಶವೆಂದರೆ ಸುಗಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಒದಗಿಸುವುದು. ನೀವು ಸ್ಪಂದಿಸುವ ಮೆನುವಿನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುತ್ತಿದ್ದರೆ, ಆಯ್ಕೆಯನ್ನು ಆರಿಸಿದಾಗ ಅದು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಮುಚ್ಚುವುದು ಉತ್ತಮ ಉಪಯುಕ್ತತೆಗಾಗಿ ನಿರ್ಣಾಯಕವಾಗಿದೆ.

ಬಳಕೆದಾರರು ಮೆನು ಐಟಂ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಮುಚ್ಚುವ ಕ್ರಿಯೆಯನ್ನು ನಿರ್ವಹಿಸಲು ನೀವು ಈಗಾಗಲೇ ಕೆಲವು JavaScript ಅನ್ನು ಬರೆದಿರಬಹುದು. ಇದು ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿರುವಾಗ, ಕೋಡ್ ಅನ್ನು ಕ್ಲೀನರ್ ಮತ್ತು ಹೆಚ್ಚು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಮಾಡುವ ಅವಶ್ಯಕತೆಯಿದೆ. ಪುನರಾವರ್ತಿತ ಕೋಡ್ ನಿರ್ವಹಿಸಲು ತೊಡಕಾಗಿರುತ್ತದೆ ಮತ್ತು ದೋಷಗಳಿಗೆ ಗುರಿಯಾಗುತ್ತದೆ.

ಈ ಲೇಖನದಲ್ಲಿ, ನೀವು ಕ್ಲಿಕ್ ಮಾಡಿದ ಮೇಲೆ ಮೆನುವನ್ನು ಮುಚ್ಚುವ ಬಹು ಮೆನು ಐಟಂಗಳನ್ನು ಹೊಂದಿರುವ ಸನ್ನಿವೇಶವನ್ನು ನಾವು ನೋಡುತ್ತೇವೆ. ಪ್ರಸ್ತುತ ಕೋಡ್ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಆದರೆ ಪುನರಾವರ್ತಿತ ಮಾದರಿಗಳನ್ನು ಒಳಗೊಂಡಿದೆ. ಈ ಪುನರಾವರ್ತನೆಯನ್ನು ಹೆಚ್ಚು ಸೊಗಸಾದ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪರಿಹಾರದೊಂದಿಗೆ ಸರಳಗೊಳಿಸಬಹುದು.

ಒಂದೇ ರೀತಿಯ ಅಂಶಗಳ ಮೂಲಕ ಲೂಪ್ ಮಾಡುವುದು ಅಥವಾ ಈವೆಂಟ್ ನಿಯೋಗವನ್ನು ನಿಯಂತ್ರಿಸುವಂತಹ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಬಳಸಿಕೊಂಡು ನೀವು ಈ ಕೋಡ್ ಅನ್ನು ಹೇಗೆ ಕ್ಲೀನರ್ ಮಾಡಬಹುದು ಎಂಬುದನ್ನು ಅನ್ವೇಷಿಸೋಣ. ಈ ವಿಧಾನವು ಓದುವಿಕೆ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆ ಎರಡನ್ನೂ ಹೆಚ್ಚಿಸುತ್ತದೆ.

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನೊಂದಿಗೆ ಮೆನು ಕಾರ್ಯವನ್ನು ಹೆಚ್ಚಿಸುವುದು

ನಾವು ಅನ್ವೇಷಿಸಿದ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳ ಪ್ರಾಥಮಿಕ ಗುರಿಯು ಲ್ಯಾಂಡಿಂಗ್ ಪುಟದಲ್ಲಿ ನ್ಯಾವಿಗೇಷನ್ ಮೆನುವಿನ ನಡವಳಿಕೆಯನ್ನು ಸರಳಗೊಳಿಸುವುದು ಮತ್ತು ವರ್ಧಿಸುವುದು. ಆರಂಭದಲ್ಲಿ, ಪರಿಹಾರವು ಪ್ರತಿ ಮೆನು ಐಟಂಗೆ ಕೋಡ್ ಅನ್ನು ಪುನರಾವರ್ತಿಸುವುದನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ, ಆದರೆ ಇದು ಅನಗತ್ಯ ಪುನರಾವರ್ತನೆ ಮತ್ತು ಅಸಮರ್ಥ ಕೋಡ್ಗೆ ಕಾರಣವಾಯಿತು. ಕ್ಲೀನರ್, ಹೆಚ್ಚು ಪರಿಣಾಮಕಾರಿ ಪರಿಹಾರಗಳು ಒಂದೇ ರೀತಿಯ ಅಂಶಗಳ ಮೂಲಕ ಲೂಪ್ ಮಾಡುವ JavaScript ನ ಸಾಮರ್ಥ್ಯವನ್ನು ಬಳಸುತ್ತವೆ ಅಥವಾ ಮೆನು ಸಂವಹನಗಳನ್ನು ಚುರುಕಾದ ರೀತಿಯಲ್ಲಿ ನಿರ್ವಹಿಸಲು ಈವೆಂಟ್ ನಿಯೋಗವನ್ನು ಅನ್ವಯಿಸುತ್ತವೆ. ಬಳಸುವ ಮೂಲಕ querySelectorAll ವಿಧಾನ, ನಾವು ಎಲ್ಲಾ ಸಂಬಂಧಿತ ಮೆನು ಐಟಂಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡಬಹುದು ಮತ್ತು ಪುನರಾವರ್ತನೆಯನ್ನು ಕಡಿಮೆ ಮಾಡಬಹುದು.

ನಾವು ಅನ್ವಯಿಸಿದ ಮೊದಲ ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗಳಲ್ಲಿ ಒಂದನ್ನು ಬಳಸುತ್ತಿದ್ದೇವೆ ಪ್ರತಿಯೊಂದಕ್ಕೂ ಎಲ್ಲಾ ಮೆನು ಐಟಂಗಳ ಮೂಲಕ ಪುನರಾವರ್ತಿಸಲು ಮತ್ತು ಪ್ರತಿಯೊಂದಕ್ಕೂ ಕ್ಲಿಕ್ ಈವೆಂಟ್ ಕೇಳುಗರನ್ನು ಲಗತ್ತಿಸಲು. ಯಾವುದೇ ಐಟಂ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಮೆನುವನ್ನು ಮುಚ್ಚಲು ಇದು ಅನುಮತಿಸುತ್ತದೆ. ಪುನರಾವರ್ತಿತ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳನ್ನು ಒಂದೇ ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಲೂಪ್‌ನೊಂದಿಗೆ ಬದಲಾಯಿಸುವ ಮೂಲಕ ಲೂಪ್ ಹಿಂದಿನ ವಿಧಾನವನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ. ಇದು ಕೋಡ್ ಅನ್ನು ನಿರ್ವಹಿಸಲು ಸುಲಭವಾಗುತ್ತದೆ ಮತ್ತು ದೋಷಗಳ ಅಪಾಯವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ. ಭವಿಷ್ಯದ ಮೆನು ಐಟಂಗಳನ್ನು ಹೆಚ್ಚುವರಿ ಕೋಡ್ ಬದಲಾವಣೆಗಳಿಲ್ಲದೆ ಸುಲಭವಾಗಿ ಸೇರಿಸಬಹುದೆಂದು ಇದು ಖಚಿತಪಡಿಸುತ್ತದೆ, ಸ್ಕೇಲೆಬಿಲಿಟಿ ಸುಧಾರಿಸುತ್ತದೆ.

ಆಪ್ಟಿಮೈಸ್ಡ್ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳಲ್ಲಿ ಬಳಸಲಾಗುವ ಮತ್ತೊಂದು ಪ್ರಮುಖ ವಿಧಾನವಾಗಿದೆ ಈವೆಂಟ್ ನಿಯೋಗ. ಪ್ರತಿಯೊಂದು ಮೆನು ಐಟಂಗೆ ಈವೆಂಟ್ ಕೇಳುಗರನ್ನು ಲಗತ್ತಿಸುವ ಬದಲು, ನಾವು ಕೇಳುವವರನ್ನು ಪೋಷಕ ಧಾರಕಕ್ಕೆ ಲಗತ್ತಿಸಿದ್ದೇವೆ, nav-ಪಟ್ಟಿ. ಈ ರೀತಿಯಾಗಿ, ಮಕ್ಕಳ ಅಂಶದ ಮೇಲೆ ಯಾವುದೇ ಕ್ಲಿಕ್ ಈವೆಂಟ್ (ಮೆನು ಐಟಂನಂತೆ) ಪೋಷಕರು ಪತ್ತೆಹಚ್ಚುತ್ತಾರೆ ಮತ್ತು ಸೂಕ್ತವಾಗಿ ನಿರ್ವಹಿಸುತ್ತಾರೆ. ಈ ವಿಧಾನವು ಹೆಚ್ಚು ಪರಿಣಾಮಕಾರಿಯಾಗಿರುತ್ತದೆ ಏಕೆಂದರೆ ಇದು ರಚಿಸಬೇಕಾದ ಈವೆಂಟ್ ಕೇಳುಗರ ಸಂಖ್ಯೆಯನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ, ಪುಟದ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ, ವಿಶೇಷವಾಗಿ ಹೆಚ್ಚಿನ ಸಂಖ್ಯೆಯ ಅಂಶಗಳೊಂದಿಗೆ ವ್ಯವಹರಿಸುವಾಗ.

ನಾವು ಬಳಸಿಕೊಂಡು ದೋಷ ನಿರ್ವಹಣೆಯನ್ನು ಸಹ ಅಳವಡಿಸಿದ್ದೇವೆ ಪ್ರಯತ್ನಿಸಿ... ಹಿಡಿಯಿರಿ ಬ್ಲಾಕ್ಗಳನ್ನು. DOM ನಲ್ಲಿ ಕಾಣೆಯಾದ ಅಂಶಗಳಂತಹ ಯಾವುದೇ ಸಂಭಾವ್ಯ ಸಮಸ್ಯೆಗಳು, ಮೆನುವಿನ ಕಾರ್ಯವನ್ನು ಮುರಿಯದೆಯೇ ಹಿಡಿಯಲಾಗುತ್ತದೆ ಮತ್ತು ಲಾಗ್ ಮಾಡಲಾಗಿದೆ ಎಂದು ಇದು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಈ ವಿಧಾನವು ಸುಧಾರಿಸುತ್ತದೆ ದೃಢತೆ ಸ್ಕ್ರಿಪ್ಟ್‌ನ ಮತ್ತು ವಿಷಯಗಳು ತಪ್ಪಾದರೆ ಡೀಬಗ್ ಮಾಡಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಒಟ್ಟಾರೆಯಾಗಿ, ಸ್ಕ್ರಿಪ್ಟ್‌ನ ಸುಧಾರಣೆಗಳು ಹೆಚ್ಚು ಮಾಡ್ಯುಲರ್, ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಮತ್ತು ಪರಿಣಾಮಕಾರಿ ಪರಿಹಾರಕ್ಕೆ ಕಾರಣವಾಗುತ್ತದೆ, ಕೋಡ್ ಪುನರಾವರ್ತನೆಯನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ ಮತ್ತು ನಿರ್ವಹಣೆಯನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ.

// 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');
  }
});

// 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');
  });
});

// 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);
});

ಮೆನು ಇಂಟರಾಕ್ಷನ್‌ಗಾಗಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಪರಿಷ್ಕರಿಸುವುದು: ಬೇಸಿಕ್ ಇಂಪ್ಲಿಮೆಂಟೇಶನ್‌ನ ಆಚೆಗೆ

ಸ್ಪಂದಿಸುವ ಲ್ಯಾಂಡಿಂಗ್ ಪುಟವನ್ನು ರಚಿಸುವಾಗ, ಬಳಕೆದಾರರಿಗೆ ತಡೆರಹಿತ ನ್ಯಾವಿಗೇಷನ್ ಅನುಭವವನ್ನು ಖಾತ್ರಿಪಡಿಸುವುದು ಒಂದು ಪ್ರಮುಖ ಅಂಶವಾಗಿದೆ. ಈ ಅನುಭವವನ್ನು ಸುಧಾರಿಸಲು ಒಂದು ವಿಧಾನವೆಂದರೆ ಕೋಡ್ ಪುನರಾವರ್ತನೆಯನ್ನು ಕಡಿಮೆ ಮಾಡುವುದು. ಪ್ರತಿ ಮೆನು ಐಟಂಗೆ ಈವೆಂಟ್ ಕೇಳುಗರನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಲಗತ್ತಿಸುವ ಬದಲು, ಡೆವಲಪರ್‌ಗಳು ಸುಧಾರಿತ ತಂತ್ರಗಳನ್ನು ಅನ್ವೇಷಿಸಬಹುದು ಈವೆಂಟ್ ನಿಯೋಗ. ಇದು ಪೋಷಕ ಅಂಶದ ಮೇಲೆ ಒಂದೇ ಈವೆಂಟ್ ಕೇಳುಗರಿಗೆ ಬಹು ಮಕ್ಕಳ ಅಂಶಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಅನುಮತಿಸುತ್ತದೆ, ಪ್ರಕ್ರಿಯೆಯನ್ನು ಸುಗಮಗೊಳಿಸುತ್ತದೆ. ಹೆಚ್ಚುವರಿಯಾಗಿ, ಮಾಡ್ಯುಲರ್ ಕಾರ್ಯಗಳನ್ನು ನಿಯಂತ್ರಿಸುವುದರಿಂದ ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ನಿರ್ವಹಿಸಲು ಮತ್ತು ಭವಿಷ್ಯದಲ್ಲಿ ವಿಸ್ತರಿಸಲು ಸುಲಭವಾಗುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.

ಪರಿಗಣಿಸಬೇಕಾದ ಇನ್ನೊಂದು ಅಂಶವೆಂದರೆ ಕಾರ್ಯಕ್ಷಮತೆ ಆಪ್ಟಿಮೈಸೇಶನ್. ದೊಡ್ಡ-ಪ್ರಮಾಣದ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಅನೇಕ ಈವೆಂಟ್‌ಗಳೊಂದಿಗೆ ವ್ಯವಹರಿಸುತ್ತವೆ ಮತ್ತು ಹಲವಾರು ಈವೆಂಟ್ ಕೇಳುಗರೊಂದಿಗೆ DOM ಅನ್ನು ಓವರ್‌ಲೋಡ್ ಮಾಡುವುದರಿಂದ ವಿಳಂಬವಾಗಬಹುದು ಅಥವಾ ಸೈಟ್ ಅನ್ನು ನಿಧಾನಗೊಳಿಸಬಹುದು. ನಂತಹ ಸಮರ್ಥ ತಂತ್ರಗಳನ್ನು ಬಳಸುವುದರ ಮೂಲಕ querySelectorAll ಎಲ್ಲಾ ಸಂಬಂಧಿತ ಅಂಶಗಳನ್ನು ಒಂದೇ ಬಾರಿಗೆ ಪಡೆದುಕೊಳ್ಳಲು ಮತ್ತು ನಂತರ ಬಳಸಿ forEach ಪುನರಾವರ್ತಿಸಲು, ನಿಮ್ಮ ಸ್ಕ್ರಿಪ್ಟ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ಸ್ಕೇಲೆಬಿಲಿಟಿ ಎರಡನ್ನೂ ನೀವು ಸುಧಾರಿಸುತ್ತೀರಿ. ಮೊಬೈಲ್-ಮೊದಲ ಪ್ರತಿಸ್ಪಂದಕ ವಿನ್ಯಾಸಗಳೊಂದಿಗೆ ವ್ಯವಹರಿಸುವಾಗ ಈ ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗಳು ವಿಶೇಷವಾಗಿ ಮುಖ್ಯವಾಗುತ್ತವೆ, ಅಲ್ಲಿ ವೇಗ ಮತ್ತು ದಕ್ಷತೆಯು ಪ್ರಮುಖವಾಗಿರುತ್ತದೆ.

ಒಂದು ಹೆಜ್ಜೆ ಮುಂದೆ ಹೋಗಲು, ಇದರೊಂದಿಗೆ ದೋಷ ನಿರ್ವಹಣೆಯನ್ನು ಪರಿಚಯಿಸಲಾಗುತ್ತಿದೆ try...catch ದೃಢತೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ. ಅನಿರೀಕ್ಷಿತ ವೈಫಲ್ಯಗಳನ್ನು ತಡೆಗಟ್ಟಲು ಮತ್ತು ಬಳಕೆದಾರರ ಸಂವಹನಗಳನ್ನು ಆಕರ್ಷಕವಾಗಿ ನಿರ್ವಹಿಸಲಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಇದು ನಿರ್ಣಾಯಕವಾಗಿದೆ. ಮೆನು ಐಟಂ ಕಾಣೆಯಾಗಿದ್ದರೆ ಅಥವಾ DOM ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಬದಲಾದರೆ, ಈ ದೋಷ-ನಿರ್ವಹಣೆ ಕಾರ್ಯವಿಧಾನಗಳು ಕಾರ್ಯವನ್ನು ಮುರಿಯದೆ ಸಮಸ್ಯೆಗಳನ್ನು ಕ್ಯಾಚ್ ಮತ್ತು ಲಾಗ್ ಮಾಡುತ್ತದೆ. ಈ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವುದರಿಂದ ಬಳಕೆದಾರರ ಅನುಭವ ಮತ್ತು ಸೈಟ್ ನಿರ್ವಹಣೆ ಎರಡನ್ನೂ ತೀವ್ರವಾಗಿ ಸುಧಾರಿಸಬಹುದು.