Opsi migrasi dari jQuery ke javascript murni

Pustaka JQuery dibuat pada 2006 untuk menebus fungsionalitas Javascript yang hilang. Sejak itu, yang terakhir telah cukup maju dalam pengembangannya sehingga pengembang dapat melakukannya tanpa jQuery, masalah utamanya adalah kinerja.



Pada Habré ada beberapa artikel dengan pengukuran objektif "penghambatan" JQuery pada permintaan pemilih.
// jQuery 2.0 var c = $("#comments .comment"); 
4,649 ms
 // jQuery 2.0 var c = $(".comment"); 
3.437 ms
 // native querySelectorAll var c = document.querySelectorAll("#comments .comment"); 
1,362 ms
 // native querySelectorAll var c = document.querySelectorAll(".comment"); 
1.168 ms
 // native getElementById / getElementsByClassName var n = document.getElementById("comments"); var c = n.getElementsByClassName("comment"); 
107 ms
 // native getElementsByClassName var c = document.getElementsByClassName("comment"); 
75 ms
(berjalan dalam siklus 10.000 kali)

Ada cukup banyak deskripsi yang baik tentang analog dari fungsi jQuery pada Javascript-e murni pada jaringan - misalnya, di sini .

Tetapi kekuatan dari jQuery terletak pada keringkasan dan keindahan dari ekspresinya. Bahkan secara psikologis sulit untuk menulis ulang kode yang ada, mengubah elegan $ () menjadi konstruksi multi-line.

Mari kita coba meninggalkan bahasa JQuery sejauh mungkin, [sebagian] menggantinya sendiri. Untuk melakukan ini, kita hanya perlu mendefinisikan kembali fungsi $ (), atau mengganti (yang lebih baik) dengan kita sendiri - biarlah $ jqr (). Ini juga akan mengembalikan objek, tetapi sudah "asli" dan tidak dibebani dengan fungsi jQuery yang tidak kita butuhkan.

Contoh kode:

 <html> <body> <p id="message"></p> </body> </html> 

Kode JQuery:

 $("#message").html("Hello world!"); 

Perubahan ke:

 $jqr("#message").html("Hello world!"); // JQuery Replacement function $jqr(sel) { return new JQR(sel); } class JQR { constructor(sel) { this.sel = sel; this.elements = document.querySelectorAll(sel); } html(str) { for (var i = 0; i < this.elements.length; i++) { this.elements[i].innerHTML = str; } } } 

Diinginkan untuk mem-parsing sel di konstruktor kelas agar lebih efisien menggunakan querySelectorAll (), getElementsByClassName () dan getElementById ().

Dengan demikian, kita dapat mengimplementasikan dalam kelas JQR hanya fungsi yang kita butuhkan, tanpa melampaui standar Javascript dan tanpa menyentuh banyak kode yang ada.

Bahkan tidak perlu untuk sepenuhnya menghilangkan jQuery - optimasi parsial sudah akan membuahkan hasil.

Source: https://habr.com/ru/post/id419471/


All Articles