Cara Menggunakan JavaScript untuk Mengurangkan Kod HTML: Contoh Mudah

Amalan Pengekodan yang Cekap: Memanfaatkan JavaScript untuk Pembangunan Web Boleh Skala

Menulis kod yang bersih dan mudah berskala adalah penting untuk mana-mana pengaturcara. Ini amat penting dalam projek seperti laman web blog yang kandungannya sentiasa berkembang. Mengekalkan projek sedemikian hendaklah cepat dan bebas ralat, menghalang kerosakan reputasi untuk pelanggan anda. JavaScript menawarkan penyelesaian yang berkuasa untuk meningkatkan kecekapan kod dan kebolehnyahpenyapih. Artikel ini menunjukkan cara saya menggunakan JavaScript untuk menyelaraskan penyepaduan pautan media sosial dalam projek tapak web blog.

Banyak blog menyertakan pautan media sosial untuk keterlihatan dalam talian yang dipertingkatkan. Pendekatan biasa ialah memaparkan pautan ini pada setiap halaman, selalunya dalam pengaki atau bar sisi, seperti yang ditunjukkan di bawah:

Menambah pautan ini secara manual (14 baris kod dalam contoh ini) pada setiap halaman HTML adalah tidak cekap dan terdedah kepada ralat, seperti yang digambarkan di sini:

Walaupun boleh diurus dalam projek kecil, kaedah salin-dan-tampal ini mencipta kod kembung, memperlahankan masa muat halaman dan menghalang pengubahsuaian. Pertimbangkan senario pelanggan menukar pemegang Instagram mereka. Mengemas kini setiap halaman HTML secara manual adalah membosankan dan berisiko.

Penyelesaian unggul melibatkan JavaScript. Saya mencipta fungsi JavaScript untuk menambahkan pautan ini secara dinamik pada elemen <div> yang sudah ada pada semua halaman HTML (disimpan dalam pembolehubah <code>socialsPanel). Fungsi ditunjukkan di bawah:

Pendekatan ini memusatkan maklumat pautan, memudahkan kemas kini. Perubahan hanya perlu dibuat di satu lokasi, menghapuskan keperluan untuk kemas kini manual berulang merentasi banyak fail HTML. Menambah atau mengalih keluar pautan adalah sama diperkemaskan.

Kaedah ini bukan sahaja menjimatkan masa tetapi juga mengurangkan kod HTML. Daripada mengulangi 14 baris kod setiap halaman, kami hanya memanggil fungsi popSocialsPanel() pada setiap halaman, seperti yang diserlahkan di bawah:

Peningkatan kecekapan adalah ketara. Menambah 9 baris kod JavaScript menggantikan 14 baris HTML setiap halaman. Dalam projek saya, pendekatan ini telah pun menyimpan 56 baris kod, dengan tambahan 13 baris disimpan setiap halaman catatan blog baharu.

Contoh mudah ini menyerlahkan prinsip utama: membangunkan naluri untuk mengenal pasti kod berulang. Pemfaktoran semula kod sedemikian biasanya membawa kepada penyelesaian yang lebih cekap dan boleh diselenggara.

Maklum balas dan cadangan anda dialu-alukan. Sila kongsi artikel ini jika anda rasa ia membantu.

Asalnya diterbitkan di Medium for JavaScript dalam Bahasa Inggeris Biasa pada 28 September 2022