Πλεονεκτήματα και μειονεκτήματα των αλυσίδων στην JavaScript

Παρόλο που οι αλυσίδες μειώνουν τον κώδικα, στις περισσότερες περιπτώσεις η εισαγωγή μιας μεταβλητής είναι πιο βολική. Συγκρίνετε τα δύο παραδείγματα - τώρα εισήγαγα τη μεταβλητή elem και μπορώ να ορίσω οποιοδήποτε αριθμό από χαρακτηριστικά, ενώ το querySelector καλείται μόνο μία φορά:

javascriptlet elem = document.querySelector('#elem');
elem.value = 'www';
elem.type  = 'submit';

Τώρα δεν εισάγω νέα μεταβλητή και γι' αυτό αναγκάζομαι να καλέσω το querySelector δύο φορές:

javascriptdocument.querySelector('#elem').value = 'www';
document.querySelector('#elem').type  = 'submit';

Κατά τη γνώμη μου, αυτός ο κώδικας έγινε πιο περίπλοκος, αν και καταλαμβάνει μία γραμμή λιγότερο. Εκτός από αυτό, αν θέλω να αλλάξω την τιμή του id από το 'elem' σε κάποια άλλη, θα πρέπει να το κάνω σε πολλά σημεία, κάτι που δεν είναι πολύ βολικό.

Υπάρχει και ένα άλλο πρόβλημα - το φόρτωμα του browser. Η αναζήτηση στοιχείων στη σελίδα, που κάνει η μέθοδος querySelector, είναι μια αρκετά αργή πράξη (και γενικά οποιαδήποτε εργασία με στοιχεία της σελίδας είναι μια αργή πράξη - θυμηθείτε το).

Στην περίπτωσή μας, αν χρησιμοποιούμε κάθε φορά το querySelector, τότε το browser κάθε φορά θα επεξεργάζεται την HTML σελίδα και θα ψάχνει το στοιχείο με το δεδομένο id πολλές φορές (δεν έχει σημασία ότι το id είναι το ίδιο - το browser θα εκτελέσει όλες τις ενέργειες πολλές φορές), κάνοντας άχρηστες πράξεις που μπορούν να επιβραδύνουν τη λειτουργία του browser.

Αν όμως χρησιμοποιήσουμε τη μεταβλητή elem - δεν γίνεται καμία αναζήτηση στη σελίδα (το στοιχείο έχει ήδη βρεθεί και η αναφορά σε αυτό βρίσκεται στη μεταβλητή).

html<img id="image" src="avatar.png" width="300" height="500">

javascriptconsole.log(document.querySelector('#image').src);
console.log(document.querySelector('#image').width);
console.log(document.querySelector('#image').height);