JavaScript dan HTML vanilla. Tidak ada kerangka kerja. Tidak ada perpustakaan. Tidak masalah

Apakah Anda menggunakan Vue, React, Angular atau Svelte untuk membuat aplikasi? Saya menggunakan, dan jika Anda juga, dan saya yakin Anda tidak harus menulis aplikasi yang menampilkan informasi tanpa alat luar biasa ini.

Sekali waktu, banyak dari kita menulis aplikasi web hanya menggunakan alat yang dibangun ke dalam browser. Meskipun alat-alat modern membantu kita mengabaikan hal ini (dan memiliki banyak keunggulan lainnya), tetap bermanfaat untuk mengetahui apa yang terjadi di balik tudung mereka.

Saat menampilkan sejumlah kecil informasi, Anda mungkin perlu menggunakan HTML, JavaScript, dan DOM tanpa alat apa pun. Baru-baru ini saya menulis beberapa contoh dasar yang menggambarkan dasar-dasar pengembangan web dan membantu dalam mempelajari prinsip-prinsip DOM, HTML, JavaScript, dan browser. Pengalaman ini memungkinkan saya untuk memahami bahwa pengembang lain - mungkin Anda - akan senang mengingat cara menampilkan informasi tanpa menggunakan perpustakaan.

Ini juga menyenangkan, bermanfaat dan membantu untuk memahami nilai perpustakaan modern dan kerangka kerja yang banyak membantu kami.

Mari kita lihat berbagai cara untuk menampilkan informasi. Dan simpan dokumentasi ini berguna!

Contoh aplikasi

Berikut adalah aplikasi yang saya tunjukkan dalam artikel saya. Ini mengekstrak daftar karakter dan menampilkannya ketika tombol ditekan. Aplikasi juga menampilkan bilah progres saat mengambil daftar.

Alat-alatnya

Penting untuk memilih alat yang tepat. Dalam latihan ini, kita perlu menampilkan informasi di browser menggunakan alat khusus yang tersedia untuk kita semua. Tidak ada kerangka kerja. Tidak ada perpustakaan. Tidak masalah

Kami hanya akan menggunakan HTML, TypeScript / JavaScript, CSS dan DOM berbasis browser (model objek dokumen). Mari kita lihat bagaimana HTML dapat ditampilkan.

Di sini Anda dapat membaca tentang cara menulis TypeScript menggunakan VS Code .

Seperti yang mungkin Anda perhatikan, saya menggunakan TypeScript . Fitur himpunannya sangat membantu untuk menghindari bug, dan saya memanfaatkan kemampuannya untuk beralih ke format JavaScript apa pun. Jika mau, Anda dapat menggunakan JavaScript murni. Di masa depan saya akan menulis artikel tentang cara mengubah posisi TypeScript .

Pendekatannya

Aplikasi kami menampilkan bilah kemajuan dan daftar karakter. Mari kita mulai dengan indikator paling sederhana - dan pertimbangkan berbagai cara untuk menampilkannya. Kemudian kita akan masuk ke daftar dan melihat bagaimana situasinya berubah jika lebih banyak informasi perlu ditampilkan.

Tampilan Bilah Kemajuan

Indikator harus ditampilkan ketika aplikasi memutuskan karakter mana yang harus didaftar. Artinya, pada awalnya indikator tidak terlihat, kemudian pengguna menekan tombol pembaruan, indikator muncul, dan menghilang lagi setelah daftar ditampilkan.

Semua metode yang dijelaskan di bawah ini membutuhkan penempatan elemen saat dibuat. Misalnya, indikator dan daftar karakter harus ditempatkan di suatu tempat. Salah satu solusinya adalah merujuk elemen yang sudah ada yang mengandungnya. Atau Anda bisa merujuk ke elemen dan menggantinya dengan data baru.

Indikator tampilan menggunakan HTML internal

Membuat HTML dan memasukkannya ke dalam elemen lain adalah solusi tertua, tetapi berhasil! Pilih elemen di mana indikator muncul, dan kemudian innerHtml properti innerHtml untuk data baru. Harap perhatikan bahwa kami juga mencoba membuat kode dapat dibaca dengan menggunakan string pola untuk menjangkau beberapa baris.

 const heroPlaceholder = document.querySelector('.hero-list'); heroPlaceholder.innerHTML = ` <progress class="hero-list progress is-medium is-info" max=^_^quotdquot^_^ ></progress> `; 

Sederhana Mudah Mengapa ini tidak bisa dikatakan tentang kode apa pun? Nah lihat seberapa cepat bagian ini menyelesaikan masalah!

Anda mungkin sudah memperhatikan betapa rentan kode ini. Satu kesalahan dalam HTML - dan hanya itu! Kami punya masalah. Dan apakah itu benar-benar dapat dibaca? Ya, memang, tapi apa yang terjadi ketika HTML terlalu rumit? Ketika Anda memiliki 20 baris kode dengan kelas, atribut, dan nilai ... well, Anda mengerti maksudnya. Ya, solusinya tidak sempurna. Tetapi dengan sejumlah kecil HTML, ini berfungsi dengan baik, dan saya sarankan semua penggemar menulis semuanya dalam satu baris untuk melihatnya.

Perhatikan juga bagaimana konten sebaris dapat memengaruhi pembacaan dan stabilitas kode. Misalnya, jika Anda perlu menambahkan informasi di dalam indikator untuk mengubah pesan unduhan, Anda dapat melakukan ini dengan menggunakan pengganti, misalnya, ${message} . Ini tidak baik atau buruk, itu hanya menambah kenyamanan saat membuat string template besar.

Satu innerHTML terakhir: innerHTML dapat memengaruhi kecepatan tampilan. Saya tidak tertarik pada optimasi berlebihan, tetapi memeriksa kinerja lebih baik, karena innerHTML dapat menyebabkan rendering dan rendering siklus tata letak di browser. Ingatlah selalu.

Bilah progres menggunakan DOM API

Anda dapat mengurangi kekakuan garis panjang menggunakan DOM API. Kami membuat elemen, menambahkan kelas dan atribut yang diperlukan, mengatur nilai, dan kemudian menambahkannya ke DOM.

 const heroPlaceholder = document.querySelector('.hero-list'); const progressEl = document.createElement('progress'); progressEl.classList.add('hero-list', 'progress', 'is-medium', 'is-info'); const maxAttr = document.createAttribute('max'); maxAttr.value = '100'; progressEl.setAttributeNode(maxAttr); heroPlaceholder.replaceWith(progressEl); 

Keuntungannya adalah Anda perlu menulis lebih banyak kode dan mengandalkan API. Artinya, dibandingkan dengan innerHTML , kesalahan ketik meningkatkan kemungkinan bahwa sistem akan melaporkan kesalahan yang akan membantu menemukan penyebab masalah dan menghasilkan solusi.

Dan kerugiannya adalah dibutuhkan enam baris kode untuk menampilkan informasi yang ditampilkan sebagai satu baris menggunakan innerHTML .

Apakah kode DOM API untuk menampilkan indikator lebih mudah dibaca daripada kode dengan innerHTML ? Saya akan berdebat. Tetapi bukankah ini alasan bahwa kode HTML indikator sangat pendek dan sederhana? Mungkin Jika ada 20 baris, maka innerHTML akan menjadi lebih sulit dibaca ... namun, kode DOM API juga.

Menggambar indikator menggunakan templat

Cara lain adalah dengan membuat <tmplate> dan menggunakannya untuk menyederhanakan keluaran informasi.

Buat <tmplate> dan berikan ID. Template tidak akan ditampilkan pada halaman HTML, tetapi nanti Anda dapat menautkan ke kontennya dan menggunakannya. Ini sangat berguna, Anda dapat menulis HTML di mana saja sesuai: pada halaman HTML, menggunakan semua fitur yang berguna dari editor HTML.

 <template id="progress-template"> <progress class="hero-list progress is-medium is-info" max=^_^quotdquot^_^></progress> </template> 

Kode kemudian dapat mengambil templat menggunakan metode document.importNode() dari DOM API. Bila perlu, kode dapat memanipulasi konten templat. Sekarang tambahkan konten ini ke DOM untuk menampilkan indikator.

 const heroPlaceholder = document.querySelector('.hero-list'); const template = document.getElementById('progress-template') as HTMLTemplateElement; const fetchingNode = document.importNode(template.content, true); heroPlaceholder.replaceWith(fetchingNode); 

Template adalah cara yang baik untuk membangun HTML; Saya suka karena memungkinkan Anda untuk menulis HTML di tempat yang masuk akal, dan Anda dapat melakukan lebih sedikit dengan kode TypeScript / JavaScript.

Bisakah saya mengimpor template dari file lain? Ya, tetapi dengan bantuan perpustakaan lain. Namun, sekarang kami sengaja menolak mereka. Impor HTML telah dibahas selama bertahun-tahun, tetapi seperti yang Anda lihat dari situs Can I Use , tidak semua browser modern mendukung fitur ini.

Tampilan Daftar Karakter

Sekarang mari kita bicara tentang bagaimana Anda dapat menampilkan daftar karakter menggunakan tiga teknik yang sama. Perbedaan dari membuat satu elemen HTML <prgress> dan daftar karakter adalah sekarang kita:

• tampilkan beberapa elemen HTML;
  
• tambahkan beberapa kelas;
  
• tambahkan urutan anak-anak;
  
• tampilan untuk setiap karakter banyak informasi yang sama;
  
• menampilkan teks di dalam elemen secara dinamis.
  

Tampilkan karakter menggunakan HTML internal

Saat menggunakan innerHTML , innerHTML akal untuk memulai dengan berbagai karakter dan mengulanginya. Dengan cara ini Anda dapat membuat satu baris sekaligus. Garis hanya akan berbeda dalam nama karakter dan deskripsi, yang dapat dimasukkan menggunakan garis templat. Setiap karakter dalam array menciptakan tag li , yang dikaitkan dengan array string. Akhirnya, array string dikonversi ke HTML murni, dibungkus ul dan ditugaskan ke innerHTML .

 function createListWithInnerHTML(heroes: Hero[]) { const rows = heroes.map(hero => { return `<li> <div class="card"> <div class="card-content"> <div class="content"> <div class="name">${hero.name}</div> <div class="description">${hero.description}</div> </div> </div> </div> </li>`; }); const html = `<ul>${rows.join('')}</ul>`; heroPlaceholder.innerHTML = html; 

Itu bekerja. Dan mungkin ini lebih mudah dibaca. Bagaimana dengan kinerja? Apakah sulit untuk mendeteksi (atau bahkan mungkin?) Kesalahan ketik saat mengetik kode? Untuk menghakimi kamu. Tapi jangan menarik kesimpulan sampai kita menemukan teknik lainnya.

Pemetaan karakter menggunakan DOM API

 function createListWithDOMAPI(heroes: Hero[]) { const ul = document.createElement('ul'); ul.classList.add('list', 'hero-list'); heroes.forEach(hero => { const li = document.createElement('li'); const card = document.createElement('div'); card.classList.add('card'); li.appendChild(card); const cardContent = document.createElement('div'); cardContent.classList.add('card-content'); card.appendChild(cardContent); const content = document.createElement('div'); content.classList.add('content'); cardContent.appendChild(content); const name = document.createElement('div'); name.classList.add('name'); name.textContent = hero.name; cardContent.appendChild(name); const description = document.createElement('div'); description.classList.add('description'); description.textContent = hero.description; cardContent.appendChild(description); ul.appendChild(li); }); heroPlaceholder.replaceWith(ul); } 

Tampilan Karakter dengan Templat

Daftar karakter dapat ditampilkan menggunakan templat. Untuk ini, teknik yang sama digunakan untuk menampilkan elemen <prgress> . Pertama, buat templat di halaman HTML. HTML ini akan menjadi sedikit lebih rumit daripada dengan <prgress> . Tapi ini bukan masalah. Itu hanya HTML di dalam halaman HTML, sehingga kita dapat dengan mudah memperbaiki kesalahan dan memformat dengan editor VS Code yang cantik.

 <template id="hero-template"> <li> <div class="card"> <div class="card-content"> <div class="content"> <div class="name"></div> <div class="description"></div> </div> </div> </div> </li> </template> 

Sekarang Anda dapat menulis kode untuk membuat daftar karakter. Pertama, buat ul untuk membungkus garis dengan karakter li . Sekarang Anda bisa melalui array dan menggunakan metode document.importNode() yang sama untuk menerapkan template yang sama untuk setiap karakter. Perhatikan bahwa polanya dapat digunakan kembali untuk membuat setiap baris. Itu berubah menjadi gambar sumber, yang menciptakan jumlah garis yang diperlukan.

Daftar karakter harus berisi nama dan deskripsi. Artinya, akan perlu untuk mengganti nilai-nilai spesifik di dalam templat. Untuk melakukan ini, disarankan untuk mengidentifikasi dan merujuk ke tempat-tempat di mana Anda akan memasukkan nilai-nilai ini. Dalam contoh kami, untuk mendapatkan tautan ke setiap karakter, kami menggunakan metode querySelector('your-selector') , setelah itu kami memberikan nama dan deskripsi.

 function createListWithTemplate(heroes: Hero[]) { const ul = document.createElement('ul'); ul.classList.add('list', 'hero-list'); const template = document.getElementById('hero-template') as HTMLTemplateElement; heroes.forEach((hero: Hero) => { const heroCard = document.importNode(template.content, true); heroCard.querySelector('.description').textContent = hero.description; heroCard.querySelector('.name').textContent = hero.name; ul.appendChild(heroCard); }); heroPlaceholder.replaceWith(ul); } 

Apakah templat ini lebih mudah daripada teknik lainnya? Saya merasa relatif mudah. Dari sudut pandang saya, kode ini dibangun di atas templat yang menyederhanakan pemutaran dan keterbacaan, dan juga lebih baik melindungi terhadap kesalahan.

Ringkasan

Saya tidak menyebutkan bagaimana kerangka kerja populer dan perpustakaan menampilkan informasi. Vue, React, Angular, dan Svelte membuat tugas lebih mudah dan membutuhkan lebih sedikit kode untuk ditulis. Mereka juga punya kelebihan lain. Pada artikel ini, kami hanya meneliti teknik yang relatif sederhana untuk menampilkan informasi menggunakan DOM dan HTML murni, serta TypeScript / JavaScript.

Untuk apa kita datang?

Saya harap Anda sekarang bisa membayangkan cara menampilkan informasi tanpa menggunakan perpustakaan. Apakah ada cara lain? Tentu saja Bisakah saya menulis fungsi yang menyederhanakan kode dan memungkinkannya digunakan berulang kali? Tentu saja Tetapi suatu hari Anda akan ingin bereksperimen dengan salah satu alat hebat seperti Vue, React, Angular atau Svelte.

Kerangka kerja ini melakukan banyak pekerjaan untuk kita. Anda dapat mengingat bagaimana cara menghasilkan informasi menggunakan kode DOM murni dengan JavaScript atau jQuery. Atau cara melakukannya dengan alat seperti setang atau kumis. Atau mungkin Anda tidak pernah menampilkan informasi ke DOM tanpa bantuan kerangka kerja. Anda dapat membayangkan proses apa yang terjadi di bawah kap perpustakaan dan kerangka kerja modern ketika mereka menampilkan informasi untuk Anda di layar.

Adalah baik untuk mengetahui apa yang dapat Anda lakukan dengan HTML murni, TypeScript / JavaScript, dan CSS, bahkan jika Anda menggunakan kerangka kerja yang menyelamatkan Anda semua itu.

Terlepas dari pengalaman Anda, saya berharap bahwa kunjungan singkat ini ke beberapa teknik untuk menampilkan informasi bermanfaat bagi Anda.