„JavaScript“ optimizavimas siekiant švarios ir efektyvios meniu sistemos

Supaprastinkite nukreipimo puslapio meniu sąveiką

Nukreipimo puslapio kūrimas gali apimti daug detalių, o vienas iš svarbiausių aspektų yra sklandi vartotojo patirtis. Jei dirbate su interaktyviu meniu, jis automatiškai užsidaro, kai pasirenkama parinktis, siekiant geresnio naudojimo.

Galbūt jau parašėte „JavaScript“, kad atliktumėte uždarymo veiksmą, kai vartotojas spustelėja meniu elementą. Nors tai veikia, dažnai reikia padaryti kodą švaresnį ir efektyvesnį. Pakartotinio kodo priežiūra gali būti sudėtinga ir gali būti klaidų.

Šiame straipsnyje apžvelgsime scenarijų, kai turite kelis meniu elementus, kurie uždaro meniu spustelėjus. Dabartinis kodas veikia, bet apima pasikartojančius modelius. Šį pakartojimą galima supaprastinti naudojant elegantiškesnį „JavaScript“ sprendimą.

Panagrinėkime, kaip galite padaryti šį kodą švaresnį, naudodami geresnę praktiką, pvz., pereidami per panašius elementus arba pasinaudodami įvykių delegavimu. Šis metodas pagerins skaitomumą ir našumą.

komandą	Naudojimo pavyzdys
querySelectorAll()	Ši komanda naudojama norint pasirinkti visus elementus, atitinkančius nurodytą parinkiklį. Tokiu atveju jis nuskaito visas prieraišumo () žymas .nav sąraše, todėl galime peržiūrėti ir pridėti įvykių klausytojus prie kiekvieno elemento atskirai.
forEach()	Naudojamas kartoti per NodeLists arba masyvus. Šiame scenarijuje forEach() leidžia peržiūrėti kiekvieną pasirinktą meniu elementą ir pridėti spustelėjimo įvykį, kad uždarytume meniu.
addEventListener()	Ši komanda naudojama įvykių tvarkyklei prijungti prie elemento. Čia jis prideda „spustelėjimo“ įvykį prie meniu elementų, kad juos spustelėjus meniu uždaromas pašalinus rodymo meniu klasę.
remove()	Šis metodas naudojamas tam tikrai klasei pašalinti iš elemento. Tokiu atveju iškviečiamas remove('show-menu'), kad paslėptų naršymo meniu, pašalinant rodymo meniu klasę iš .nav-list elemento.
try...catch	Naudojamas išimtims ir kodo klaidoms tvarkyti. Tai užtikrina, kad jei meniu elementai nerandami arba scenarijaus vykdymo metu iškyla kokių nors problemų, klaida bus užfiksuota ir registruojama, kad būtų išvengta funkcijų pažeidimo.
console.error()	Ši komanda užregistruoja klaidų pranešimus naršyklės konsolėje. Jis naudojamas gaudymo bloke, kad būtų rodomos visos klaidos, atsirandančios vykdant funkciją closeMenu().
tagName	Ši savybė naudojama norint patikrinti elemento žymos pavadinimą DOM. Scenarijuje jis naudojamas deleguojant įvykį, siekiant užtikrinti, kad spustelėjus meniu būtų uždarytas tik prieraišo žymos ().
contains()	ClassList API dalis, apima() patikrina, ar elemento klasių sąraše yra klasė. Vieneto testo pavyzdyje jis patikrina, ar spustelėjus meniu elementą buvo pašalinta rodyti meniu klasė.
click()	Ši komanda imituoja vartotojo paspaudimą ant elemento. Jis naudojamas vieneto teste, norint programiškai suaktyvinti meniu elemento paspaudimo įvykį ir patvirtinti, kad meniu užsidaro taip, kaip tikėtasi.

Meniu funkcionalumo tobulinimas naudojant „JavaScript“.

Pagrindinis mūsų tyrinėtų scenarijų tikslas – supaprastinti ir pagerinti nukreipimo puslapio naršymo meniu veikimą. Iš pradžių sprendimas buvo susijęs su kiekvieno meniu elemento kodo kartojimu, tačiau tai lėmė nereikalingą pasikartojimą ir neveiksmingą kodą. Aiškesni ir efektyvesni sprendimai naudoja „JavaScript“ galimybę pereiti per panašius elementus arba taikyti įvykių delegavimą, kad išmaniau tvarkytų meniu sąveikas. Naudodami metodu, galime pasirinkti visus atitinkamus meniu elementus ir sumažinti pertekliškumą.

Vienas iš pirmųjų mūsų pritaikytų optimizacijų buvo naudojimas kad galėtumėte kartoti visus meniu elementus ir prie kiekvieno pridėti spustelėjimo įvykių klausytoją. Tai leidžia uždaryti meniu spustelėjus bet kurį elementą. Ciklas supaprastina ankstesnį metodą, pakeisdamas pasikartojančių įvykių tvarkykles viena pakartotinai naudojama kilpa. Tai palengvina kodo priežiūrą ir sumažina klaidų riziką. Tai taip pat užtikrina, kad būsimus meniu elementus būtų galima lengvai pridėti be papildomų kodo pakeitimų, pagerinant mastelio keitimą.

Kitas svarbus optimizuotuose scenarijuose naudojamas metodas yra . Užuot pridėję įvykių klausytoją prie kiekvieno atskiro meniu elemento, prijungėme klausytoją prie pirminio konteinerio . Tokiu būdu bet koks antrinio elemento (pvz., meniu elemento) paspaudimo įvykis yra aptinkamas ir tinkamai tvarkomas pirminio. Šis metodas yra efektyvesnis, nes sumažina įvykių klausytojų, kuriuos reikia sukurti, skaičių ir pagerina puslapio našumą, ypač kai kalbama apie daug elementų.

Taip pat įdiegėme klaidų tvarkymą naudodami blokai. Taip užtikrinama, kad visos galimos problemos, pvz., trūkstami DOM elementai, būtų užfiksuotos ir registruojamos nepažeidžiant meniu funkcijų. Šis požiūris pagerina scenarijaus ir padeda derinti, jei kas nepavyksta. Apskritai, scenarijaus patobulinimai sukuria moduliškesnį, daugkartinio naudojimo ir efektyvesnį sprendimą, sumažinantį kodo pasikartojimą ir padidinantį priežiūrą.

// 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“ tobulinimas meniu sąveikai: ne tik paprastas įgyvendinimas

Kuriant interaktyvų nukreipimo puslapį, vienas iš pagrindinių aspektų yra užtikrinti sklandžią naršymo patirtį vartotojams. Vienas iš būdų pagerinti šią patirtį yra kodo pasikartojimo mažinimas. Užuot rankiniu būdu prijungę įvykių klausytojus prie kiekvieno meniu elemento, kūrėjai gali ištirti pažangias technologijas, pvz . Tai leidžia vienam pirminio elemento įvykių klausytojui tvarkyti kelis antrinius elementus ir supaprastinti procesą. Be to, naudojant modulines funkcijas, jūsų kodą bus lengviau prižiūrėti ir išplėsti ateityje.

Kitas aspektas, kurį verta apsvarstyti . Didelės apimties žiniatinklio programos dažnai susiduria su keliais įvykiais, o DOM perkrovimas daugeliu įvykių klausytojų gali sukelti vėlavimų arba sulėtinti svetainę. Naudojant efektyvius metodus, pvz Norėdami patraukti visus susijusius elementus vienu metu, tada naudodami Norėdami kartoti, pagerinate savo scenarijaus našumą ir mastelį. Šie optimizavimai tampa ypač svarbūs, kai kalbama apie mobiliesiems pritaikytus dizainus, kur svarbiausia yra greitis ir efektyvumas.

Norėdami žengti žingsnį toliau, pristatysime klaidų apdorojimą su pagerina tvirtumą. Tai labai svarbu norint išvengti netikėtų gedimų ir užtikrinti, kad vartotojo sąveika būtų tvarkoma grakščiai. Jei trūksta meniu elemento arba DOM keičiasi dinamiškai, šie klaidų apdorojimo mechanizmai užfiksuoja ir registruoja problemas nepažeisdami funkcijų. Šios geriausios praktikos įgyvendinimas gali drastiškai pagerinti naudotojų patirtį ir svetainės priežiūrą.

1. Kaip „JavaScript“ veikia įvykių delegavimas?
2. Įvykio delegavimas leidžia pridėti vieną į pirminį elementą, kuris gali tvarkyti įvykius iš antrinių elementų. Taip išvengiama klausytojų pridėti prie kiekvieno vaiko atskirai.
3. Kokia nauda naudojant ?
4. leidžia vienu ypu pasirinkti visus elementus, atitinkančius CSS parinkiklį, todėl jis yra efektyvesnis dirbant su elementų grupėmis, pvz., meniu elementais.
5. Kodėl turėčiau naudoti kilpą kaip su meniu punktais?
6. leidžia kartoti kiekvieną meniu elementą ir taikyti tą patį veiksmą, pvz., pridėti įvykių klausytojų, nekartojant kiekvieno elemento kodo rankiniu būdu.
7. Ką daro daryti meniu kontekste?
8. pašalina konkrečią klasę (pvz., Rodyti meniu) iš elemento, kuris šiuo atveju uždaro naršymo meniu spustelėjus elementą.
9. Kaip klaidų tvarkymas gali pagerinti mano JavaScript kodą?
10. Naudojant leidžia valdyti galimas kodo klaidas. Tokiu būdu, jei trūksta elemento arba kažkas nepavyksta, klaida užfiksuojama ir registruojama nepažeidžiant viso scenarijaus.

„JavaScript“ optimizavimas pašalinant pasikartojantį kodą pagerina priežiūrą ir našumą. Tokios technologijos kaip įvykių delegavimas, efektyvus DOM manipuliavimas ir patikimas klaidų tvarkymas palengvina kodo valdymą ir pritaikymą būsimiems poreikiams.

Įdiegę šiuos patobulinimus užtikrinate, kad nukreipimo puslapio meniu sklandžiai veiktų visuose įrenginiuose. Modulinis kodas yra labiau keičiamas ir pritaikomas, sukuriant geresnę vartotojo patirtį ir sumažinant klaidų ir klaidų galimybę būsimuose atnaujinimuose.