Kod #ustom Daripada Pemalam/Perpustakaan - Pameran Kesederhanaan

Ini adalah yang ketiga dalam trio kecil artikel di mana saya menunjukkan betapa cepat dan mudah anda boleh melaksanakan ciri web biasa tanpa bergantung pada perpustakaan yang berat atau rangka kerja yang rumit. Kali ini, saya mengusahakan butang "baca lagi" untuk kandungan terpotong - dengan automasi maksimum.

Jangan ragu untuk menggunakan Kod

Kodnya mudah, cuma JavaScript vanila—tiada perpustakaan, tiada sihir. Ia sangat ringan dan mudah untuk disepadukan. Ia menggunakan IntersectionObserver supaya ia tidak berjalan pada elemen sehingga ia kelihatan, menjimatkan overhed prestasi (walaupun anda mungkin mahu mengalih keluar pengoptimuman ini untuk halaman web yang lebih kecil).

https://gist.github.com/TomJPro/39e96d2cd6cbfcf908ad99273b2211a5

Temui Dunia Kesederhanaan Baru

Saya menganggap perpustakaan wujud untuk ini kerana masalahnya kelihatan rumit. Tetapi apabila saya cuba menulisnya sendiri, kepala saya terperangkap dalam idea bahawa ia memerlukan penyelesaian yang rumit-fikiran saya berbohong kepada saya! Sekarang saya yakin perpustakaan ini wujud kerana pembangun lain juga terlalu memikirkan masalah itu atau cuba menyelesaikan setiap senario yang mungkin dengan satu penyelesaian yang besar. Itu tidak boleh benar-benar berfungsi di dunia yang kita mengira milisaat.

Apabila saya menulis sekeping kod mudah pertama saya yang melakukan kerja, ia hanya 20 baris berbanding 100kb perpustakaan, dan ia lebih mudah untuk disesuaikan untuk setiap projek. Sejujurnya, rasanya seperti menemui dunia baharu.

Ingin Melihat Bagaimana Saya Membinanya?

Saya berseronok dengan strim langsung. Datang bersembang dengan saya lain kali!

Tonton Strim Langsung

Fikiran Akhir

Setelah melihat tiga ciri biasa (seperti karusel, keratan baris dengan "baca lebih lanjut", dan skrip serupa) dikodkan dalam beberapa minit sahaja (termasuk JS, HTML dan CSS), saya harap jelas bahawa anda sering melakukannya tidak memerlukan perpustakaan yang berat. Kadangkala, JavaScript lama biasa dan sedikit CSS adalah semua yang diperlukan untuk mencapai hasil yang licin dan berprestasi.

Atas ialah kandungan terperinci Kod #ustom Daripada Pemalam/Perpustakaan - Pameran Kesederhanaan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!