Pourquoi je n'utiliserai plus querySelector.

L'écosystème JavaScript est en constante évolution et il est temps pour une autre vague du futur.

Nous avons tous adoré lorsque jQuery a été intégré aux navigateurs sous le nom de document.querySelector() et document.querySelectorAll(). Les méthodes DOM facilitent grandement l'accès au DOM.

Récemment, j'ai eu une expérience qui m'a pratiquement prouvé que l'utilisation à la fois de document.querySelector() et de document.querySelectorAll() s'en tient à un passé lointain tout en manquant de nombreuses fonctionnalités intéressantes en Javascript.

L'utilisation de document.querySelector() et document.querySelectorAll() signifie que vous ne pouvez pas déstructurer le DOM, accéder au DOM de manière cohérente, simplifier les sélections multiples et réduire les difficultés de saisie. Maintenant, approfondissons afin que vous puissiez déjà réaliser tout ce qui vous manque.

Mais attendez ! Si vous ne comprenez pas vraiment ce que sont querySelector() et querySelectorAll() et que vous souhaitez en savoir plus à leur sujet ; regardez le tutoriel vidéo ci-dessous : Manipulation JavaScript DOM

Méthodes incohérentes

document.querySelector() et document.querySelectorAll() ne sont pas cohérents dans la sélection du DOM. L'un sélectionne la première instance du sélecteur cible tandis que l'autre sélectionne toutes les instances du sélecteur cible. Cela signifie que l'un est utilisé pour sélectionner un élément individuel tandis que l'autre est utilisé pour sélectionner un groupe d'éléments.

Vous ne pouvez donc pas utiliser les deux de manière interchangeable. Il faut continuer à passer de l'un à l'autre en fonction de ce que l'on souhaite sélectionner.

// 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');

Maintenant, laissez-moi vous montrer une meilleure façon de le faire. Je viens de créer une bibliothèque d'interface utilisateur appelée koras.jsx fournie avec $select()
qui peut être utilisé à la place de document.querySelector() et document.querySelectorAll() en JavaScript et voici comment l'utiliser.

//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];

Est-ce que c'est cool ? Et cela ne fonctionne que pour les cas d'utilisation de document.querySelector() et de document.querySelectorAll().

Sélection par index

Vous pouvez sélectionner un élément parmi les éléments regroupés à n'importe quelle position.

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

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

Suppression d'éléments

Vous pouvez supprimer des éléments avec $select() comme :

//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]');

Ajout d'attributs

Vous pouvez ajouter des attributs aux éléments avec $select() comme :

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

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

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

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

Vous pouvez supprimer les attributs des éléments avec $select() comme :

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

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

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

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

Déstructuration du DOM

La déstructuration DOM est l'une des fonctionnalités livrées dans es6 mais vous seriez surpris de ne pas pouvoir déstructurer les éléments sélectionnés avec document.querySelector() et document.querySelectorAll().

Ne fonctionne pas :

// 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');

Solution:

//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];

Tu vois ça ? document.querySelectAll() ne prend pas en charge la déstructuration DOM. Cela signifie que vous manquez la déstructuration du DOM. Non! Ce n'est pas cool du tout, donc vous devez commencer à utiliser $select().

Méthodes répétitives

L'utilisation de document.querySelect() ou document.querySelectorAll() vous oblige à se répéter inutilement car ils ne prennent pas en charge la déstructuration du DOM et cela rend un peu compliqué la maintenance du code JavaScript.

ne fonctionnera pas

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

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

Il faut donc faire :

//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]');

Pouvez-vous voir à quel point cela est répétitif et à quel point cela rendra un peu compliqué la maintenance de votre base de code à grande échelle ?

Vous voyez, vous pouvez facilement faire la même chose en utilisant $select() comme ci-dessous :

Solution

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

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

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

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

Difficultés de débogage des sélections DOM :

L'utilisation de document.querySelector() a tendance à créer plus de surface pour cacher les bogues par rapport à $select() en raison de sa prise en charge de la déstructuration DOM et des sélections multiples.

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

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

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

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

$select() réduit le nombre de lignes de code à écrire pour sélectionner les éléments et réduit ainsi la surface sur laquelle les bugs peuvent se cacher. Cela signifie que les bogues sont plus susceptibles d'être découverts relativement plus rapidement lors de l'utilisation de $select().

Possibilité d'utiliser toutes les méthodes de tableau.

Les éléments sélectionnés avec querySelector ne peuvent fonctionner qu'avec forEach mais pas map(), filter() et co.

$select() fonctionne par défaut avec toutes les méthodes de tableau, contrairement à document.querySelectorAll() qui nécessite certaines solutions de contournement pouvant entraîner des répétitions inutiles et une complexité à grande échelle.

Maintenabilité

La maintenabilité tourne toujours autour de la facilité d'utilisation, de la brièveté et de la cohérence. Toute base de code concise, cohérente ou facile à utiliser a tendance à être maintenable. Il est compliqué de maintenir un code répétitif et verbeux, car vous disposez de plus de surface à examiner, en particulier lors de la correction d'un bogue ou de la création d'une fonctionnalité.

Expédition sans JavaScript

C'est une règle générale d'expédier moins de JavaScript lorsque cela est possible et $select() le rend réalisable lors de la gestion de la sélection DOM. $select() est préférable à document.querySelector() et document.querySelectorAll() à grande échelle car il est plus concis et moins répétitif. Plus vous sélectionnez d'éléments, moins vous répétez la sélection avec $select().

Ajout ou préfixe d'un tableau d'éléments.

Vous ne pouvez pas ajouter un tableau d'éléments générés par $select() à un autre élément comme element.append(arrayGeneratedBy$Select) car le DOM attend NodeList.

Néanmoins, vous pouvez dire à $select() de désactiver tous ses super pouvoirs en lui passant false comme deuxième paramètre.

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

Maintenant, il renverra une NodeList[] DOM normale qui peut être ajoutée et ajoutée en pré-ajout.

$select() peut faire ça

Vous êtes peut-être curieux de savoir si $select() peut faire tout ce que document.querySelect() ou document.querySelectorAll() peuvent faire. Oui! Il peut faire tout ce qu'ils font. $select() peut tout faire. Il peut utiliser des sélecteurs CSS tagor et faire tout ce que query.querySelector() peut faire.

Est-ce que document.querySelector() est meilleur ?

Il est possible d'affirmer que querySelector() ou querySelectorAll() est plus rapide que $select() avec environ une milliseconde en moyenne mais $select() le récupère avec intérêts à grande échelle.

Vous devez encore apprendre à utiliser querySelector car comprendre comment l'utiliser vous donne une chance de créer quelque chose d'utile dessus, tout comme $select(). Je suis capable de construire $select() parce que je comprends vraiment comment cela fonctionne.

J'ai fait un tutoriel là-dessus. Découvrez-le ci-dessous : manipulation JavaScript DOM

Pourquoi je n'utiliserai plus jamais querySelector

En prenant en charge la déstructuration du DOM et en permettant les sélections basées sur des tableaux, $select() s'avère être un ajout précieux à ma boîte à outils. Cela améliore non seulement la lisibilité de mon code, mais minimise également la surface des bogues, ce qui rend le débogage un processus plus simple.

Dans un souci de maintenabilité, de brièveté et de cohérence, $select() apparaît comme un choix convaincant pour la sélection du DOM, montrant un pas en avant dans l'évolution du développement JavaScript.

Alors que nous continuons à nous adapter à l'évolution de l'écosystème JavaScript, l'adoption d'outils tels que $select() garantit que nous continuons à rendre notre code plus concis, lisible et maintenable.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!