JavaScript optimizēšana tīrai un efektīvai izvēlņu sistēmai

Galvenās lapas izvēlnes mijiedarbības racionalizēšana

Galvenās lapas izveide var ietvert daudz detaļu, un viens no svarīgākajiem aspektiem ir vienmērīgas lietošanas pieredzes nodrošināšana. Ja strādājat ar adaptīvu izvēlni, tās automātiskai aizvēršanai, kad ir atlasīta opcija, ir izšķiroša nozīme labākas lietojamības nodrošināšanai.

Iespējams, jūs jau esat uzrakstījis JavaScript, lai veiktu aizvēršanas darbību, kad lietotājs noklikšķina uz izvēlnes vienuma. Lai gan tas darbojas, bieži vien kods ir jāpadara tīrāks un efektīvāks. Atkārtota koda uzturēšana var būt apgrūtinoša, un tajā var rasties kļūdas.

Šajā rakstā mēs aplūkosim scenāriju, kurā jums ir vairāki izvēlnes vienumi, kas aizver izvēlni pēc noklikšķināšanas. Pašreizējais kods darbojas, bet ietver atkārtotus modeļus. Šo atkārtojumu var vienkāršot ar elegantāku JavaScript risinājumu.

Izpētīsim, kā padarīt šo kodu tīrāku, izmantojot labākas prakses, piemēram, līdzīgu elementu cilpu vai notikumu deleģēšanu. Šī pieeja uzlabos gan lasāmību, gan veiktspēju.

Izvēlņu funkcionalitātes uzlabošana, izmantojot JavaScript

Mūsu izpētīto skriptu galvenais mērķis ir vienkāršot un uzlabot navigācijas izvēlnes darbību galvenajā lapā. Sākotnēji risinājums ietvēra koda atkārtošanu katram izvēlnes vienumam, taču tas izraisīja nevajadzīgu atkārtošanos un neefektīvu kodu. Tīrākos un efektīvākos risinājumos tiek izmantota JavaScript spēja pārvietoties caur līdzīgiem elementiem vai lietot notikumu deleģēšanu, lai gudrāk apstrādātu izvēlņu mijiedarbību. Izmantojot querySelectorAll metodi, mēs varam atlasīt visus atbilstošos izvēlnes vienumus un samazināt dublēšanos.

Viena no pirmajām optimizācijām, ko izmantojām, bija izmantošana katram lai atkārtotu visus izvēlnes vienumus un katram pievienotu klikšķu notikumu uztvērēju. Tas ļauj izvēlni aizvērt, kad tiek noklikšķināts uz jebkura vienuma. Cilpa vienkāršo iepriekšējo pieeju, aizstājot atkārtotu notikumu apstrādātājus ar vienu atkārtoti lietojamu cilpu. Tas atvieglo koda apkopi un samazina kļūdu risku. Tas arī nodrošina, ka turpmākos izvēlnes vienumus var viegli pievienot bez papildu koda izmaiņām, uzlabojot mērogojamību.

Vēl viena svarīga optimizētajos skriptos izmantotā metode ir pasākuma delegācija. Tā vietā, lai katram atsevišķam izvēlnes vienumam pievienotu notikumu uztvērēju, mēs pievienojām klausītāju vecākajam konteineram nav saraksts. Tādā veidā jebkuru klikšķu notikumu uz pakārtota elementa (piemēram, izvēlnes vienuma) nosaka un atbilstoši apstrādā vecāks. Šī pieeja ir efektīvāka, jo samazina veidojamo notikumu uztvērēju skaitu, uzlabojot lapas veiktspēju, īpaši, ja tiek izmantots liels skaits elementu.

Mēs arī ieviesām kļūdu apstrādi, izmantojot pamēģini... noķer bloki. Tas nodrošina, ka visas iespējamās problēmas, piemēram, trūkstošie elementi DOM, tiek uztvertas un reģistrētas, nepārkāpjot izvēlnes funkcionalitāti. Šī pieeja uzlabo robustums skriptu un palīdz atkļūdot, ja kaut kas noiet greizi. Kopumā skripta uzlabojumi rada modulārāku, atkārtoti lietojamu un efektīvāku risinājumu, samazinot koda atkārtošanos un palielinot apkopi.

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

JavaScript uzlabošana izvēlnes mijiedarbībai: ārpus pamata ieviešanas

Veidojot adaptīvu galveno lapu, viens no galvenajiem aspektiem ir nodrošināt lietotājiem netraucētu navigācijas pieredzi. Viena no metodēm, kā uzlabot šo pieredzi, ir koda atkārtošanās samazināšana. Tā vietā, lai manuāli pievienotu notikumu klausītājus katram izvēlnes vienumam, izstrādātāji var izpētīt uzlabotas metodes, piemēram, pasākuma delegācija. Tas ļauj vienam notikuma klausītājam vecākelementā apstrādāt vairākus pakārtotos elementus, racionalizējot procesu. Turklāt modulāro funkciju izmantošana nodrošina, ka jūsu kodu ir vieglāk uzturēt un turpmāk paplašināt.

Vēl viens aspekts, kuru vērts apsvērt, ir veiktspējas optimizācija. Liela mēroga tīmekļa lietojumprogrammas bieži nodarbojas ar vairākiem notikumiem, un DOM pārslodze ar daudziem notikumu klausītājiem var izraisīt aizkavēšanos vai palēnināt vietnes darbību. Izmantojot tādas efektīvas metodes kā querySelectorAll lai uzreiz satvertu visus saistītos elementus un pēc tam izmantotu forEach atkārtojot, jūs uzlabojat gan sava skripta veiktspēju, gan mērogojamību. Šīs optimizācijas kļūst īpaši svarīgas, strādājot ar mobilajām ierīcēm piemērotu dizainu, kur galvenais ir ātrums un efektivitāte.

Lai spertu soli tālāk, ieviešot kļūdu apstrādi ar try...catch uzlabo robustumu. Tas ir ļoti svarīgi, lai novērstu neparedzētas kļūdas un nodrošinātu, ka lietotāja mijiedarbība tiek apstrādāta graciozi. Ja trūkst izvēlnes vienuma vai ja DOM mainās dinamiski, šie kļūdu apstrādes mehānismi uztver un reģistrē problēmas, nepārkāpjot funkcionalitāti. Šīs paraugprakses ieviešana var ievērojami uzlabot gan lietotāja pieredzi, gan vietnes apkopi.