Penatalan Hampir Tak Terhingga dengan Sudut

Tatal tak terhingga telah wujud sejak sekian lama. Idea asas: semasa anda menatal, kandungan baharu dimuatkan di bahagian bawah, mencipta tatal yang kelihatan tidak berkesudahan. Melaksanakan ini adalah mudah, tetapi tanpa perancangan yang teliti, prestasi terjejas. Selepas beberapa pemeriksaan semula kandungan, anda boleh mempunyai ratusan elemen DOM, banyak yang tidak kelihatan. Nasib baik, corak wujud untuk mengurangkan ini, dan kami akan meneroka satu menggunakan Angular.

Ini yang kita nak elakkan.

Tatal Maya

Penatalan maya hanya memaparkan subset senarai besar pada bila-bila masa—berbeza daripada penatalan tak terhingga. Ia sesuai untuk set data yang besar yang memaparkan semuanya sekaligus adalah tidak cekap. Hanya item yang boleh dilihat (dan hampir kelihatan) dipaparkan; semasa pengguna menatal, item ditukar secara dinamik. Ini mengurangkan elemen DOM dengan ketara, meningkatkan prestasi.

Tatal maya berfungsi dengan mencipta bekas yang sepadan dengan ketinggian port pandangan. Hanya item yang boleh dilihat (termasuk penimbal) dipaparkan dalam bekas ini pada kedalaman tatal tertentu, diurus melalui CSS. Menatal mengemas kini bekas, menunjukkan item baharu dan mengalih keluar item yang tidak dapat dilihat, melaraskan kedalaman tatal. Menggabungkan ini dengan tatal tak terhingga menghasilkan senarai hampir tak terhingga tanpa penalti prestasi.

Contoh di bawah menunjukkan senarai beribu-ribu item, tetapi menghasilkan maksimum 8 sekaligus. Penatalan melaraskan ketinggian tatal CSS, mencipta ilusi senarai yang lebih panjang.

Contoh Dunia Sebenar

Mari bina aplikasi Angular mengambil media daripada API bernombor Reddit dan memaparkannya dalam senarai tatal maya. Ia akan termasuk bar carian untuk pemilihan subreddit dan penapis. Menatal ke bawah memuatkan lebih banyak kandungan. Keperluan utama kami:

1. Didorong oleh RxJS Observables dan paip async.
2. Menetapkan semula kandungan pada subreddit atau perubahan penapis, tetapi bukan pada menambahkan kandungan baharu.
3. Menyimpan kandungan sebelumnya dalam ingatan untuk menatal ke atas/bawah yang lancar tanpa panggilan API yang berlebihan.

Kami akan menggunakan pakej @angular/cdk (mengandungi komponen Skrol Maya). Pasang dengan npm i @angular/cdk.

Walaupun contoh ini menggunakan Angular, corak yang serupa boleh digunakan untuk JavaScript React, Vue atau vanila. Demo asas yang menggambarkan prinsip asas tersedia di sini.

Persediaan Perkhidmatan

Pertama sekali, kami mencipta perkhidmatan untuk mengambil kandungan daripada API Reddit menggunakan HttpClient Angular dan RxJS Observables untuk mengurus nama dan penapis subreddit. (Sesetengah kod ditinggalkan untuk ringkas; pelaksanaan lengkapnya di sini).

// ... (Omitted for brevity) ...

Kaedah pengambilan kandungan menjejaki sifat tertentu semasa permintaan data. Sifat page ditambahkan pada rentetan pertanyaan untuk memastikan kandungan baharu diambil selepas item terakhir. Kami juga menapis kandungan NSFW dan item yang tidak mempunyai petunjuk siaran. Ini memastikan hanya kandungan yang dijangkakan dipaparkan.

// ... (Omitted for brevity) ...

query$ boleh diperhatikan (sebelum ini ditinggalkan) menggabungkan aliran boleh diperhatikan yang berbeza sebelum mengambil kandungan. Operator scan menggabungkan hasil strim sebelumnya dan semasa, membina tatasusunan data yang besar merentas berbilang halaman.

Ini membolehkan penatalan yang meluas; hanya nama subreddit atau perubahan penapis yang mencetuskan pemeriksaan semula lengkap. nextPage, sifat query$, menyimpan ID item terakhir dalam set semasa, digunakan untuk menentukan halaman mana yang hendak diambil seterusnya apabila menghampiri bahagian bawah Skrol Maya.

// ... (Omitted for brevity) ...

Kuasa RxJS terletak pada menggabungkan dan memanipulasi aliran data. Ini membolehkan kami mengendalikan logik perniagaan sebelum ia mencapai komponen, memastikan komponen itu lebih bersih dan boleh digunakan semula.

Persediaan Komponen

Seterusnya, kami menyediakan komponen untuk memaparkan kandungan menggunakan CdkVirtualScrollViewport Angular. Kaedah mengendalikan penatalan berhampiran bahagian bawah port pandangan, mengambil halaman seterusnya melalui subRedditPage$ boleh diperhatikan.

// ... (Omitted for brevity) ...

Templat menggunakan paip async untuk melanggan query$. Nota: Skrol Maya menjadi lebih kompleks dengan kandungan ketinggian berubah-ubah; ketinggian item yang konsisten disyorkan untuk prestasi.

// ... (Omitted for brevity) ...

Kaedah onScroll mendapatkan lebih banyak kandungan apabila pengguna menghampiri bahagian bawah. Ia menggunakan nextPage ID (dari query$) dan memancarkan ke subRedditPage$, mencetuskan panggilan API seterusnya dan mengemas kini senarai melalui query$.

// ... (Omitted for brevity) ...

Kawalan bar carian dan tab juga disepadukan (contoh ringkas di bawah).

// ... (Omitted for brevity) ...

Kesimpulan

Ini mencipta penatal yang hampir tidak terhingga. Anda boleh mengujinya di sini. API Reddit mempunyai had kadar; anda mungkin memukul mereka semasa ujian. Untuk butiran lanjut, termasuk ciri tambahan, lihat repositori GitHub di sini.

Atas ialah kandungan terperinci Penatalan Hampir Tak Terhingga dengan Sudut. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!