𝗕𝗶𝗻𝗮 𝗪𝗶𝗱𝗴𝗲𝘁 𝗦𝘂𝗮𝗽𝗮𝗻 𝗥𝗦𝗦 𝗠𝘂𝗱𝗮𝗵 𝗱𝗲𝗻𝗴𝗮𝗻 𝗩𝗮𝗻𝗶𝗹𝗹𝗮 𝗝𝗦
RSS ialah format lama. Ia kekal sebagai salah satu cara terbaik untuk berkongsi kandungan di web.
Ramai pembangun menggunakan framework yang berat untuk memaparkan suapan RSS. Anda tidak memerlukannya. RSS hanyalah XML. Pelayar anda boleh membaca XML secara asli tanpa perpustakaan tambahan.
Anda boleh membina widget RSS yang kemas hanya dengan menggunakan vanilla JavaScript dan CSS.
Berikut adalah cara untuk melakukannya:
- Gunakan Fetch API untuk mendapatkan data XML.
- Gunakan DOMParser untuk menukarkan XML tersebut kepada dokumen yang boleh dicari.
- Petakan data ke dalam objek JavaScript.
- Paparkan data ke dalam kad HTML.
Berhati-hati dengan ralat CORS. Jika pelayan menyekat permintaan anda, pelayar akan menghentikannya. Anda boleh menggunakan proksi seperti allorigins.win untuk ujian. Untuk projek sebenar, gunakan Cloudflare Worker untuk mengendalikan permintaan.
Widget ini berfungsi seperti ini:
• Ambil (Fetch) URL suapan. • Analisis (Parse) tajuk dan penerangan saluran. • Gelung (Loop) setiap item untuk mendapatkan tajuk, pautan, dan tarikh. • Cipta grid kad yang responsif.
Anda juga boleh menambah penapis kategori. Ini membolehkan pengguna anda memilih topik seperti Teknologi atau Makanan.
Kaedah ini berfungsi dengan mana-mana suapan RSS standard. Anda boleh menambah suapan teknologi atau suapan podcast ke halaman yang sama. Setiap satunya berfungsi secara bebas.
Langkah seterusnya untuk projek anda:
- Tambah penyegaran automatik (auto-refresh) supaya suapan sentiasa terkini.
- Tambah bar carian untuk mencari hantaran tertentu.
- Gunakan sessionStorage untuk menyimpan cache data dan menjimatkan kelajuan.
- Gunakan pemboleh ubah CSS untuk menambah mod gelap.
Berhenti menambah beban (bloat) pada projek anda. Gunakan alatan yang sudah sedia ada dalam pelayar.
Sumber: https://dev.to/debate_me_af4b65ae011518f/build-a-simple-rss-feed-widget-in-vanilla-javascript-1803