Mengapa jQuery adalah peringatan yang baik untuk berhenti menggunakan jQuery

Ditulis oleh Shalitha Suranga✏️

jQuery mempunyai sejarah yang panjang dan dihormati, namun, keluaran baharu jQuery v4 beta keluar tanpa ciri menarik untuk pembangun web moden. Terdapat beberapa sebab mengapa ia adalah masa yang baik untuk berhenti menggunakan jQuery:

1. Penyemak imbas moden dan API JavaScript asli kini menyokong semua ciri yang disediakan oleh jQuery, menjadikannya berlebihan dan fungsi utilitinya usang
2. Menggunakan jQuery tidak perlu meningkatkan saiz berkas aplikasi web dan mengurangkan prestasi berbanding dengan pelaksanaan asli
3. Keluaran jQuery 4 mengesahkan keusangannya dengan kekurangan ciri baharu yang ketara, memfokuskan pada kelangsungan hidup dan menyerlahkan bahawa JavaScript asli dan rangka kerja moden telah mengatasinya.
4. Penghijrahan jQuery ke modul ES dan penggunaan amalan moden dalam jQuery 4 tidak menambah apa-apa yang baharu untuk pembangun web
5. Menggunakan jQuery dengan rangka kerja bahagian hadapan moden seperti React, Vue dan Angular boleh bercanggah dengan seni bina dan pengesyoran pengekodan mereka
6. Rangka kerja bahagian hadapan moden mengeluarkan kod pengeluaran dengan polyfill, jadi pembangun tidak perlu menggunakan API jQuery untuk membuat halaman web untuk penyemak imbas lama

Kami akan meneroka perkara ini dengan lebih terperinci dan menyelami sebab jQuery v4 menyimpulkan perjalanan selama sedekad dengan membandingkan ciri yang tersedia dengan API web JavaScript asli.

Era keemasan jQuery sebelum v4

Dari permulaan pembangunan web bahagian hadapan, pembangun menggunakan JavaScript untuk melaksanakan bahagian hadapan web yang mesra pengguna dengan mengemas kini elemen HTML secara dinamik.

Pada awal 2000-an, tiada pustaka pembangunan frontend moden berciri penuh, berasaskan komponen, seperti React, dan penyemak imbas juga tidak menawarkan ciri CSS lanjutan seperti animasi dan berciri penuh, mesra pembangun dan peringkat tinggi. API manipulasi DOM, jadi pembangun terpaksa menulis banyak baris kod dengan API web sedia ada untuk membina bahagian hadapan web — malah mereka terpaksa menulis kod untuk menyelesaikan isu keserasian penyemak imbas dengan API komunikasi AJAX.

jQuery menyelesaikan isu ini dengan menawarkan fungsi trengkas untuk manipulasi DOM dan API AJAX silang penyemak imbas, jadi setiap pembangun web menyertakan skrip jQuery dalam apl web mereka.

Memandangkan semua orang mengesyorkan rangka kerja bahagian hadapan berasaskan komponen hari ini, jQuery ialah pendekatan yang paling disyorkan untuk mencipta bahagian hadapan web dinamik pada pertengahan 2000-an apabila penggunaan jQuery mencapai kemuncaknya sebelum kejatuhannya:

Tapak web rasmi Bootstrap 3.4 menggunakan jQuery daripada CDN rasmi

Pada pertengahan 2000-an, jQuery v1 hingga v3 telah digunakan dalam:

• Setiap templat HTML tapak web yang popular untuk melaksanakan peluncur, galeri imej, dll.
• Apl web untuk melakukan manipulasi DOM dan membuat panggilan HTTP/AJAX dengan sokongan Internet Explorer
• Bootstrap untuk melaksanakan komponen seperti modal, lungsur turun, dsb.
• Setiap templat dan pemalam WordPress dinamik untuk manipulasi DOM

Keadaan jQuery dengan keluaran v4

jQuery mengeluarkan keluaran beta pertama pada Februari 2024 dan yang kedua pada Julai  —  penyelenggara pangkalan kod merancang untuk membuat versi calon keluaran tidak lama lagi. Keluaran v4 jQuery mempunyai perubahan besar berikut:

• Menggugurkan sokongan untuk IE 10 dan versi pelayar web yang lebih lama
• Mengalih keluar kaedah yang telah ditamatkan, seperti jQuery.isArray()
• Menyokong penggunaan kandungan HTML yang dibuat dengan API Jenis Dipercayai
• Menyokong menggunakan data binari JavaScript asli dalam kaedah AJAX
• Pangkalan kod jQuery telah dipindahkan ke modul ES daripada AMD (modul memerlukan) dengan pengikat Rollup

Dengan keluaran jQuery v4 beta, ia cuba memodenkan pangkalan kodnya dengan menggunakan modul ES dan mengurangkan saiz berkas dengan menggugurkan sokongan IE 10. Anda boleh membaca lebih lanjut tentang keluaran jQuery v4 yang akan datang daripada catatan blog rasmi ini.

Mengapa jQuery v4 mengesahkan kejatuhannya

Pengeluaran jQuery v4 beta sememangnya bukan sebab untuk berhenti melihat jQuery, tetapi pertumbuhan dan masa depan yang ditunjukkan melalui keluaran v4 mengesahkan kejatuhan jQuery dalam teknologi web moden. Ini perlahan-lahan bermula apabila standard penyemak imbas mula menawarkan ciri manipulasi DOM peringkat tinggi yang memfokuskan produktiviti pembangun dan ciri lanjutan dalam CSS yang membantu pembangun melaksanakan gaya dinamik tanpa menggunakan JavaScript.

jQuery v1 hingga v3 sudah pasti melaksanakan ciri mesra pembangun merentas penyemak imbas yang tidak ditawarkan oleh penyemak imbas secara asal. Contohnya, enjin pemilih Sizzle jQuery membantu pembangun menanyakan elemen DOM sebelum penyemak imbas melaksanakan document.querySelectorAll(). Selain itu, $.ajax() ialah fetch() pembangun terdahulu disebabkan isu keserasian penyemak imbas API AJAX terbina.

Jawapan StackOverflow lama yang mengesyorkan menggunakan jQuery dan bukannya API web asli lama

Sepanjang tempoh jQuery v2 hingga v3, HTML, JavaScript, CSS dan API web telah dipertingkatkan secara drastik dan menawarkan API standard untuk ciri jQuery dengan itu menjadikan jQuery sebagai pilihan usang.

jQuery cuba bertahan dengan mematuhi API standard, seperti menyokong antara muka Promise standard dalam v3, dan mengalih keluar kod pendua, tetapi ciri penyemak imbas standard memenangi hati pembangun moden. jQuery mengeluarkan v4 bukan dengan ciri tetapi dengan peningkatan untuk kekal relevan dalam teknologi web moden.

jQuery v4 membawakan anda kenaikan berkas gzip 27kb untuk ciri yang dihantar oleh penyemak imbas web anda dengan kod JavaScript sisi klien 0kb!

jQuery lwn. API pelayar asli

Mari bandingkan kod API pelayar jQuery vs. asli untuk beberapa keperluan pembangunan secara bersebelahan dan lihat cara API web moden menjadikan jQuery usang.

Buat fail HTML baharu dan pautkan versi beta jQuery v4 melalui CDN rasmi seperti berikut untuk bermula:

<script src="https://code.jquery.com/jquery-4.0.0-beta.min.js"></script>

Memilih elemen DOM

Perpustakaan dan rangka kerja bahagian hadapan moden menawarkan konsep rujukan untuk mengakses rujukan elemen DOM, tetapi pembangun web selalunya perlu menanyakan elemen DOM jika ia tidak bergantung pada rangka kerja bahagian hadapan tertentu. Lihat cara document.querySelectorAll() melaksanakan pemilihan DOM asli yang mudah serupa dengan jQuery:

<ul>





<pre class="brush:php;toolbar:false">// jQuery:
const elms = $('.items input[type=checkbox]:checked');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items input[type=checkbox]:checked');
console.log(elms);

Keputusan:

Memilih elemen DOM dengan pertanyaan CSS menggunakan jQuery dan API web asli

jQuery menawarkan kaedah terdekat() untuk melintasi belakang dan mencari nod DOM yang sepadan untuk pemilih tertentu. API DOM asli juga melaksanakan kaedah yang sama menggunakan corak OOP:

// jQuery:
const elms = $('.items input[type=checkbox]:checked')
             .closest('li');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items input[type=checkbox]:checked');
console.log([...elms].map(e => e.closest('li')));

Keputusan:

Memilih elemen DOM terdekat menggunakan jQuery dan API web asli

Sesetengah ciri jQuery tidak mempunyai alternatif singkatan yang serupa dalam API DOM standard moden, tetapi kami boleh menggunakan kaedah API DOM sedia ada dengan berkesan dengan ciri JavaScript moden.

Sebagai contoh, jQuery menyokong pemilih :contains(text) bukan standard, jadi kita perlu melaksanakannya dengan kaedah tatasusunan penapis() seperti berikut:

// jQuery:
const elms = $('.items li label:contains("Java")');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items li label');
console.log([...elms].filter(e => e.textContent.includes('Java')));

Keputusan:

Menapis elemen yang mengandungi segmen teks tertentu menggunakan jQuery dan API web asli

Kaedah querySelectorAll() menggunakan kuasa kelas pseudo CSS moden untuk menawarkan alternatif asli yang lebih baik untuk fungsi jQuery find(). Sebagai contoh, kita boleh menggunakan :scope pseudo-class untuk menskop panggilan pemilih pertanyaan asli yang serupa dengan fungsi jQuery find():

<div>





<pre class="brush:php;toolbar:false">// jQuery:
const elms = $('.pages')
             .find('.pages > .page-1');
console.log(elms.toArray());

// Native:
const elms = document.querySelector('.pages')
             .querySelectorAll(':scope .pages > .page-1');
console.log(elms);

Keputusan:

Skop pemilih elemen DOM menggunakan jQuery dan API web asli

Mendapatkan semula dan mengemas kini atribut DOM

Atribut kelas, atribut khusus elemen dan atribut data tersuai ialah atribut HTML biasa yang selalunya perlu diambil dan dikemas kini oleh pembangun web semasa membangunkan apl web.

Pada masa lalu, pembangun perlu memanipulasi sifat className asli secara manual untuk mengemas kini nama kelas elemen, jadi mereka menggunakan addClass(), removeClass(), dan toggleClass() pelaksanaan fungsi pra-bangunan jQuery. Tetapi sekarang, objek classList asli melaksanakan sokongan pengendalian nilai atribut kelas yang lebih baik:

<script src="https://code.jquery.com/jquery-4.0.0-beta.min.js"></script>

Keputusan:

Mengemas kini nilai atribut kelas menggunakan jQuery dan API web asli

Sementara itu, kaedah DOM asli getAttribute() dan setAttribute() menjadi pengganti standard untuk fungsi trengkas jQuery attr() yang terkenal:

<ul>





<pre class="brush:php;toolbar:false">// jQuery:
const elms = $('.items input[type=checkbox]:checked');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items input[type=checkbox]:checked');
console.log(elms);

Keputusan:

Menukar dan mendapatkan semula atribut elemen HTML menggunakan jQuery dan API web asli

jQuery mengesyorkan pembangun menggunakan fungsi attr() untuk menetapkan atribut data tersuai, tetapi kini anda boleh menggunakan sifat set data terbina untuk mendapatkan semula/pengubahsuaian atribut data yang lebih produktif seperti berikut:

// jQuery:
const elms = $('.items input[type=checkbox]:checked')
             .closest('li');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items input[type=checkbox]:checked');
console.log([...elms].map(e => e.closest('li')));

Keputusan:

Mengemas kini atribut data tersuai menggunakan jQuery dan API web asli

Manipulasi elemen DOM

Pada masa lalu, kebanyakan pembangun menggunakan jQuery untuk manipulasi DOM memandangkan API manipulasi DOM asli tidak menawarkan ciri tertumpu kepada produktiviti pembangun. Kini setiap pelayar web standard moden melaksanakan sokongan manipulasi DOM yang produktif, tahap tinggi, terbina dalam.

Mencipta dan menambahkan elemen ialah operasi yang paling kerap dalam tugas manipulasi DOM. Berikut ialah cara ia dilakukan menggunakan kedua-dua jQuery dan API web asli:

// jQuery:
const elms = $('.items li label:contains("Java")');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items li label');
console.log([...elms].filter(e => e.textContent.includes('Java')));

Keputusan:

Menggunakan fungsi sebelum() dan selepas() menggunakan jQuery dan API web asli

Menganimasikan elemen DOM

Jika anda seorang pembangun web berpengalaman yang membina apl web lebih sedekad yang lalu, anda tahu bagaimana fungsi jQuery fadeIn(), fadeOut(), dan animate() membantu anda menjadikan apl web anda lebih interaktif. Fungsi animasi ini malah menyokong pelonggaran animasi untuk membina animasi yang lebih lancar.

Animasi/peralihan CSS asli dan API animasi web JavaScript menjadikan API animasi jQuery usang. Berikut ialah cara anda boleh melaksanakan fadeIn() dengan API animasi web standard:

<script src="https://code.jquery.com/jquery-4.0.0-beta.min.js"></script>

Keputusan:

Melampirkan dan mengalih keluar pengendali acara dengan jQuery dan API web asli

Kedua-dua jQuery dan API DOM asli menawarkan cara ringkas untuk melampirkan pendengar acara:

<ul>





<pre class="brush:php;toolbar:false">// jQuery:
const elms = $('.items input[type=checkbox]:checked');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items input[type=checkbox]:checked');
console.log(elms);

jQuery juga menawarkan fungsi one() untuk mencetuskan pengendali acara sekali — kini setiap pelayar web standard menyokong pilihan sekali untuk tujuan yang sama:

// jQuery:
const elms = $('.items input[type=checkbox]:checked')
             .closest('li');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items input[type=checkbox]:checked');
console.log([...elms].map(e => e.closest('li')));

Berkomunikasi dengan perkhidmatan web

Apl web monolitik yang lalu kerap menghantar permintaan HTTP ke pelayan hujung belakang untuk mendapatkan halaman baharu dengan data yang dikemas kini  —  apl web memaparkan keseluruhan halaman untuk setiap tindakan pengguna utama.

Kemudian, pembangun membuat apl web interaktif yang lebih baik dengan mengemas kini sebahagian daripada halaman web dengan meminta kandungan HTML melalui AJAX. Mereka menggunakan jQuery untuk menghantar permintaan AJAX kerana keserasian penyemak imbas dan isu produktiviti dengan API AJAX terbina dalam.

Kini pembangun boleh menggunakan fungsi standard fetch() dan bukannya ciri AJAX jQuery:

// jQuery:
const elms = $('.items li label:contains("Java")');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items li label');
console.log([...elms].filter(e => e.textContent.includes('Java')));

Keputusan:

Menghantar permintaan HTTP dengan jQuery dan API web asli

Kini, kebanyakan pembangun menggunakan API RESTful untuk memisahkan sumber data daripada lapisan pembentangan. jQuery menawarkan fungsi singkatan yang produktif untuk mendapatkan data JSON daripada perkhidmatan RESTful, tetapi native fetch() menawarkan pendekatan standard yang lebih baik:

<div>





<pre class="brush:php;toolbar:false">// jQuery:
const elms = $('.pages')
             .find('.pages > .page-1');
console.log(elms.toArray());

// Native:
const elms = document.querySelector('.pages')
             .querySelectorAll(':scope .pages > .page-1');
console.log(elms);

Keputusan:

Meminta data JSON daripada perkhidmatan web RESTful dengan jQuery dan API web asli

Fungsi utiliti

jQuery menawarkan pelbagai fungsi utiliti pra-bangunan untuk menjimatkan masa pembangun web. Pada masa kini, kami boleh menemui ciri ECMAScript terbina untuk semua fungsi utiliti pra-bangunan ini yang wujud dalam jQuery v4, seperti yang disenaraikan dalam jadual berikut:

jQuery	Native replacement
`$.each()`	`Array.forEach()`
`$.extend()`	`Object.assign() or the spread operator`
`$.inArray()`	`Array.includes()`
`$.map()`	`Array.map()`
`$.parseHTML()`	`document.implementation.createHTMLDocument()`
`$.isEmptyObject()`	`Object.keys()`
`$.merge()`	`Array.concat()`

Utiliti lama seperti $.parseJSON() telah pun ditamatkan dalam versi jQuery yang lalu dan dialih keluar dalam v4.

Bolehkah saya menggunakan jQuery dengan Vue, React, atau Angular?

Pembangun web menggunakan jQuery apabila perpustakaan bahagian hadapan pembangunan apl moden tidak wujud. Mereka menggunakan manipulasi DOM jQuery dan ciri AJAX kebanyakannya untuk mengemas kini bahagian hadapan secara dinamik tanpa menyegarkan keseluruhan halaman web. Kini, teknik pembangunan SPA (aplikasi satu halaman) dalam rangka kerja/pustaka bahagian hadapan moden membolehkan pembangun web membina apl web yang sangat interaktif, tersusun, dan ringan tanpa menggunakan teknik pemaparan berasaskan AJAX yang lama.

Kami boleh menggunakan jQuery dengan Vue, React dan Angular seperti mana-mana perpustakaan/rangka kerja bahagian hadapan yang popular, tetapi menyepadukan jQuery dengan perpustakaan bahagian hadapan ini tidak digalakkan kerana ia tidak membawa apa-apa nilai kepada ekosistem pembangunan bahagian hadapan moden.

Setiap perpustakaan bahagian hadapan yang popular menawarkan konsep ref untuk mengakses rujukan elemen DOM dalam komponen, jadi anda tidak perlu menggunakan sama ada jQuery atau document.querySelector(). Sebagai contoh, anda boleh mendapatkan rujukan elemen DOM bagi

dalam Vue seperti berikut:

<script src="https://code.jquery.com/jquery-4.0.0-beta.min.js"></script>

Keputusan:

Mengakses rujukan elemen DOM dalam Vue menggunakan rujukan

Menggunakan jQuery dalam Vue seperti berikut sememangnya mungkin, tetapi ia menjejaskan sumber Vue moden dengan sintaks lama yang diperkenalkan kira-kira sedekad yang lalu dan memecahkan cara yang dimaksudkan perpustakaan hadapan moden harus digunakan:

<skrip>
import $ daripada 'jquery';

eksport lalai {
 dipasang() {
   const elm = $('#elm');
   console.log(elm);
 }
}
</skrip>

<template>
 <div>



<p>Manipulasi DOM manual jarang berlaku dengan perpustakaan bahagian hadapan moden seperti Vue. Walau bagaimanapun, jika anda menghadapi situasi sedemikian, menggunakan API web asli ialah pendekatan yang disyorkan.</p>

<h2>
  
  
  Kesimpulan
</h2>

<p>jQuery sudah pasti pustaka JavaScript yang luar biasa yang memperkenalkan pendekatan mesra pembangun yang produktif untuk membina bahagian hadapan apl web dengan manipulasi DOM dan teknik AJAX. jQuery mendapat populariti melalui isu keserasian penyemak imbas dan kekurangan ciri tertumpu pembangun dalam API web asli. W3C dan ECMAScript menyelesaikan isu ini dengan memperkenalkan API web baharu dan ciri bahasa JavaScript. </p>

<p>Keadaan semasa API web menawarkan kelas dan fungsi yang lebih baik, moden, mesra pembangun untuk semua ciri yang dimiliki jQuery, menjadikan jQuery tidak diperlukan dalam web moden. </p>

<p>Keluaran v4 beta baru-baru ini bagi jQuery mengesahkan ini dengan penyingkiran ciri dan peningkatan yang memfokuskan pada penyelenggaraan dan bukannya inovasi. V4 dan keluaran jQuery lain kemungkinan besar akan mempunyai lebih banyak pengalihan keluar ciri kerana ketersediaan API web asli merentas pelayar. </p><p>Versi akan datang mungkin menamatkan sokongan untuk penyemak imbas lama kerana kebanyakan pengguna cenderung menggunakan penyemak imbas terkini. Saya juga berpendapat jQuery tidak akan menjadi popular lagi kerana API web asli semasa adalah stabil dan diseragamkan dengan baik, tetapi pembangun yang bekerja dengan aplikasi web lama yang bergantung pada jQuery akan terus menggunakannya dan menaik taraf projek mereka kepada jQuery v4, v5, dan seterusnya. Semua itu dikatakan, tiada siapa yang mahu meningkatkan saiz berkas aplikasi web dengan menambahkan jQuery untuk ciri pembangunan yang boleh mereka temui dengan mudah dalam mana-mana pelayar web yang popular!</p>


<hr>

<h2>
  
  
  LogRocket: Nyahpepijat ralat JavaScript dengan lebih mudah dengan memahami konteks
</h2>

<p>Kod nyahpepijat sentiasa menjadi tugas yang membosankan. Tetapi semakin anda memahami kesilapan anda, semakin mudah untuk membetulkannya.</p>

<p>LogRocket membolehkan anda memahami ralat ini dengan cara baharu dan unik. Penyelesaian pemantauan bahagian hadapan kami menjejaki penglibatan pengguna dengan bahagian hadapan JavaScript anda untuk memberi anda keupayaan untuk melihat dengan tepat perkara yang dilakukan pengguna yang membawa kepada ralat.</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173087043468616.jpg" alt="Why jQuery s a good reminder to stop using jQuery"></p>

<p>LogRocket merekodkan log konsol, masa muat halaman, surih tindanan, permintaan/tindak balas rangkaian perlahan dengan badan pengepala, metadata penyemak imbas dan log tersuai. Memahami kesan kod JavaScript anda tidak akan menjadi lebih mudah!</p>

<p>Cuba secara percuma.</p>


          

            
        

Atas ialah kandungan terperinci Mengapa jQuery adalah peringatan yang baik untuk berhenti menggunakan jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript restful json jquery css ajax bootstrap ecmascript html angular Array Object if for while foreach date try Error Filter const continue using class operator Interface Attribute Property Event map console function default dom this promise history animation table web app http WordPress web services

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn