Warum ich querySelector nicht mehr verwenden werde.

Das JavaScript-Ökosystem entwickelt sich ständig weiter und es ist Zeit für eine weitere Welle der Zukunft.

Wir alle haben es geliebt, als jQuery als document.querySelector() und document.querySelectorAll() in Browser integriert wurde. Die DOM-Methoden erleichtern den Zugriff auf das DOM erheblich.

Kürzlich habe ich einige Erfahrungen gemacht, die mir praktisch bewiesen haben, dass die Verwendung von document.querySelector() und document.querySelectorAll() in der fernen Vergangenheit bleibt, während viele interessante Funktionen in Javascript fehlen.

Die Verwendung von document.querySelector() und document.querySelectorAll() bedeutet, dass Sie das DOM nicht zerstören, konsistent auf das DOM zugreifen, Mehrfachauswahlen vereinfachen und Tippschwierigkeiten reduzieren können. Lassen Sie uns nun tiefer eintauchen, damit Sie erkennen, was Ihnen bereits alles entgeht.

Aber warte! Wenn Sie nicht wirklich verstehen, was querySelector() und querySelectorAll() sind, und mehr darüber erfahren möchten; Schauen Sie sich das Video-Tutorial unten an: JavaScript-DOM-Manipulation

Inkonsistente Methoden

document.querySelector() und document.querySelectorAll() sind bei der Auswahl des DOM nicht konsistent. Einer wählt die erste Instanz des Zielselektors aus, während der andere alle Instanzen des Zielselektors auswählt. Das bedeutet, dass eines zum Auswählen eines einzelnen Elements verwendet wird, während das andere zum Auswählen einer Gruppe von Elementen verwendet wird.

Sie können also nicht beide austauschbar verwenden. Sie müssen ständig von einem zum anderen wechseln, je nachdem, was Sie auswählen möchten.

// Select the first element of the class .post
const post = document.querySelector('.post');

// Select all elements of the class .post
const posts = document.querySelectorAll('.post');

Jetzt möchte ich Ihnen einen besseren Weg zeigen, es zu tun. Ich habe gerade eine UI-Bibliothek namens koras.jsx erstellt, die mit $select()
geliefert wird Dies kann anstelle von document.querySelector() und document.querySelectorAll() in JavaScript verwendet werden. Nachfolgend erfahren Sie, wie Sie es verwenden.

//select all instances of class .post
const posts = $select('.post');

//select the first instance of class post
const firstPost = $select('.post[0]');

//Doing the same with querySelector

const posts = document.querySelectorAll('.post');
const firstPost = posts[0];

Wie cool ist das? Und es funktioniert nur für die Anwendungsfälle von document.querySelector() und document.querySelectorAll().

Auswahl nach Index

Sie können ein Element aus gruppierten Elementen an jeder Position auswählen.

//select 6th instance of class post
$select('.post[5]')

//select 7th instance of div elements
$select('div[6]')

Elemente löschen

Sie können Elemente mit $select() löschen wie:

//Delete only the instance of .post with index is equal to 2
$select('.post[delete|i=2]');

//delete all instances of .post with index greater than 2 
$select('.post[delete|i>2]');

Attribute hinzufügen

Sie können Elementen Attribute hinzufügen mit $select()wie:

$select('.post[add|class=hidden]');

$select('.post[add|style=1px solid red]');

$select('.post[add|id=2]');

$select('.post[add|class=flex bold]')

Sie können Attribute aus Elementen mit $select() entfernen, beispielsweise:

$select('.post[remove|class=hidden]');

$select('.post[remove|id]');

$select('.post[remove|class=flex bold]')

$select('.post[remove|style]');

DOM-Destrukturierung

DOM-Destrukturierung ist eine der in es6 enthaltenen Funktionen, aber Sie wären überrascht, dass Sie die mit document.querySelector() und document.querySelectorAll() ausgewählten Elemente nicht destrukturieren können.

Funktioniert nicht:

// Select the first element of the class .post
const post = document.querySelector('.post');

// Select all elements of the class .post
const posts = document.querySelectorAll('.post');

Lösung:

//select all instances of class .post
const posts = $select('.post');

//select the first instance of class post
const firstPost = $select('.post[0]');

//Doing the same with querySelector

const posts = document.querySelectorAll('.post');
const firstPost = posts[0];

Kannst du das sehen? document.querySelectAll() unterstützt keine DOM-Destrukturierung. Das bedeutet, dass Sie die Destrukturierung des DOM verpassen. NEIN! Das ist überhaupt nicht cool, also müssen Sie $select() verwenden.

Repetitive Methoden

Die Verwendung von document.querySelect() oder document.querySelectorAll() zwingt Sie dazu, sich unnötig zu wiederholen, da sie keine DOM-Destrukturierung unterstützen, was die Pflege von JavaScript-Code etwas umständlich macht.

Wird nicht funktionieren

//select 6th instance of class post
$select('.post[5]')

//select 7th instance of div elements
$select('div[6]')

Sie müssen also Folgendes tun:

//Delete only the instance of .post with index is equal to 2
$select('.post[delete|i=2]');

//delete all instances of .post with index greater than 2 
$select('.post[delete|i>2]');

Können Sie erkennen, wie repetitiv das ist und wie es etwas chaotisch wird, Ihre Codebasis im großen Maßstab beizubehalten?

Sehen Sie, Sie können das Gleiche ganz einfach mit $select() wie unten tun:

Lösung

$select('.post[add|class=hidden]');

$select('.post[add|style=1px solid red]');

$select('.post[add|id=2]');

$select('.post[add|class=flex bold]')

Schwierigkeiten beim Debuggen von DOM-Auswahlen:

Die Verwendung von document.querySelector() schafft im Vergleich zu $select() tendenziell mehr Oberfläche zum Verstecken von Fehlern, da DOM-Destrukturierung und Mehrfachauswahl unterstützt werden.

$select('.post[remove|class=hidden]');

$select('.post[remove|id]');

$select('.post[remove|class=flex bold]')

$select('.post[remove|style]');

$select() reduziert die Anzahl der Codezeilen, die in ausgewählte Elemente geschrieben werden müssen, und verringert so die Oberfläche, auf der sich Fehler verstecken können. Das bedeutet, dass Fehler bei Verwendung von $select() vergleichsweise schneller entdeckt werden.

Möglichkeit, alle Array-Methoden zu verwenden.

Mit querySelector ausgewählte Elemente können nur mit forEach funktionieren, nicht jedoch mit map(), filter() und Co.

$select() funktioniert standardmäßig mit allen Array-Methoden, im Gegensatz zu document.querySelectorAll(), das einige Problemumgehungen erfordert, die zu unnötigen Wiederholungen und Komplexität im Maßstab führen können.

Wartbarkeit

Wartbarkeit dreht sich immer um Benutzerfreundlichkeit, Kürze und Konsistenz. Jede Codebasis, die prägnant, konsistent oder einfach zu verwenden ist, ist in der Regel wartbar. Es ist chaotisch, sich wiederholenden und ausführlichen Code beizubehalten, da Sie mehr Oberfläche zur Betrachtung haben, insbesondere beim Beheben eines Fehlers oder beim Erstellen einer Funktion.

Versand ohne JavaScript

Es ist eine Faustregel, nach Möglichkeit weniger JavaScript auszuliefern, und $select() macht dies bei der DOM-Auswahl möglich. $select() ist document.querySelector() und document.querySelectorAll() im großen Maßstab vorzuziehen, da es präziser ist und sich weniger wiederholt. Je mehr Elemente Sie auswählen, desto seltener müssen Sie die Auswahl mit $select() wiederholen.

Anhängen oder Voranstellen eines Arrays von Elementen.

Sie können ein von $select() generiertes Array von Elementen nicht an ein anderes Element wie element.append(arrayGeneratedBy$Select) anhängen, da das DOM NodeList erwartet.

Dennoch können Sie $select() anweisen, alle seine Superkräfte zu deaktivieren, indem Sie false als zweiten Parameter übergeben.

 const [posts, comments] = document.querySelectorAll('.post, .comment');

Jetzt wird eine normale DOM-NodeList[] zurückgegeben, die angehängt und vorangestellt werden kann.

$select() kann das tun

Vielleicht sind Sie neugierig, ob $select() alles kann, was document.querySelect() oder document.querySelectorAll() kann. Ja! Es kann alles tun, was sie tun. $select() kann alles. Es kann Tag- oder CSS-Selektoren verwenden und alles andere tun, was query.querySelector() tun kann.

Ist document.querySelector() besser?

Man kann behaupten, dass querySelector() oder querySelectorAll() mit etwa einer Millisekunde im Durchschnitt schneller als $select() ist, aber $select() gewinnt es zurück Interessen im Maßstab.

Sie müssen noch lernen, querySelector zu verwenden, denn wenn Sie verstehen, wie man es verwendet, haben Sie die Möglichkeit, etwas Nützliches darauf aufzubauen, genau wie $select(). Ich kann $select() erstellen, weil ich wirklich verstehe, wie es funktioniert.

Ich habe ein Tutorial dazu erstellt. Schauen Sie es sich unten an: JavaScript-DOM-Manipulation

Warum ich querySelector nie wieder verwenden werde

Durch die Unterstützung der DOM-Destrukturierung und die Aktivierung arraybasierter Auswahlen erweist sich $select() als wertvolle Ergänzung meines Toolkits. Es verbessert nicht nur die Lesbarkeit meines Codes, sondern minimiert auch die Angriffsfläche für Fehler, wodurch das Debuggen einfacher wird.

Im Streben nach Wartbarkeit, Kürze und Konsistenz erweist sich $select() als überzeugende Wahl für die DOM-Auswahl und stellt einen Fortschritt in der Entwicklung der JavaScript-Entwicklung dar.

Während wir uns weiterhin an das sich entwickelnde JavaScript-Ökosystem anpassen, stellt die Verwendung von Tools wie $select() sicher, dass wir unseren Code immer prägnanter, lesbarer und wartbarer machen.

Das obige ist der detaillierte Inhalt vonWarum ich querySelector nicht mehr verwenden werde.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!