Βελτιστοποίηση JavaScript για ένα καθαρό και αποτελεσματικό σύστημα μενού

Βελτιστοποίηση της αλληλεπίδρασης με το μενού της σελίδας προορισμού

Η δημιουργία μιας σελίδας προορισμού μπορεί να περιλαμβάνει πολλές λεπτομέρειες και μία από τις πιο σημαντικές πτυχές είναι η παροχή μιας ομαλής εμπειρίας χρήστη. Εάν εργάζεστε με ένα μενού που αποκρίνεται, το να το κλείσετε αυτόματα όταν επιλέγεται μια επιλογή είναι ζωτικής σημασίας για καλύτερη χρηστικότητα.

Μπορεί να έχετε ήδη γράψει κάποια JavaScript για να χειριστείτε την ενέργεια κλεισίματος όταν ένας χρήστης κάνει κλικ σε ένα στοιχείο μενού. Αν και αυτό λειτουργεί, υπάρχει συχνά ανάγκη να γίνει ο κώδικας καθαρότερος και πιο αποτελεσματικός. Ο επαναλαμβανόμενος κώδικας μπορεί να είναι περίπλοκος στη διατήρηση και επιρρεπής σε σφάλματα.

Σε αυτό το άρθρο, θα εξετάσουμε ένα σενάριο όπου έχετε πολλά στοιχεία μενού που κλείνουν το μενού μετά από κλικ. Ο τρέχων κώδικας λειτουργεί αλλά περιλαμβάνει επαναλαμβανόμενα μοτίβα. Αυτή η επανάληψη μπορεί να απλοποιηθεί με μια πιο κομψή λύση JavaScript.

Ας εξερευνήσουμε πώς μπορείτε να κάνετε αυτόν τον κώδικα πιο καθαρό χρησιμοποιώντας καλύτερες πρακτικές, όπως η επαναφορά παρόμοιων στοιχείων ή η αξιοποίηση της εκχώρησης συμβάντων. Αυτή η προσέγγιση θα βελτιώσει τόσο την αναγνωσιμότητα όσο και την απόδοση.

Εντολή	Παράδειγμα χρήσης
querySelectorAll()	Αυτή η εντολή χρησιμοποιείται για την επιλογή όλων των στοιχείων που ταιριάζουν με έναν καθορισμένο επιλογέα. Σε αυτήν την περίπτωση, ανακτά όλες τις ετικέτες αγκύρωσης () μέσα στη λίστα .nav, επιτρέποντάς μας να πραγματοποιούμε αναζήτηση και να προσθέτουμε προγράμματα ακρόασης συμβάντων σε κάθε στοιχείο ξεχωριστά.
forEach()	Χρησιμοποιείται για επανάληψη σε NodeLists ή πίνακες. Σε αυτό το σενάριο, η forEach() μας επιτρέπει να κάνουμε κύκλο σε κάθε επιλεγμένο στοιχείο μενού και να επισυνάψουμε ένα συμβάν κλικ για να κλείσουμε το μενού.
addEventListener()	Αυτή η εντολή χρησιμοποιείται για την προσάρτηση ενός προγράμματος χειρισμού συμβάντων σε ένα στοιχείο. Εδώ, επισυνάπτει ένα συμβάν «κλικ» στα στοιχεία μενού, έτσι ώστε όταν γίνει κλικ, το μενού κλείνει αφαιρώντας την κλάση του μενού εμφάνισης.
remove()	Αυτή η μέθοδος χρησιμοποιείται για την αφαίρεση μιας συγκεκριμένης κλάσης από ένα στοιχείο. Σε αυτήν την περίπτωση, το remove('show-menu') καλείται να κρύψει το μενού πλοήγησης αφαιρώντας την κλάση show-menu από το στοιχείο .nav-list.
try...catch	Χρησιμοποιείται για τον χειρισμό εξαιρέσεων και σφαλμάτων στον κώδικα. Αυτό διασφαλίζει ότι εάν τα στοιχεία του μενού δεν βρεθούν ή εάν προκύψει κάποιο πρόβλημα κατά την εκτέλεση του σεναρίου, το σφάλμα καταγράφεται και καταγράφεται για να αποφευχθεί η παραβίαση της λειτουργικότητας.
console.error()	Αυτή η εντολή καταγράφει μηνύματα σφάλματος στην κονσόλα του προγράμματος περιήγησης. Χρησιμοποιείται μέσα στο μπλοκ catch για την εμφάνιση τυχόν σφαλμάτων που προκύπτουν κατά την εκτέλεση της συνάρτησης closeMenu().
tagName	Αυτή η ιδιότητα χρησιμοποιείται για τον έλεγχο του ονόματος της ετικέτας ενός στοιχείου στο DOM. Στο σενάριο, χρησιμοποιείται στην ανάθεση συμβάντων για να διασφαλιστεί ότι μόνο οι ετικέτες αγκύρωσης () ενεργοποιούν το κλείσιμο του μενού όταν γίνεται κλικ.
contains()	Μέρος του classList API, περιέχει() ελέγχει εάν μια κλάση υπάρχει στη λίστα κλάσεων ενός στοιχείου. Στο παράδειγμα δοκιμής μονάδας, επαληθεύει εάν η κλάση του μενού εμφάνισης έχει αφαιρεθεί μετά από κλικ σε ένα στοιχείο μενού.
click()	Αυτή η εντολή προσομοιώνει ένα κλικ χρήστη σε ένα στοιχείο. Χρησιμοποιείται στη δοκιμή μονάδας για την ενεργοποίηση ενός συμβάντος κλικ μέσω προγραμματισμού σε ένα στοιχείο μενού και για την επικύρωση ότι το μενού κλείνει όπως αναμένεται.

Βελτίωση της λειτουργικότητας του μενού με JavaScript

Ο πρωταρχικός στόχος των σεναρίων που έχουμε εξερευνήσει είναι να απλοποιήσουμε και να βελτιώσουμε τη συμπεριφορά ενός μενού πλοήγησης σε μια σελίδα προορισμού. Αρχικά, η λύση περιλάμβανε την επανάληψη κώδικα για κάθε στοιχείο μενού, αλλά αυτό οδήγησε σε περιττή επανάληψη και αναποτελεσματικό κώδικα. Οι καθαρότερες, πιο αποτελεσματικές λύσεις χρησιμοποιούν την ικανότητα της 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);
});

Βελτίωση JavaScript για αλληλεπίδραση μενού: Πέρα από τη βασική υλοποίηση

Όταν δημιουργείτε μια αποκριτική σελίδα προορισμού, μια βασική πτυχή είναι η διασφάλιση μιας απρόσκοπτης εμπειρίας πλοήγησης για τους χρήστες. Μια μέθοδος για τη βελτίωση αυτής της εμπειρίας είναι η μείωση της επανάληψης κώδικα. Αντί να επισυνάπτουν μη αυτόματα προγράμματα ακρόασης συμβάντων σε κάθε στοιχείο μενού, οι προγραμματιστές μπορούν να εξερευνήσουν προηγμένες τεχνικές όπως π.χ . Αυτό επιτρέπει σε ένα πρόγραμμα ακρόασης συμβάντων σε ένα γονικό στοιχείο να χειρίζεται πολλά θυγατρικά στοιχεία, απλοποιώντας τη διαδικασία. Επιπλέον, η αξιοποίηση των αρθρωτών λειτουργιών διασφαλίζει ότι ο κώδικάς σας είναι ευκολότερος να διατηρηθεί και να επεκταθεί στο μέλλον.

Μια άλλη πτυχή που αξίζει να εξεταστεί είναι . Οι εφαρμογές web μεγάλης κλίμακας αντιμετωπίζουν συχνά πολλά συμβάντα και η υπερφόρτωση του DOM με πολυάριθμα προγράμματα ακρόασης συμβάντων μπορεί να προκαλέσει καθυστερήσεις ή να επιβραδύνει τον ιστότοπο. Χρησιμοποιώντας αποτελεσματικές τεχνικές όπως για να αρπάξετε όλα τα σχετικά στοιχεία ταυτόχρονα και στη συνέχεια να χρησιμοποιήσετε Για να επαναλάβετε, βελτιώνετε τόσο την απόδοση όσο και την επεκτασιμότητα του σεναρίου σας. Αυτές οι βελτιστοποιήσεις γίνονται ιδιαίτερα σημαντικές όταν αντιμετωπίζουμε σχέδια που ανταποκρίνονται πρώτα στα κινητά, όπου η ταχύτητα και η αποτελεσματικότητα είναι πρωταρχικής σημασίας.

Για να προχωρήσουμε ένα βήμα παραπέρα, εισάγοντας τον χειρισμό σφαλμάτων με βελτιώνει την ευρωστία. Αυτό είναι ζωτικής σημασίας για την αποφυγή απροσδόκητων αστοχιών και για τη διασφάλιση ότι οι αλληλεπιδράσεις των χρηστών αντιμετωπίζονται με χάρη. Εάν λείπει ένα στοιχείο μενού ή εάν το DOM αλλάξει δυναμικά, αυτοί οι μηχανισμοί διαχείρισης σφαλμάτων εντοπίζουν και καταγράφουν προβλήματα χωρίς διακοπή της λειτουργικότητας. Η εφαρμογή αυτών των βέλτιστων πρακτικών μπορεί να βελτιώσει δραστικά τόσο την εμπειρία χρήστη όσο και τη δυνατότητα συντήρησης του ιστότοπου.

1. Πώς λειτουργεί η ανάθεση συμβάντων σε JavaScript;
2. Η ανάθεση συμβάντος σάς επιτρέπει να προσθέσετε ένα single σε ένα γονικό στοιχείο που μπορεί να χειριστεί συμβάντα από τα θυγατρικά του στοιχεία. Αυτό αποφεύγει την ανάγκη προσθήκης ακροατών σε κάθε παιδί ξεχωριστά.
3. Ποιο είναι το όφελος από τη χρήση ?
4. σας επιτρέπει να επιλέξετε όλα τα στοιχεία που ταιριάζουν με έναν επιλογέα CSS με μία κίνηση, καθιστώντας τον πιο αποτελεσματικό όταν ασχολείστε με ομάδες στοιχείων όπως στοιχεία μενού.
5. Γιατί να χρησιμοποιήσω ένα βρόχο σαν με στοιχεία μενού;
6. σας επιτρέπει να επαναλαμβάνετε κάθε στοιχείο μενού και να εφαρμόζετε την ίδια ενέργεια, όπως την προσθήκη ακρόασης συμβάντων, χωρίς να επαναλαμβάνετε τον κώδικα για κάθε στοιχείο με μη αυτόματο τρόπο.
7. Τι κάνει κάνω στο πλαίσιο του μενού;
8. αφαιρεί μια συγκεκριμένη κλάση (όπως το μενού εμφάνισης) από ένα στοιχείο, το οποίο σε αυτήν την περίπτωση κλείνει το μενού πλοήγησης όταν γίνεται κλικ σε ένα στοιχείο.
9. Πώς μπορεί ο χειρισμός σφαλμάτων να βελτιώσει τον κώδικα JavaScript μου;
10. Χρησιμοποιώντας σας επιτρέπει να διαχειριστείτε πιθανά σφάλματα στον κώδικά σας. Με αυτόν τον τρόπο, εάν ένα στοιχείο λείπει ή κάτι αποτύχει, το σφάλμα συλλαμβάνεται και καταγράφεται χωρίς να σπάσει ολόκληρο το σενάριο.

Η βελτιστοποίηση JavaScript με την κατάργηση επαναλαμβανόμενου κώδικα βελτιώνει τη συντηρησιμότητα και την απόδοση. Τεχνικές όπως η ανάθεση συμβάντων, ο αποτελεσματικός χειρισμός του DOM και ο ισχυρός χειρισμός σφαλμάτων διευκολύνουν τη διαχείριση και την προσαρμογή του κώδικα για μελλοντικές ανάγκες.

Εφαρμόζοντας αυτές τις βελτιώσεις, διασφαλίζετε ότι το μενού της σελίδας προορισμού σας λειτουργεί ομαλά σε όλες τις συσκευές. Ο αρθρωτός κώδικας είναι πιο επεκτάσιμος και προσαρμόσιμος, δημιουργώντας μια καλύτερη εμπειρία χρήστη και μειώνοντας την πιθανότητα σφαλμάτων και σφαλμάτων σε μελλοντικές ενημερώσεις.