ஒரு சுத்தமான மற்றும் திறமையான மெனு அமைப்பிற்கு 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 மாறும் போது, ​​இந்த பிழை கையாளும் வழிமுறைகள் செயல்பாட்டை உடைக்காமல் சிக்கல்களைப் பிடித்து பதிவு செய்யும். இந்தச் சிறந்த நடைமுறைகளைச் செயல்படுத்துவது பயனர் அனுபவம் மற்றும் தளத்தைப் பராமரிக்கும் திறன் ஆகிய இரண்டையும் வெகுவாக மேம்படுத்தும்.