Clever Geek Handbook

Beberapa Javascript sederhana dapat melakukan banyak hal

Saya tidak pernah bekerja sebagai pengembang front-end yang profesional, dan meskipun saya telah menulis HTML / CSS / JS untuk proyek sampingan kecil selama 15 tahun, semua proyek itu cukup kecil. Kebetulan saya belum menulis dalam Javascript selama bertahun-tahun di antara proyek-proyek ini, dan seringkali saya tidak yakin apakah saya melakukan semuanya dengan benar.



Ini adalah sebagian alasan mengapa saya sering menggunakan perpustakaan! Sepuluh tahun yang lalu, saya menggunakan jQuery, dan sejak 2017, saya telah banyak menggunakan vue.js untuk proyek kecil saya (Anda dapat melihat game pencari ranjau kecil yang saya buat sebagai pengantar Vue).



Tapi minggu lalu, untuk pertama kalinya dalam waktu yang lama, saya menulis Javascript sederhana tanpa perpustakaan, dan itu menyenangkan, jadi saya ingin berbicara sedikit tentangnya!



Bereksperimen dengan Javascript biasa



Saya sangat suka Vue. Tetapi minggu lalu, ketika saya mulai mengembangkan https://questions.wizardzines.com , saya memiliki batasan yang sedikit berbeda dari biasanya - saya ingin menggunakan HTML yang sama untuk membuat PDF (dengan Prince ) dan membuat versi interaktif pertanyaan.



Saya benar-benar tidak melihat bagaimana ini mungkin dengan Vue (karena Vue ingin membuat semua HTML sendiri) dan karena itu adalah proyek kecil saya memutuskan untuk mencoba menulisnya dalam Javascript biasa tanpa perpustakaan - cukup tulis beberapa HTML / CSS dan tambahkan satu <script src="js/script.js"> </script>.



Saya belum melakukan ini selama beberapa waktu, dan sepanjang jalan saya belajar beberapa hal yang akan membuat proses lebih mudah daripada yang saya pikirkan ketika saya mulai.



Kami melakukan hampir semua hal dengan menambahkan dan menghapus kelas CSS



Saya memutuskan untuk mengimplementasikan hampir semua UI hanya dengan menambahkan dan menghapus kelas CSS dan menggunakan transisi CSS jika saya ingin menghidupkan transisi.



Berikut adalah contoh kecil di mana mengklik tombol nextuntuk pertanyaan menambahkan kelas doneke div induk. 



div.querySelector('.next-question').onclick = function () {
    show_next_row();
    this.parentElement.parentElement.classList.add('done');
}


Itu bekerja dengan cukup baik. CSS saya, seperti biasa, sedikit kacau tetapi tampaknya dapat dikelola.



Menambah / Menghapus Kelas CSS Menggunakan .classList



Saya mulai dengan kelas mengedit sebagai berikut: x.className = 'new list of classes'. Meskipun ini agak kotor, dan saya bertanya-tanya apakah ada cara yang lebih baik. Dan dia!



Kelas CSS dapat ditambahkan seperti ini: 



let x = document.querySelector('div');
x.classList.add('hi');
x.classList.remove('hi');


element.classList.remove('hi') - Ini jauh lebih bersih daripada metode saya sebelumnya.



Temukan elemen menggunakan document.querySelectorAll



Ketika saya mulai belajar jQuery, saya ingat berpikir bahwa jika Anda perlu dengan mudah menemukan sesuatu di DOM, Anda perlu menggunakan jQuery (misalnya $('.class')). Saya baru belajar minggu ini bahwa Anda bisa menulis saja document.querySelectorAll('.some-class'), dan kemudian Anda tidak harus bergantung pada perpustakaan mana pun!



Saya jadi penasaran ketika diperkenalkan querySelectorAll. Saya googled sedikit, dan sepertinya Selectors API dibuat antara 2008 dan 2013 - Saya menemukan pesan dari penulis jQuery yang membahas penerapan yang diusulkan pada 2008, dan sebuah posting blog dari 2011 yang mengatakan bahwa Itu ada di semua browser utama pada saat itu, jadi mungkin tidak ada ketika saya mulai menggunakan jQuery, tapi itu pasti ada untuk beberapa waktu :)



Pasang .innerHTML



Di satu tempat, saya ingin mengubah konten HTML suatu tombol. Membuat elemen DOM menggunakan document.createElementagak membosankan, jadi saya mencoba untuk meminimalkan pekerjaan dan alih-alih mengatur .innerHTMLstring HTML untuk yang benar: 



  button.innerHTML = `<i class="icon-lightbulb"></i>I learned something!
    <object data="/confetti.svg" width="30" height = "30"> </object>
    `;


Menggulir halaman menggunakan .scrollIntoView



Hal lucu terakhir yang saya ketahui tentang ini .scrollIntoView. Saya ingin menggulir secara otomatis ke pertanyaan berikutnya ketika seseorang mengklik tombol Pertanyaan Selanjutnya. Ternyata ini hanya satu baris kode: 



row.classList.add('revealed');
row.scrollIntoView({behavior: 'smooth', block: 'center'});


Contoh lain dari vanilla JS: peekobot



Contoh kecil lain dari perpustakaan JS sederhana yang saya temukan bagus adalah peekobot , yang merupakan antarmuka chatbot kecil yang terdiri dari 100 baris JS / CSS.



Seperti yang dapat Anda lihat dari Javascript-nya , ia menggunakan beberapa pola yang serupa - banyak .classList.add, beberapa menambahkan elemen ke DOM, beberapa .querySelectorAll.



Dari sumber peekobot, saya belajar tentang elemen .closest , yang menemukan leluhur terdekat yang cocok dengan pemilih yang diberikan. Sepertinya ini akan menjadi cara yang baik untuk menghilangkan beberapa .parentElement.parentElementyang saya tulis di Javascript saya, yang sepertinya agak rapuh.



Javascript sederhana dapat melakukan banyak hal!



Saya sangat terkejut dengan seberapa banyak yang saya lakukan dengan JS sederhana. Saya akhirnya menulis sekitar 50 baris JS yang melakukan semua yang ingin saya lakukan, dan sedikit lagi untuk mengumpulkan beberapa metrik anonim tentang pembelajaran pengguna.



Seperti biasa dengan posting front-end saya, ini tidak harus menjadi saran pengembangan front-end yang serius. Tujuan saya adalah menulis situs web kecil dengan kurang dari 200 baris Javascript yang pada dasarnya berfungsi. Jika Anda juga berada di dunia frontend, saya harap ini sedikit membantu!


More articles:


All Articles