Temiz ve Verimli Bir Menü Sistemi için JavaScript'i Optimize Etme

Açılış Sayfası Menü Etkileşiminizi Kolaylaştırma

Bir açılış sayfası oluşturmak birçok ayrıntıyı içerebilir ve en önemli yönlerden biri sorunsuz bir kullanıcı deneyimi sağlamaktır. Duyarlı bir menüyle çalışıyorsanız, bir seçenek belirlendiğinde otomatik olarak kapanması daha iyi kullanılabilirlik açısından çok önemlidir.

Kullanıcı bir menü öğesini tıkladığında kapatma işlemini gerçekleştirecek bazı JavaScript'leri zaten yazmış olabilirsiniz. Bu işe yarasa da genellikle kodu daha temiz ve daha verimli hale getirmeye ihtiyaç vardır. Tekrarlanan kodun bakımı zahmetli olabilir ve hatalara açık olabilir.

Bu makalede, tıklandığında menüyü kapatan birden fazla menü öğesinin bulunduğu bir senaryoya bakacağız. Mevcut kod çalışıyor ancak yinelenen kalıplar içeriyor. Bu tekrarlama daha zarif bir JavaScript çözümüyle basitleştirilebilir.

Benzer öğeler arasında geçiş yapmak veya etkinlik delegasyonundan yararlanmak gibi daha iyi uygulamalar kullanarak bu kodu nasıl daha temiz hale getirebileceğinizi keşfedelim. Bu yaklaşım hem okunabilirliği hem de performansı artıracaktır.

Emretmek	Kullanım Örneği
querySelectorAll()	Bu komut, belirtilen seçiciyle eşleşen tüm öğeleri seçmek için kullanılır. Bu durumda, .nav-listesi içindeki tüm bağlantı () etiketlerini alır ve bu da döngü oluşturmamıza ve her bir öğeye ayrı ayrı olay dinleyicileri eklememize olanak tanır.
forEach()	NodeLists veya diziler üzerinde yineleme yapmak için kullanılır. Bu komut dosyasında forEach(), seçilen her menü öğesi arasında döngü yapmamıza ve menüyü kapatmak için bir click olayı eklememize olanak tanır.
addEventListener()	Bu komut bir öğeye olay işleyicisi eklemek için kullanılır. Burada menü öğelerine bir 'click' olayı ekler, böylece tıklandığında menü show-menü sınıfını kaldırarak kapanır.
remove()	Bu yöntem, bir öğeden belirli bir sınıfı kaldırmak için kullanılır. Bu durumda, show-menu sınıfını .nav-list öğesinden kaldırarak gezinme menüsünü gizlemek için kaldır('show-menu') çağrılır.
try...catch	Koddaki istisnaları ve hataları işlemek için kullanılır. Bu, menü öğelerinin bulunamaması veya komut dosyası yürütme sırasında herhangi bir sorun ortaya çıkması durumunda, işlevselliğin bozulmasını önlemek için hatanın yakalanmasını ve günlüğe kaydedilmesini sağlar.
console.error()	Bu komut, hata mesajlarını tarayıcının konsoluna kaydeder. CloseMenu() işlevinin yürütülmesi sırasında meydana gelen hataları görüntülemek için catch bloğunun içinde kullanılır.
tagName	Bu özellik DOM'daki bir öğenin etiket adını kontrol etmek için kullanılır. Komut dosyasında, yalnızca bağlantı etiketlerinin () tıklandığında menünün kapatılmasını tetiklediğinden emin olmak için olay delegasyonu içinde kullanılır.
contains()	classList API'sinin bir parçası olan include(), bir öğenin sınıf listesinde bir sınıfın mevcut olup olmadığını kontrol eder. Birim testi örneğinde, bir menü öğesi tıklatıldıktan sonra gösteri menüsü sınıfının kaldırılıp kaldırılmadığını doğrular.
click()	Bu komut, bir kullanıcının bir öğeye tıklamasını simüle eder. Birim testinde, bir menü öğesinde programlı olarak bir tıklama olayını tetiklemek ve menünün beklendiği gibi kapandığını doğrulamak için kullanılır.

JavaScript ile Menü İşlevselliğini Geliştirme

İncelediğimiz komut dosyalarının birincil amacı, bir açılış sayfasındaki gezinme menüsünün davranışını basitleştirmek ve geliştirmektir. Başlangıçta çözüm, her menü öğesi için kodun tekrarlanmasını içeriyordu ancak bu, gereksiz tekrarlara ve verimsiz kodlara yol açtı. Daha temiz, daha verimli çözümler, JavaScript'in benzer öğeler arasında geçiş yapma veya menü etkileşimlerini daha akıllı bir şekilde yönetmek için olay delegasyonunu uygulama yeteneğini kullanır. kullanarak yöntemiyle ilgili tüm menü öğelerini seçebilir ve fazlalığı azaltabiliriz.

Uyguladığımız ilk optimizasyonlardan biri şunu kullanmaktı: tüm menü öğelerini yinelemek ve her birine bir tıklama olayı dinleyicisi eklemek için. Bu, herhangi bir öğeye tıklandığında menünün kapanmasına olanak tanır. Döngü, tekrarlanan olay işleyicilerini tek bir yeniden kullanılabilir döngüyle değiştirerek önceki yaklaşımı basitleştirir. Bu, kodun bakımını kolaylaştırır ve hata riskini azaltır. Ayrıca gelecekteki menü öğelerinin ek kod değişiklikleri olmadan kolayca eklenebilmesini sağlayarak ölçeklenebilirliği artırır.

Optimize edilmiş komut dosyalarında kullanılan bir diğer önemli yöntem ise . Her bir menü öğesine bir olay dinleyicisi eklemek yerine, dinleyiciyi ana kapsayıcıya ekledik; . Bu şekilde, bir alt öğedeki (bir menü öğesi gibi) herhangi bir tıklama olayı, üst öğe tarafından uygun şekilde algılanır ve işlenir. Bu yaklaşım daha etkilidir çünkü oluşturulması gereken olay dinleyicilerinin sayısını en aza indirir ve özellikle çok sayıda öğeyle uğraşırken sayfanın performansını artırır.

Ayrıca şunu kullanarak hata işlemeyi de uyguladık: bloklar. Bu, DOM'daki eksik öğeler gibi olası sorunların, menünün işlevselliğini bozmadan yakalanıp günlüğe kaydedilmesini sağlar. Bu yaklaşım iyileştirir betiğin çalışmasını sağlar ve işler ters giderse hata ayıklamaya yardımcı olur. Genel olarak, komut dosyasında yapılan iyileştirmeler daha modüler, yeniden kullanılabilir ve verimli bir çözüm ortaya çıkararak kod tekrarını azaltır ve sürdürülebilirliği artırı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);
});

Menü Etkileşimi için JavaScript'i İyileştirme: Temel Uygulamanın Ötesinde

Duyarlı bir açılış sayfası oluştururken önemli noktalardan biri, kullanıcılar için kusursuz bir gezinme deneyimi sağlamaktır. Bu deneyimi iyileştirmenin bir yöntemi kod tekrarını azaltmaktır. Geliştiriciler, her menü öğesine olay dinleyicilerini manuel olarak eklemek yerine, aşağıdaki gibi gelişmiş teknikleri keşfedebilirler: . Bu, bir ana öğedeki tek bir olay dinleyicisinin birden çok alt öğeyi yönetmesine olanak tanıyarak süreci kolaylaştırır. Ek olarak modüler işlevlerden yararlanmak, kodunuzun gelecekte bakımının ve genişletilmesinin daha kolay olmasını sağlar.

Göz önünde bulundurmaya değer bir diğer husus ise . Büyük ölçekli web uygulamaları genellikle birden fazla olayla ilgilenir ve DOM'un çok sayıda olay dinleyicisiyle aşırı yüklenmesi, gecikmelere veya sitenin yavaşlamasına neden olabilir. gibi etkili teknikleri kullanarak ilgili tüm öğeleri bir kerede yakalamak ve ardından kullanmak yinelemek için komut dosyanızın hem performansını hem de ölçeklenebilirliğini artırırsınız. Bu optimizasyonlar, hız ve verimliliğin çok önemli olduğu mobil öncelikli duyarlı tasarımlarla uğraşırken özellikle önemli hale geliyor.

Bir adım daha ileri gitmek için hata işlemeyi tanıtıyoruz: sağlamlığı artırır. Bu, beklenmeyen arızaların önlenmesi ve kullanıcı etkileşimlerinin düzgün bir şekilde yönetilmesini sağlamak açısından çok önemlidir. Bir menü öğesi eksikse veya DOM dinamik olarak değişirse, bu hata işleme mekanizmaları, işlevselliği bozmadan sorunları yakalar ve günlüğe kaydeder. Bu en iyi uygulamaları uygulamak, hem kullanıcı deneyimini hem de sitenin sürdürülebilirliğini büyük ölçüde geliştirebilir.

1. Etkinlik delegasyonu JavaScript'te nasıl çalışır?
2. Etkinlik delegasyonu tek bir etkinlik eklemenizi sağlar alt öğelerindeki olayları işleyebilecek bir ana öğeye. Bu, her çocuğa ayrı ayrı dinleyici ekleme ihtiyacını ortadan kaldırır.
3. Kullanmanın faydası nedir ?
4. Bir CSS seçiciyle eşleşen tüm öğeleri tek seferde seçmenize olanak tanır, bu da menü öğeleri gibi öğe gruplarıyla uğraşırken daha verimli olmasını sağlar.
5. Neden şöyle bir döngü kullanmalıyım? menü öğeleriyle mi?
6. her menü öğesi üzerinde yineleme yapmanızı ve her öğe için kodu manuel olarak tekrarlamadan olay dinleyicileri eklemek gibi aynı eylemi uygulamanızı sağlar.
7. ne işe yarar menü bağlamında ne yapmalısınız?
8. bir öğeden belirli bir sınıfı (gösteri menüsü gibi) kaldırır; bu durumda, bir öğe tıklandığında gezinme menüsünü kapatır.
9. Hata işleme JavaScript kodumu nasıl geliştirebilir?
10. Kullanma kodunuzdaki olası hataları yönetmenize olanak tanır. Bu şekilde, bir öğe eksikse veya bir şey başarısız olursa, hata tüm betiği bozmadan yakalanır ve günlüğe kaydedilir.

Tekrarlanan kodları kaldırarak JavaScript'i optimize etmek, sürdürülebilirliği ve performansı artırır. Olay delegasyonu, verimli DOM manipülasyonu ve güçlü hata işleme gibi teknikler, kodun yönetilmesini ve gelecekteki ihtiyaçlara uyarlanmasını kolaylaştırır.

Bu iyileştirmeleri uygulayarak açılış sayfanızın menüsünün cihazlar arasında sorunsuz bir şekilde çalışmasını sağlarsınız. Modüler kod daha ölçeklenebilir ve uyarlanabilir olduğundan daha iyi bir kullanıcı deneyimi yaratır ve gelecekteki güncellemelerdeki hata ve hata potansiyelini azaltır.