Kaedah Kesan Vanila JS

Pada masa lalu, saya banyak bekerja dengan jQuery dan perkara yang saya suka tentang jQuery ialah ia menyediakan banyak kaedah berguna dengan sintaks yang mudah dan ringan. Salah satu kaedah jQuery yang paling banyak digunakan ialah kaedah kesan - yang digunakan untuk mencipta kesan animasi untuk tapak web.

Contohnya:

• sembunyi() / tunjukkan()
• togol()
• fadeIn()
• fadeOut()
• ...

W3schools menyenaraikan semua kaedah kesan JQuery di sini

Tetapi kini dengan pertumbuhan banyak perpustakaan JS, jQuery nampaknya sudah lapuk dan dalam sesetengah projek, pembangun mesti menggantikan kod jQuery dengan JS tulen.

Sangat mudah untuk mencipta fungsi bertindak sama seperti hide() / show(), cuma edit gaya paparan

element.style.display = 'block' // or none

tetapi dengan kesan yang lebih kompleks seperti fadeIn()/fadeOut(), kita perlu menulis lebih banyak kod.

Satu lagi masalah dengan kaedah kesan penulisan dalam vanilla JS ialah sintaks verbose. Anda boleh melihatnya dengan kaedah jQuery:

$(".myClass").slideDown();

Ia sangat mudah dibaca dan intuitif, anda menemui elemen dengan pemilih jQuery, dan kemudian memanggil kaedah slideDown sebagai kaedah elemen.
Kod ini melaksanakan ciri yang sama dalam vanilla JS jika anda mentakrifkan kaedah slideToggle sebelum:

const element = document.querySelector(".myClass");
slideToggle(element);

Anda menanyakan elemen dan kemudian menghantarnya ke fungsi slideToggle(), nampaknya kurang asli dan kurang boleh dibaca daripada sampel dengan jQuery.

Caranya di sini ialah menggunakan HTMLElement.prototype untuk menambah kaedah pada elemen HTML dan anda boleh menggunakan fungsi kesan sebagai kaedah elemen HTML. Untuk kesederhanaan, mari kita takrifkan kaedah hide():

HTMLElement.prototype.hide = function() {
  this.style.display = 'none'
}

document.querySelector(".myClass").hide()

Untuk tujuan penggunaan semula, saya mencipta beberapa kaedah JS vanila untuk kesan di sini. Hanya letakkannya di suatu tempat pada pangkalan kod anda dan gunakannya sebagai kaedah asli unsur HTML.

Atas ialah kandungan terperinci Kaedah Kesan Vanila JS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!