Mengapa saya tidak akan menggunakan querySelector lagi.

Ekosistem JavaScript sentiasa berkembang dan tiba masanya untuk gelombang masa depan yang lain.

Kami semua menyukainya apabila jQuery dipanggang ke dalam penyemak imbas sebagai document.querySelector() dan document.querySelectorAll(). Kaedah DOM menjadikan akses DOM lebih baik.

Baru-baru ini, saya mempunyai beberapa pengalaman yang secara praktikal membuktikan kepada saya bahawa menggunakan kedua-dua document.querySelector() dan document.querySelectorAll() berpegang pada masa lalu yang jauh sambil kehilangan banyak ciri menarik dalam Javascript.

Menggunakan document.querySelector() dan document.querySelectorAll() bermakna anda tidak boleh merosakkan DOM, mengakses DOM secara konsisten, memudahkan berbilang pilihan dan mengurangkan kesukaran menaip. Sekarang, mari kita menyelam lebih dalam supaya anda dapat menyedari semua yang anda hilang.

Tetapi tunggu! Jika anda tidak benar-benar memahami apa itu querySelector() dan querySelectorAll() dan anda ingin mengetahui lebih lanjut mengenainya; lihat tutorial video di bawah: Manipulasi DOM JavaScript

Kaedah yang tidak konsisten

document.querySelector() dan document.querySelectorAll() tidak konsisten dalam memilih DOM. Satu memilih contoh pertama pemilih sasaran manakala yang lain memilih semua kejadian pemilih sasaran. Ini bermakna satu digunakan untuk memilih elemen individu manakala satu lagi digunakan untuk memilih kumpulan elemen.

Jadi anda tidak boleh menggunakan kedua-duanya secara bergantian. Anda perlu terus bertukar antara satu sama lain bergantung pada pilihan yang ingin anda pilih.

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

Sekarang, izinkan saya menunjukkan kepada anda cara yang lebih baik untuk melakukannya. Saya baru sahaja membina perpustakaan UI yang dipanggil koras.jsx yang disertakan dengan $select()
yang boleh digunakan sebagai ganti kedua-dua document.querySelector() dan document.querySelectorAll() dalam JavaScript dan di bawah ialah cara menggunakannya.

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

Seberapa hebat itu? Dan ia hanya berfungsi untuk kes penggunaan kedua-dua document.querySelector() dan document.querySelectorAll().

Pemilihan mengikut indeks

Anda boleh memilih elemen antara elemen berkumpulan di mana-mana kedudukan.

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

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

Memadam elemen

Anda boleh memadamkan elemen dengan $select() seperti:

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

Menambah atribut

Anda boleh menambah atribut pada elemen dengan $select()seperti:

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

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

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

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

Anda boleh mengalih keluar atribut daripada elemen dengan $select()seperti:

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

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

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

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

Pemusnahan DOM

Pemusnahan DOM ialah salah satu ciri yang dihantar dalam es6 tetapi anda akan terkejut anda tidak boleh memusnahkan elemen yang dipilih dengan document.querySelector() dan document.querySelectorAll().

Tidak berfungsi:

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

Penyelesaian:

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

Nampak tak? document.querySelectAll() tidak menyokong pemusnahan DOM. Ini bermakna anda terlepas untuk memusnahkan DOM. Tidak! Itu tidak bagus sama sekali jadi anda perlu mula menggunakan $select().

Kaedah berulang

Menggunakan document.querySelect() atau document.querySelectorAll() memaksa anda mengulangi diri mereka sendiri tanpa perlu kerana mereka tidak menyokong pemusnahan DOM dan itu menjadikannya agak kemas untuk mengekalkan kod JavaScript.

tidak akan berfungsi

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

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

Jadi anda perlu lakukan:

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

Bolehkah anda melihat betapa berulangnya perkara itu dan bagaimana ia akan menjadikannya agak kemas untuk mengekalkan asas kod anda pada skala?

Lihat, anda boleh melakukan perkara yang sama menggunakan $select() seperti di bawah dengan mudah:

Penyelesaian

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

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

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

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

Kesukaran dalam menyahpepijat pilihan DOM:

Menggunakan document.querySelector() cenderung untuk mencipta lebih banyak kawasan permukaan untuk pepijat untuk disembunyikan berbanding $select() kerana sokongannya untuk pemusnahan DOM dan berbilang pilihan.

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

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

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

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

$select() mengurangkan bilangan baris kod untuk ditulis untuk memilih elemen dan seterusnya mengurangkan kawasan permukaan untuk disembunyikan oleh pepijat. Ini bermakna pepijat lebih berkemungkinan ditemui secara perbandingan lebih pantas semasa menggunakan $select().

Keupayaan untuk menggunakan semua kaedah tatasusunan.

Elemen yang dipilih dengan querySelector hanya boleh berfungsi dengan forEach tetapi bukan map(), filter() dan co.

$select()berfungsi dengan semua kaedah tatasusunan secara lalai tidak seperti document.querySelectorAll() yang memerlukan beberapa penyelesaian yang mungkin membawa kepada pengulangan dan kerumitan yang tidak perlu pada skala.

Kebolehselenggaraan

Kebolehselenggaraan sentiasa berkisar kepada kemudahan penggunaan, ringkas dan konsisten. Mana-mana pangkalan kod yang ringkas, konsisten atau mudah digunakan cenderung boleh diselenggara. Adalah tidak kemas untuk mengekalkan kod berulang dan bertele-tele kerana anda mempunyai lebih banyak kawasan permukaan untuk dilihat terutamanya semasa membetulkan pepijat atau membina ciri.

Kurang Penghantaran JavaScript

Adalah satu peraturan untuk menghantar lebih sedikit JavaScript jika boleh dan $select() menjadikannya boleh dilaksanakan semasa berurusan dengan pemilihan DOM. $select() adalah lebih baik daripada document.querySelector() dan document.querySelectorAll() pada skala kerana ia lebih ringkas dan kurang berulang. Lebih banyak elemen yang anda pilih, semakin kurang anda mengulang pemilihan dengan $select().

Menambah atau menambah tatasusunan elemen.

Anda tidak boleh menambahkan tatasusunan elemen yang dijana oleh $select() ke elemen lain seperti element.append(arrayGeneratedBy$Select) kerana DOM mengharapkan NodeList.

Namun, anda boleh memberitahu $select() untuk melumpuhkan semua kuasa besarnya dengan memberikan palsu sebagai parameter kedua kepadanya.

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

Sekarang, ia akan mengembalikan DOM NodeList[] biasa yang boleh ditambah dan boleh diandaikan.

$select() boleh melakukannya

Anda mungkin ingin tahu jika $select() boleh melakukan segala-galanya document.querySelect() atau document.querySelectorAll() boleh lakukan. Ya! Ia boleh melakukan apa sahaja yang mereka lakukan. $select() boleh melakukan semuanya. Ia boleh menggunakan pemilih css tagor dan melakukan setiap perkara lain query.querySelector()boleh lakukan.

Adakah document.querySelector() lebih baik?

Adalah mungkin untuk mendakwa bahawa querySelector() atau querySelectorAll() lebih pantas daripada $select()dengan kira-kira satu milisaat secara purata tetapi $select() memenanginya semula dengan minat pada skala.

Anda masih perlu belajar menggunakan querySelector kerana memahami cara menggunakannya memberi anda peluang untuk membina sesuatu yang berguna padanya seperti $select(). Saya dapat membina $select() kerana saya benar-benar memahami cara ia berfungsi.

Saya telah membuat tutorial mengenainya. Lihat di bawah: Manipulasi DOM JavaScript

Mengapa saya tidak akan menggunakan querySelector lagi

Dengan menyokong penstrukturan DOM dan mendayakan pilihan berasaskan tatasusunan, $select() terbukti sebagai tambahan yang berharga kepada toolkit saya. Ia bukan sahaja meningkatkan kebolehbacaan kod saya tetapi juga meminimumkan kawasan permukaan untuk pepijat, menjadikan penyahpepijatan proses yang lebih mudah.

Dalam mengejar kebolehselenggaraan, ringkas dan konsisten, $select() muncul sebagai pilihan yang menarik untuk pemilihan DOM, menunjukkan satu langkah ke hadapan dalam evolusi pembangunan JavaScript.

Sambil kami terus menyesuaikan diri dengan ekosistem JavaScript yang sedang berkembang, menerima alatan seperti $select() memastikan kami terus menjadikan kod kami lebih ringkas, boleh dibaca dan boleh diselenggara.

Atas ialah kandungan terperinci Mengapa saya tidak akan menggunakan querySelector lagi.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!