ஒரு சுத்தமான மற்றும் திறமையான மெனு அமைப்பிற்கு JavaScript ஐ மேம்படுத்துதல்

உங்கள் லேண்டிங் பேஜ் மெனு தொடர்புகளை நெறிப்படுத்துதல்

இறங்கும் பக்கத்தை உருவாக்குவது பல விவரங்களை உள்ளடக்கியிருக்கலாம், மேலும் மிக முக்கியமான அம்சங்களில் ஒன்று மென்மையான பயனர் அனுபவத்தை வழங்குவதாகும். நீங்கள் பதிலளிக்கக்கூடிய மெனுவுடன் பணிபுரிகிறீர்கள் என்றால், ஒரு விருப்பத்தைத் தேர்ந்தெடுக்கும்போது தானாகவே அதை மூடுவது சிறந்த பயன்பாட்டிற்கு முக்கியமானது.

ஒரு பயனர் மெனு உருப்படியைக் கிளிக் செய்யும் போது மூடும் செயலைக் கையாள நீங்கள் ஏற்கனவே சில JavaScript ஐ எழுதியிருக்கலாம். இது வேலை செய்யும் போது, ​​குறியீட்டை சுத்தமாகவும் திறமையாகவும் செய்ய வேண்டிய அவசியம் உள்ளது. மீண்டும் மீண்டும் குறியீட்டைப் பராமரிப்பதில் சிரமம் மற்றும் பிழைகள் ஏற்பட வாய்ப்புள்ளது.

இந்தக் கட்டுரையில், கிளிக் செய்தவுடன் மெனுவை மூடும் பல மெனு உருப்படிகளைக் கொண்டிருக்கும் ஒரு காட்சியைப் பார்ப்போம். தற்போதைய குறியீடு வேலை செய்கிறது ஆனால் மீண்டும் மீண்டும் வரும் வடிவங்களை உள்ளடக்கியது. மிகவும் நேர்த்தியான ஜாவாஸ்கிரிப்ட் தீர்வைக் கொண்டு இந்த மறுமுறையை எளிமைப்படுத்தலாம்.

ஒரே மாதிரியான கூறுகள் மூலம் லூப்பிங் செய்வது அல்லது நிகழ்வுப் பிரதிநிதித்துவத்தை மேம்படுத்துவது போன்ற சிறந்த நடைமுறைகளைப் பயன்படுத்தி இந்தக் குறியீட்டை எவ்வாறு தூய்மையாக்குவது என்பதை ஆராய்வோம். இந்த அணுகுமுறை வாசிப்புத்திறன் மற்றும் செயல்திறன் இரண்டையும் மேம்படுத்தும்.

கட்டளை	பயன்பாட்டின் உதாரணம்
querySelectorAll()	குறிப்பிட்ட தேர்வியுடன் பொருந்தக்கூடிய அனைத்து உறுப்புகளையும் தேர்ந்தெடுக்க இந்த கட்டளை பயன்படுத்தப்படுகிறது. இந்த நிலையில், இது .nav-list-ல் உள்ள அனைத்து ஆங்கர் () குறிச்சொற்களையும் மீட்டெடுக்கிறது, இது ஒவ்வொரு உருப்படியிலும் தனித்தனியாக நிகழ்வு கேட்பவர்களை லூப் செய்து சேர்க்க அனுமதிக்கிறது.
forEach()	நோட்லிஸ்ட்கள் அல்லது வரிசைகளில் மீண்டும் மீண்டும் செய்யப் பயன்படுகிறது. இந்த ஸ்கிரிப்ட்டில், forEach() ஆனது தேர்ந்தெடுக்கப்பட்ட ஒவ்வொரு மெனு உருப்படியையும் லூப் செய்து, மெனுவை மூடுவதற்கு கிளிக் நிகழ்வை இணைக்க அனுமதிக்கிறது.
addEventListener()	ஒரு உறுப்புடன் நிகழ்வு கையாளுதலை இணைக்க இந்த கட்டளை பயன்படுத்தப்படுகிறது. இங்கே, இது மெனு உருப்படிகளுடன் ஒரு 'கிளிக்' நிகழ்வை இணைக்கிறது, இதனால் அவை கிளிக் செய்யும் போது, ​​ஷோ-மெனு வகுப்பை அகற்றுவதன் மூலம் மெனு மூடப்படும்.
remove()	ஒரு தனிமத்திலிருந்து ஒரு குறிப்பிட்ட வகுப்பை அகற்ற இந்த முறை பயன்படுத்தப்படுகிறது. இந்த வழக்கில், .nav-list உறுப்பிலிருந்து ஷோ-மெனு வகுப்பை அகற்றுவதன் மூலம் வழிசெலுத்தல் மெனுவை மறைக்க நீக்க('show-menu') அழைக்கப்படுகிறது.
try...catch	குறியீட்டில் உள்ள விதிவிலக்குகள் மற்றும் பிழைகளைக் கையாளப் பயன்படுகிறது. மெனு உறுப்புகள் காணப்படாவிட்டால் அல்லது ஸ்கிரிப்ட் செயல்படுத்தும் போது ஏதேனும் சிக்கல் ஏற்பட்டால், செயல்பாட்டை உடைப்பதைத் தடுக்க பிழை பிடிக்கப்பட்டு உள்நுழைவதை இது உறுதி செய்கிறது.
console.error()	இந்த கட்டளை பிழை செய்திகளை உலாவியின் கன்சோலில் பதிவு செய்கிறது. CloseMenu() செயல்பாட்டின் போது ஏற்படும் ஏதேனும் பிழைகளைக் காட்ட, கேட்ச் பிளாக்கிற்குள் இது பயன்படுத்தப்படுகிறது.
tagName	DOM இல் உள்ள ஒரு உறுப்பின் குறிச்சொல் பெயரைச் சரிபார்க்க இந்தப் பண்பு பயன்படுத்தப்படுகிறது. ஸ்கிரிப்ட்டில், ஆங்கர் குறிச்சொற்கள் () மட்டுமே கிளிக் செய்யும் போது மெனு மூடுதலைத் தூண்டுவதை உறுதிசெய்ய, நிகழ்வுப் பிரதிநிதித்துவத்தில் இது பயன்படுத்தப்படுகிறது.
contains()	கிளாஸ்லிஸ்ட் ஏபிஐயின் ஒரு பகுதி, உறுப்பின் கிளாஸ் லிஸ்டில் ஒரு கிளாஸ் இருக்கிறதா என சரிபார்க்கும்() காசோலைகளைக் கொண்டுள்ளது. யூனிட் சோதனை எடுத்துக்காட்டில், மெனு உருப்படியைக் கிளிக் செய்த பிறகு ஷோ-மெனு வகுப்பு அகற்றப்பட்டதா என்பதை இது சரிபார்க்கிறது.
click()	இந்த கட்டளை ஒரு உறுப்பு மீது பயனர் கிளிக் செய்வதை உருவகப்படுத்துகிறது. ஒரு மெனு உருப்படியில் ஒரு கிளிக் நிகழ்வைத் தூண்டுவதற்கும், எதிர்பார்த்தபடி மெனு மூடப்படுவதைச் சரிபார்க்கவும் இது யூனிட் சோதனையில் பயன்படுத்தப்படுகிறது.

ஜாவாஸ்கிரிப்ட் மூலம் மெனு செயல்பாட்டை மேம்படுத்துகிறது

நாங்கள் ஆராய்ந்த ஸ்கிரிப்ட்களின் முதன்மை இலக்கு, இறங்கும் பக்கத்தில் வழிசெலுத்தல் மெனுவின் நடத்தையை எளிதாக்குவதும் மேம்படுத்துவதும் ஆகும். ஆரம்பத்தில், தீர்வு ஒவ்வொரு மெனு உருப்படிக்கும் மீண்டும் மீண்டும் குறியீட்டை உள்ளடக்கியது, ஆனால் இது தேவையற்ற மறுபடியும் மற்றும் திறமையற்ற குறியீட்டிற்கு வழிவகுத்தது. தூய்மையான, மிகவும் திறமையான தீர்வுகள், ஒரே மாதிரியான கூறுகள் மூலம் லூப் செய்யும் JavaScript இன் திறனைப் பயன்படுத்துகின்றன அல்லது மெனு தொடர்புகளை சிறந்த முறையில் கையாள நிகழ்வுப் பிரதிநிதித்துவத்தைப் பயன்படுத்துகின்றன. பயன்படுத்துவதன் மூலம் முறை, தொடர்புடைய அனைத்து மெனு உருப்படிகளையும் தேர்ந்தெடுத்து பணிநீக்கத்தைக் குறைக்கலாம்.

நாங்கள் பயன்படுத்திய முதல் மேம்படுத்தல்களில் ஒன்று பயன்படுத்தப்பட்டது அனைத்து மெனு உருப்படிகளையும் மீண்டும் செய்யவும் மற்றும் ஒவ்வொன்றிற்கும் ஒரு கிளிக் நிகழ்வு கேட்பவரை இணைக்கவும். எந்தவொரு பொருளையும் கிளிக் செய்யும் போது மெனுவை மூட இது அனுமதிக்கிறது. லூப் முந்தைய அணுகுமுறையை எளிதாக்குகிறது, மீண்டும் மீண்டும் வரும் நிகழ்வு ஹேண்ட்லர்களை மீண்டும் பயன்படுத்தக்கூடிய லூப் மூலம் மாற்றுகிறது. இது குறியீட்டைப் பராமரிப்பதை எளிதாக்குகிறது மற்றும் பிழைகளின் அபாயத்தைக் குறைக்கிறது. எதிர்கால மெனு உருப்படிகளை கூடுதல் குறியீடு மாற்றங்கள் இல்லாமல் எளிதாக சேர்க்க முடியும் என்பதையும் இது உறுதி செய்கிறது, மேலும் அளவிடுதல் மேம்படுத்துகிறது.

உகந்த ஸ்கிரிப்ட்களில் பயன்படுத்தப்படும் மற்றொரு முக்கியமான முறை . ஒவ்வொரு மெனு உருப்படியிலும் நிகழ்வு கேட்பவரை இணைப்பதற்குப் பதிலாக, கேட்பவரை பெற்றோர் கொள்கலனுடன் இணைத்துள்ளோம். . இந்த வழியில், குழந்தை உறுப்பு (மெனு உருப்படி போன்றது) மீது எந்த கிளிக் நிகழ்வும் பெற்றோரால் கண்டறியப்பட்டு சரியான முறையில் கையாளப்படும். இந்த அணுகுமுறை மிகவும் திறமையானது, ஏனெனில் இது உருவாக்கப்பட வேண்டிய நிகழ்வு கேட்பவர்களின் எண்ணிக்கையைக் குறைக்கிறது, பக்கத்தின் செயல்திறனை அதிகரிக்கிறது, குறிப்பாக அதிக எண்ணிக்கையிலான கூறுகளைக் கையாளும் போது.

பயன்படுத்தி பிழை கையாளுதலையும் செயல்படுத்தினோம் தொகுதிகள். 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 ஐ ஓவர்லோட் செய்வது தாமதங்களை ஏற்படுத்தலாம் அல்லது தளத்தின் வேகத்தைக் குறைக்கலாம். போன்ற திறமையான நுட்பங்களைப் பயன்படுத்துவதன் மூலம் அனைத்து தொடர்புடைய கூறுகளையும் ஒரே நேரத்தில் கைப்பற்றி, பின்னர் பயன்படுத்தவும் மீண்டும் கூற, உங்கள் ஸ்கிரிப்ட்டின் செயல்திறன் மற்றும் அளவிடுதல் இரண்டையும் மேம்படுத்துகிறீர்கள். மொபைல்-முதலில் பதிலளிக்கக்கூடிய வடிவமைப்புகளைக் கையாளும் போது இந்த மேம்படுத்தல்கள் மிகவும் முக்கியமானதாக மாறும், அங்கு வேகம் மற்றும் செயல்திறன் மிக முக்கியமானது.

ஒரு படி மேலே செல்ல, உடன் பிழை கையாளுதலை அறிமுகப்படுத்துகிறோம் வலிமையை மேம்படுத்துகிறது. எதிர்பாராத தோல்விகளைத் தடுப்பதற்கும், பயனர் தொடர்புகள் அழகாகக் கையாளப்படுவதை உறுதி செய்வதற்கும் இது முக்கியமானது. ஒரு மெனு உருப்படி விடுபட்டால், அல்லது DOM மாறும் போது, ​​இந்த பிழை கையாளும் வழிமுறைகள் செயல்பாட்டை உடைக்காமல் சிக்கல்களைப் பிடித்து பதிவு செய்யும். இந்தச் சிறந்த நடைமுறைகளைச் செயல்படுத்துவது பயனர் அனுபவம் மற்றும் தளத்தைப் பராமரிக்கும் திறன் ஆகிய இரண்டையும் வெகுவாக மேம்படுத்தும்.

1. JavaScript இல் நிகழ்வு பிரதிநிதித்துவம் எவ்வாறு செயல்படுகிறது?
2. நிகழ்வுப் பிரதிநிதித்துவம் உங்களைச் சேர்க்க அனுமதிக்கிறது அதன் குழந்தை கூறுகளிலிருந்து நிகழ்வுகளைக் கையாளக்கூடிய ஒரு பெற்றோர் உறுப்புக்கு. ஒவ்வொரு குழந்தைக்கும் தனித்தனியாக கேட்பவர்களை சேர்க்க வேண்டிய தேவையை இது தவிர்க்கிறது.
3. பயன்படுத்துவதால் என்ன பயன் ?
4. ஒரே நேரத்தில் CSS தேர்வியுடன் பொருந்தக்கூடிய அனைத்து உறுப்புகளையும் தேர்ந்தெடுக்க உங்களை அனுமதிக்கிறது, மெனு உருப்படிகள் போன்ற உறுப்புகளின் குழுக்களைக் கையாளும் போது அதை மிகவும் திறமையாக ஆக்குகிறது.
5. நான் ஏன் ஒரு வளையத்தைப் பயன்படுத்த வேண்டும் மெனு உருப்படிகளுடன்?
6. ஒவ்வொரு மெனு உருப்படியையும் மீண்டும் மீண்டும் செய்ய உங்களை அனுமதிக்கிறது மற்றும் ஒவ்வொரு உருப்படிக்கான குறியீட்டை கைமுறையாக மீண்டும் செய்யாமல், நிகழ்வு கேட்பவர்களைச் சேர்ப்பது போன்ற அதே செயலைப் பயன்படுத்துகிறது.
7. என்ன செய்கிறது மெனு சூழலில் செய்யவா?
8. ஒரு உறுப்பிலிருந்து ஒரு குறிப்பிட்ட வகுப்பை (ஷோ-மெனு போன்றது) நீக்குகிறது, இது ஒரு பொருளைக் கிளிக் செய்யும் போது வழிசெலுத்தல் மெனுவை மூடுகிறது.
9. பிழை கையாளுதல் எனது ஜாவாஸ்கிரிப்ட் குறியீட்டை எவ்வாறு மேம்படுத்தலாம்?
10. பயன்படுத்தி உங்கள் குறியீட்டில் சாத்தியமான பிழைகளை நிர்வகிக்க உங்களை அனுமதிக்கிறது. இந்த வழியில், ஒரு உறுப்பு காணவில்லை அல்லது ஏதாவது தோல்வியுற்றால், முழு ஸ்கிரிப்டையும் உடைக்காமல் பிழை பிடிக்கப்பட்டு உள்நுழையப்படும்.

மீண்டும் மீண்டும் வரும் குறியீட்டை அகற்றுவதன் மூலம் ஜாவாஸ்கிரிப்டை மேம்படுத்துவது பராமரிப்பையும் செயல்திறனையும் மேம்படுத்துகிறது. நிகழ்வு பிரதிநிதித்துவம், திறமையான DOM கையாளுதல் மற்றும் வலுவான பிழை கையாளுதல் போன்ற நுட்பங்கள் குறியீட்டை எளிதாக நிர்வகிக்கவும் எதிர்கால தேவைகளுக்கு ஏற்ப மாற்றவும் செய்கின்றன.

இந்த மேம்பாடுகளைச் செயல்படுத்துவதன் மூலம், உங்கள் முகப்புப் பக்கத்தின் மெனு அனைத்து சாதனங்களிலும் சீராக இயங்குவதை உறுதிசெய்கிறீர்கள். மட்டு குறியீடு மிகவும் அளவிடக்கூடியது மற்றும் மாற்றியமைக்கக்கூடியது, சிறந்த பயனர் அனுபவத்தை உருவாக்குகிறது மற்றும் எதிர்கால புதுப்பிப்புகளில் பிழைகள் மற்றும் பிழைகளுக்கான சாத்தியக்கூறுகளைக் குறைக்கிறது.