Kapan menggunakan Vanilla JavaScript vs. jQuery?

Saya perhatikan saat memantau / mencoba menjawab pertanyaan jQuery umum, bahwa ada praktik tertentu menggunakan javascript, alih-alih jQuery, yang sebenarnya memungkinkan Anda untuk menulis lebih sedikit dan melakukan ... dengan jumlah yang sama. Dan mungkin juga menghasilkan manfaat kinerja.

Contoh spesifik

$(this) vs. this

Di dalam acara klik referensi id objek yang diklik

jQuery

$(this).attr("id");

Javascript

this.id;

Apakah ada praktik umum lainnya seperti ini? Di mana operasi Javascript tertentu dapat dilakukan dengan lebih mudah, tanpa membawa jQuery ke dalam campuran. Atau ini kasus yang jarang terjadi? (dari "pintasan" jQuery sebenarnya membutuhkan lebih banyak kode)

EDIT: Sementara saya menghargai jawaban mengenai jQuery vs kinerja javascript biasa, saya sebenarnya mencari lebih banyak jawaban kuantitatif. Saat menggunakan jQuery , contoh di mana orang benar-benar akan lebih baik (keterbacaan / kekompakan) untuk menggunakan javascript biasa daripada menggunakan $(). Selain contoh yang saya berikan dalam pertanyaan asli saya.

• this.id (seperti yang Anda ketahui)
• this.value(pada sebagian besar tipe input. Hanya masalah yang saya tahu adalah IE ketika a <select>tidak memiliki valueproperti yang ditetapkan pada <option>elemen - elemennya, atau input radio di Safari.)
• this.className untuk mendapatkan atau mengatur seluruh properti "kelas"
• this.selectedIndexterhadap a <select>untuk mendapatkan indeks yang dipilih
• this.optionsterhadap a <select>untuk mendapatkan daftar <option>elemen
• this.textmenentang <option>untuk mendapatkan konten teksnya
• this.rowsmelawan a <table>untuk mendapatkan koleksi <tr>elemen
• this.cellsterhadap a <tr>untuk mendapatkan selnya (td & th)
• this.parentNode untuk mendapatkan orang tua langsung
• this.checkeduntuk mendapatkan status cek dari checkbox Terimakasih @Tim Bawah
• this.selecteduntuk mendapatkan status terpilih dari option Terimakasih @Tim Bawah
• this.disableduntuk mendapatkan status nonaktif dari input Terimakasih @Tim
• this.readOnlyuntuk mendapatkan status readOnly dari input Thanks @Tim Down
• this.hrefterhadap <a>elemen untuk mendapatkan nyahref
• this.hostnameterhadap suatu <a>elemen untuk mendapatkan domain-nyahref
• this.pathnameterhadap <a>elemen untuk mendapatkan path-nyahref
• this.searchterhadap <a>elemen untuk mendapatkan querystring-nyahref
• this.src terhadap elemen yang sah untuk memiliki a src

... Saya pikir Anda mendapatkan ide.

Akan ada saat-saat ketika kinerja sangat penting. Seperti jika Anda melakukan sesuatu berulang kali, Anda mungkin ingin membuang jQuery.

Secara umum Anda dapat mengganti:

$(el).attr('someName');

dengan:

Kata di atas buruk. getAttributebukan pengganti, tetapi mengambil nilai atribut yang dikirim dari server, dan yang sesuaisetAttribute akan mengaturnya. Diperlukan dalam beberapa kasus.

Kalimat di bawah ini semacam menutupinya. Lihat jawaban ini untuk perawatan yang lebih baik.

el.getAttribute('someName');

... untuk mengakses atribut secara langsung. Perhatikan bahwa atribut tidak sama dengan properti (meskipun terkadang saling mencerminkan satu sama lain). Tentu saja adasetAttribute juga.

Katakanlah Anda memiliki situasi ketika menerima halaman di mana Anda perlu membuka semua tag dari jenis tertentu. Ini singkat dan mudah dengan jQuery:

$('span').unwrap();  // unwrap all span elements

Tetapi jika ada banyak, Anda mungkin ingin melakukan sedikit API DOM asli:

var spans = document.getElementsByTagName('span');

while( spans[0] ) {
    var parent = spans[0].parentNode;
    while( spans[0].firstChild ) {
        parent.insertBefore( spans[0].firstChild, spans[0]);
    }
    parent.removeChild( spans[0] );
}

Kode ini cukup singkat, performanya lebih baik daripada versi jQuery, dan dapat dengan mudah dijadikan fungsi yang dapat digunakan kembali di perpustakaan pribadi Anda.

Mungkin kelihatannya saya memiliki loop tak terhingga dengan terluar whilekarena while(spans[0]), tetapi karena kita sedang berhadapan dengan "daftar hidup" itu akan diperbarui ketika kita melakukan parent.removeChild(span[0]);. Ini adalah fitur yang sangat bagus yang kami lewatkan ketika bekerja dengan Array (atau objek seperti Array) sebagai gantinya.

Jawaban yang benar adalah Anda akan selalu menerima penalti performa saat menggunakan jQuery alih-alih JavaScript asli 'polos lama'. Itu karena jQuery adalah Perpustakaan JavaScript. Ini bukan versi JavaScript baru yang mewah.

Alasan jQuery sangat kuat adalah karena ia membuat beberapa hal yang terlalu membosankan dalam situasi lintas-browser (AJAX adalah salah satu contoh terbaik) dan memperhalus ketidakkonsistenan antara berbagai browser yang tersedia dan menyediakan API yang konsisten. Ini juga dengan mudah memfasilitasi konsep-konsep seperti rantai, pengulangan tersirat, dll, untuk menyederhanakan bekerja pada kelompok elemen bersama-sama.

Belajar jQuery bukan pengganti untuk belajar JavaScript. Anda harus memiliki dasar yang kuat dalam yang terakhir sehingga Anda sepenuhnya menghargai apa yang mengetahui mantan membuat lebih mudah bagi Anda.

- Diedit untuk mencakup komentar -

Karena komentar cepat untuk menunjukkan (dan saya setuju dengan 100%) pernyataan di atas merujuk pada kode pembandingan. Solusi JavaScript 'asli' (dengan asumsi itu ditulis dengan baik) akan mengungguli solusi jQuery yang mencapai hal yang sama di hampir setiap kasus (saya ingin melihat contoh lain). jQuery mempercepat waktu pengembangan, yang merupakan manfaat signifikan yang saya tidak bermaksud mengecilkan. Ini memfasilitasi mudah dibaca, mudah untuk mengikuti kode, yang lebih dari beberapa pengembang mampu membuat sendiri.

Menurut pendapat saya, jawabannya tergantung pada apa yang ingin Anda capai. Jika, seperti yang saya duga berdasarkan referensi Anda untuk manfaat kinerja, Anda mengejar kecepatan terbaik dari aplikasi Anda, kemudian menggunakan jQuery memperkenalkan overhead setiap kali Anda menelepon $(). Jika Anda ingin keterbacaan, konsistensi, kompatibilitas lintas browser, dll, maka pasti ada alasan untuk memilih jQuery daripada JavaScript 'asli'.

Ada kerangka yang disebut ... oh coba tebak? Vanilla JS. Semoga Anda mendapatkan lelucon ...: D Ini mengorbankan keterbacaan kode untuk kinerja ... Membandingkannya dengan yang di jQuerybawah ini Anda dapat melihat bahwa mengambil DOMelemen hingga IDhampir 35X lebih cepat. :)

Jadi, jika Anda menginginkan kinerja, Anda sebaiknya mencoba Vanilla JS dan menarik kesimpulan sendiri. Mungkin Anda tidak akan mengalami JavaScript menggantung GUI peramban / mengunci utas UI selama kode intensif seperti di dalam forloop.

Vanilla JS adalah kerangka kerja lintas platform yang cepat, ringan, untuk membangun aplikasi JavaScript yang luar biasa dan kuat.

Di beranda mereka ada beberapa perbandingan perf:

Sudah ada jawaban yang diterima tetapi saya yakin tidak ada jawaban yang diketik langsung di sini yang bisa komprehensif dalam daftar metode / atribut javascript asli yang secara praktis menjamin dukungan lintas-browser. Untuk itu saya dapat mengarahkan Anda ke quirksmode:

http://www.quirksmode.org/compatibility.html

Mungkin ini adalah daftar yang paling komprehensif tentang apa yang berfungsi dan apa yang tidak berfungsi pada browser apa saja di mana saja. Berikan perhatian khusus pada bagian DOM. Banyak membaca tetapi intinya bukan untuk membaca semuanya tetapi menggunakannya sebagai referensi.

Ketika saya mulai serius menulis aplikasi web, saya mencetak semua tabel DOM dan menggantungnya di dinding sehingga saya tahu sekilas apa yang aman untuk digunakan dan apa yang membutuhkan peretasan. Hari ini saya hanya google sesuatu seperti quirksmode parentNode compatibilityketika saya ragu.

Seperti hal lainnya, penilaian sebagian besar adalah masalah pengalaman. Saya tidak akan benar-benar merekomendasikan Anda untuk membaca seluruh situs dan menghafal semua masalah untuk mencari tahu kapan harus menggunakan jQuery dan kapan harus menggunakan JS biasa. Sadarilah daftar itu. Cukup mudah untuk mencari. Seiring waktu, Anda akan mengembangkan naluri kapan JS biasa lebih disukai.

PS: PPK (penulis situs) juga memiliki buku yang sangat bagus yang saya rekomendasikan untuk dibaca

Kapan:

1. Anda tahu bahwa ada dukungan lintas browser yang teguh untuk apa yang Anda lakukan, dan
2. ini bukan kode yang lebih penting untuk diketik, dan
3. itu tidak kurang dibaca secara signifikan, dan
4. Anda cukup yakin bahwa jQuery tidak akan memilih implementasi berbeda berdasarkan browser untuk mencapai kinerja yang lebih baik, maka:

gunakan JavaScript. Kalau tidak, gunakan jQuery (jika Anda bisa).

Sunting : Jawaban ini berlaku baik ketika memilih untuk menggunakan jQuery secara keseluruhan dibandingkan meninggalkannya, serta memilih apakah akan menggunakan vanilla JS di dalam jQuery. Memilih antara attr('id')dan .idbersandar mendukung JS, sementara memilih antara removeClass('foo')versus .className = .className.replace( new Regexp("(?:^|\\s+)"+foo+"(?:\\s+|$)",'g'), '' )bersandar mendukung jQuery.

Jawaban orang lain terfokus pada pertanyaan luas "jQuery vs. plain JS." Menilai dari OP Anda, saya pikir Anda hanya bertanya-tanya kapan lebih baik menggunakan vanilla JS jika Anda sudah memilih untuk menggunakan jQuery. Contoh Anda adalah contoh sempurna kapan Anda harus menggunakan vanilla JS:

$(this).attr('id');

Apakah lebih lambat dan (menurut saya) kurang dapat dibaca daripada:

this.id.

Ini lebih lambat karena Anda harus memutar objek JS baru hanya untuk mengambil atribut dengan cara jQuery. Sekarang, jika Anda akan menggunakan $(this)untuk melakukan operasi lain, maka tentu saja, simpan objek jQuery dalam variabel dan beroperasi dengan itu. Namun, saya mengalami banyak situasi di mana saya hanya perlu atribut dari elemen (suka idatau src).

Apakah ada praktik umum lainnya seperti ini? Di mana operasi Javascript tertentu dapat dilakukan dengan lebih mudah, tanpa membawa jQuery ke dalam campuran. Atau ini kasus yang jarang terjadi? (dari "pintasan" jQuery sebenarnya membutuhkan lebih banyak kode)

Saya pikir kasus yang paling umum adalah yang Anda gambarkan dalam posting Anda; orang-orang yang membungkus $(this)objek jQuery tidak perlu. Saya paling sering melihat ini dengan iddan value(sebagai gantinya menggunakan$(this).val() ).

Edit: Ini artikel yang menjelaskan mengapa menggunakan jQuery dalam attr()kasus ini lebih lambat. Pengakuan: mencurinya dari tag wiki, tapi saya pikir perlu disebutkan untuk pertanyaannya.

Sunting lagi: Mengingat implikasi keterbacaan / kinerja dari hanya mengakses atribut secara langsung, saya akan mengatakan aturan praktis yang baik adalah mungkin mencoba untuk menggunakanthis.<attributename> jika memungkinkan. Mungkin ada beberapa contoh di mana ini tidak akan berhasil karena inkonsistensi peramban, tetapi mungkin lebih baik untuk mencoba ini terlebih dahulu dan kembali ke jQuery jika tidak berfungsi.

Jika Anda lebih mementingkan kinerja, contoh utama Anda mengenai kuku di kepala. Meminta jQuery secara tidak perlu atau berlebihan adalah, IMHO, penyebab utama kedua dari kinerja yang lambat (yang pertama adalah traversal DOM yang buruk).

Ini bukan benar-benar sebuah contoh dari apa yang Anda cari, tetapi saya melihat ini begitu sering bahwa beruang menyebutkan: Salah satu cara terbaik untuk mempercepat kinerja dari script jQuery Anda ke cache jQuery objek, dan / atau menggunakan chaining:

// poor
$(this).animate({'opacity':'0'}, function() { $(this).remove(); });

// excellent
var element = $(this);
element.animate({'opacity':'0'}, function() { element.remove(); });

// poor
$('.something').load('url');
$('.something').show();

// excellent
var something = $('#container').children('p.something');
something.load('url').show();

Saya menemukan ada tumpang tindih antara JS dan JQ. Kode yang Anda tunjukkan adalah contoh yang bagus untuk itu. Terus terang, alasan terbaik untuk menggunakan JQ over JS hanyalah kompatibilitas browser. Saya selalu condong ke JQ, bahkan jika saya bisa mencapai sesuatu di JS.

Ini adalah pandangan pribadi saya, tetapi karena jQuery adalah JavaScript, saya pikir secara teoritis tidak dapat melakukan lebih baik daripada vanilla JS.

Tetapi secara praktis ini mungkin berkinerja lebih baik daripada JS tulisan tangan, karena kode tulisan tangan seseorang mungkin tidak seefisien jQuery.

Intinya - untuk hal-hal kecil saya cenderung menggunakan vanilla JS, untuk proyek intensif JS Saya suka menggunakan jQuery dan tidak menemukan kembali roda - ini juga lebih produktif.

Daftar properti langsung jawaban pertama dari this sebagai elemen DOM cukup lengkap.

Anda mungkin juga tertarik untuk mengenal beberapa orang lain.

Saat ini adalah dokumen:

• this.forms untuk mendapatkan HTMLCollection formulir dokumen saat ini,
• this.anchorsuntuk mendapatkan HTMLCollectionsemua HTMLAnchorElementsdengan nameyang ditetapkan,
• this.linksuntuk mendapatkan HTMLCollectionsemua HTMLAnchorElements dengan hrefmenjadi set,
• this.imagesuntuk mendapatkan HTMLCollectionsemua dari HTMLImageElementitu
• dan sama dengan applet yang sudah usang seperti this.applets

Ketika Anda bekerja dengan document.forms, document.forms[formNameOrId]dapatkan formulir yang dinamai atau diidentifikasi.

Saat ini formulir:

• this[inputNameOrId] untuk mendapatkan bidang yang dinamai atau diidentifikasi

Saat ini adalah bidang formulir:

• this.type untuk mendapatkan jenis bidang

Saat mempelajari penyeleksi jQuery, kita sering melewatkan pembelajaran properti elemen HTML yang sudah ada, yang sangat cepat diakses.

Seperti biasa aku datang terlambat ke pesta ini.

Bukan fungsionalitas tambahan yang membuat saya memutuskan untuk menggunakan jQuery, semenarik itu. Setelah semua tidak ada yang menghentikan Anda dari menulis fungsi Anda sendiri.

Itu adalah fakta bahwa ada begitu banyak trik untuk dipelajari ketika memodifikasi DOM untuk menghindari kebocoran memori (saya berbicara tentang Anda yaitu IE). Untuk memiliki satu sumber daya pusat yang mengelola semua masalah semacam itu untuk saya, ditulis oleh orang-orang yang jauh lebih baik daripada JS coders daripada yang pernah saya miliki, yang terus ditinjau, direvisi, dan diuji adalah tuhan kirim.

Saya kira ini semacam jatuh di bawah dukungan / abstraksi argumen lintas browser.

Dan tentu saja jQuery tidak menghalangi penggunaan JS lurus saat Anda membutuhkannya. Saya selalu merasa keduanya tampak bekerja bersama dengan mulus.

Tentu saja jika browser Anda tidak didukung oleh jQuery atau Anda mendukung lingkungan low-end (ponsel yang lebih lama?) Maka file .js yang besar mungkin menjadi masalah. Ingat ketika jQuery dulu kecil?

Tetapi biasanya perbedaan kinerja bukan masalah yang memprihatinkan. Itu hanya harus cukup cepat. Dengan siklus CPU Gigahertz yang akan terbuang setiap detik, saya lebih peduli dengan kinerja coders saya, satu-satunya sumber daya pengembangan yang tidak berlipat ganda daya setiap 18 bulan.

Yang mengatakan saya sedang mencari masalah aksesibilitas dan tampaknya .innerHTML sedikit tidak, tidak dengan itu. jQuery tentu saja tergantung pada .innerHTML, jadi sekarang saya sedang mencari kerangka kerja yang akan tergantung pada metode yang agak membosankan yang diizinkan. Dan saya bisa membayangkan kerangka kerja seperti itu akan berjalan lebih lambat daripada jQuery, tetapi selama kinerjanya cukup baik, saya akan senang.

Ini jawaban non-teknis - banyak pekerjaan mungkin tidak mengizinkan perpustakaan tertentu, seperti jQuery.

Faktanya, Faktanya, Google tidak mengizinkan jQuery dalam salah satu kodenya (atau Bereaksi, karena itu milik Facebook), yang mungkin belum Anda ketahui sampai pewawancara berkata, "Maaf, tapi Anda tidak bisa menggunakan jQuery, itu tidak ada di daftar yang disetujui di XYZ Corporation ". JavaScript Vanilla benar-benar berfungsi di mana-mana, setiap saat, dan tidak akan pernah memberi Anda masalah ini. Jika Anda mengandalkan perpustakaan ya Anda mendapatkan kecepatan dan kemudahan, tetapi Anda kehilangan universalitas.

Juga, berbicara tentang wawancara, kelemahan lainnya adalah bahwa jika Anda mengatakan Anda perlu menggunakan perpustakaan untuk menyelesaikan masalah JavaScript selama kuis kode, itu muncul seolah-olah Anda tidak benar-benar memahami masalah, yang terlihat agak buruk. Sedangkan jika Anda menyelesaikannya dalam JavaScript vanilla mentah itu menunjukkan bahwa Anda benar-benar mengerti dan dapat menyelesaikan setiap bagian dari masalah apa pun yang mereka lempar di depan Anda.

$(this)berbeda dengan this:

Dengan menggunakan $(this)Anda memastikan prototipe jQuery sedang diteruskan ke objek.