Vor- und Nachteile von Method-Chaining in JavaScript
Obwohl Method-Chaining den Code verkürzt,
ist in den meisten Fällen die Einführung einer Variable
trotzdem bequemer. Vergleichen Sie die beiden Beispiele -
hier habe ich eine Variable elem eingeführt und kann
beliebig viele Attribute setzen, wobei
querySelector nur einmal aufgerufen wird:
let elem = document.querySelector('#elem');
elem.value = 'www';
elem.type = 'submit';
Hier hingegen führe ich keine neue Variable ein und muss daher
querySelector zweimal aufrufen:
document.querySelector('#elem').value = 'www';
document.querySelector('#elem').type = 'submit';
Meiner Meinung nach ist dieser Code schwieriger geworden, obwohl
er eine Zeile weniger umfasst. Außerdem,
wenn ich den Wert von id
von 'elem' auf einen anderen ändern möchte, muss ich
das an mehreren Stellen tun, was nicht sehr praktisch ist.
Es gibt noch ein weiteres Problem - die Belastung für den Browser.
Die Suche nach Elementen auf der Seite, die die Methode
querySelector durchführt, ist eine ziemlich
langsame Operation (und generell ist jede Arbeit
mit Seitenelementen eine langsame Operation
- merken Sie sich das).
In unserem Fall, wenn wir jedes Mal
querySelector verwenden, muss der Browser jedes Mal
die HTML-Seite verarbeiten und das
Element mit der angegebenen id mehrmals suchen
(egal, ob die id gleich sind - der Browser
wird alle Aktionen mehrmals durchführen), wodurch
nutzlose Operationen ausgeführt werden, die die
Arbeit des Browsers verlangsamen können.
Wenn wir jedoch die Variable elem verwenden,
findet keine Suche auf der Seite statt
(das Element wurde bereits gefunden und eine Referenz darauf liegt
in der Variable).
Gegeben ist der folgende Code:
<img id="image" src="avatar.png" width="300" height="500">
console.log(document.querySelector('#image').src);
console.log(document.querySelector('#image').width);
console.log(document.querySelector('#image').height);
Weisen Sie auf die Nachteile dieses Codes hin. Korrigieren Sie diese.
