Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. jQuery

Cara Membangun Pengalaman Gulir Tanpa Batas Dengan API Web Riwayat

by
Difficulty:AdvancedLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Ridho Anbia Habibullah (you can also view the original English article)

Dalam tutorial ini kami akan memperkuat kemampuan API Web Sejarah kami. Kami akan membuat pola UX di Web yang dicintai dan dibenci dengan ukuran yang sama: pengguliran tanpa batas.

Pengguliran tak terbatas adalah pola antarmuka yang memuat konten baru saat kami mencapai akhir halaman web tertentu. Pengguliran tak terbatas dapat diperdebatkan mempertahankan keterlibatan pengguna saat diterapkan dengan penuh pemikiran; beberapa contoh terbaik berada di platform sosial seperti Facebook, Twitter, dan Pinterest.

Perlu dicatat, bagaimanapun, bahwa kita mengambil hal-hal yang signifikan dari apa yang kami bangun di tutorial kami sebelumnya, Lovely, Smooth Page Transitions With the History Web API. Dalam tutorial ini kita akan berurusan dengan interaksi gulir pengguna, yang dapat terjadi pada tingkat yang sangat sering. Jika kita tidak berhati-hati dengan kode kita, pada gilirannya akan berdampak buruk pada kinerja situs web kita. Pastikan Anda membaca tutorial sebelumnya sebelum mencoba yang satu ini, hanya untuk memberi Anda pemahaman yang tepat tentang apa yang sedang kami lakukan.

Namun, jika Anda senang dengan ide tantangan, kencangkan sabuk pengaman Anda, bersiaplah, dan mari kita mulai!

Membangun Demo Website

Situs kami adalah blog statis. Anda dapat membuatnya dari HTML biasa, atau memanfaatkan generator situs statis seperti Jekyll, Middleman, atau Hexo. Demo kami untuk tutorial ini terlihat sebagai berikut:

The website post
Putih tua polos.

Ada beberapa hal yang berkaitan dengan struktur HTML yang membutuhkan perhatian Anda.

  1. Seperti yang Anda lihat dari cuplikan kode di atas, artikel harus dibungkus dalam elemen HTML dengan ID unik. Anda dapat menggunakan div atau elemen section , tanpa batasan dalam menamai id untuk elemen.
  2. Selain itu, pada artikel itu sendiri, Anda perlu menambahkan atribut data-artikel-id yang berisi nomor id yang sesuai dari artikel tersebut.

Jangan ragu untuk menguraikan dalam hal gaya situs web; membuatnya lebih berwarna, menarik, atau menambahkan lebih banyak konten.

Muat JavaScript

Untuk memulainya, muat pustaka JavaScript berikut dalam urutan berikut ke setiap halaman blog Anda.

  • jquery.js: perpustakaan yang akan kita gunakan untuk memilih elemen, menambahkan konten baru, menambahkan kelas baru, dan melakukan permintaan AJAX.
  • history.js: polyfill yang mengguncang API riwayat asli dari browser.

Plugin Custom jQuery kami

Selain kedua ini, kita perlu memuat file JavaScript kita sendiri di mana kita dapat menulis skrip untuk melakukan pengguliran tak terbatas. Pendekatan yang akan kami ambil adalah dengan membungkus JavaScript kami ke dalam plugin jQuery, daripada menulisnya langsung seperti yang telah kami lakukan di tutorial sebelumnya.

Kami akan memulai plugin dengan jQuery Plugin Boilerplate. Ini mirip dengan Boilerplate HTML5 karena menyediakan kumpulan templat, pola, dan praktik terbaik untuk membangun plugin jQuery.

Unduh Boilerplate, letakkan di direktori situs web Anda tempat semua file JavaScript berada (seperti / aset / js /) dan ubah nama file menjadi 'keepscrolling.jquery.js' (Nama ini terinspirasi oleh Dory dari Finding Nemo dan garis terkenalnya “Keep Swimming”).

Plugin akan memungkinkan kami untuk memperkenalkan fleksibilitas dengan Opsi atau Pengaturan.

Mengamati Struktur Plugin jQuery

Menulis plugin jQuery membutuhkan cara berpikir yang sedikit berbeda, jadi pertama-tama kita akan mempelajari bagaimana susunan jQuery kami terstruktur sebelum kami menambahkan kode apa pun. Seperti yang Anda lihat di bawah ini, saya telah membagi kode menjadi empat bagian:

  1. Di bagian pertama kode, kami menetapkan nama plugin kami, keepScrolling, dengan 'camel case' sesuai dengan konvensi penamaan umum JavaScript. Kami juga memiliki variabel, default, yang akan berisi pengaturan default plugin.
  2. Selanjutnya, kami memiliki fungsi utama plugin, Plugin (). Fungsi ini dapat dibandingkan dengan 'konstruktor' yang, dalam hal ini, adalah untuk menginisialisasi plugin dan menggabungkan pengaturan default dengan apa pun yang dilewatkan ketika instantiating plugin.
  3. Bagian ketiga adalah di mana kita akan menyusun fungsi kita sendiri untuk melayani fungsi pengguliran tak terbatas.
  4. Terakhir, bagian keempat adalah yang membungkus semuanya menjadi sebuah plugin jQuery.

Dengan semua set ini, kita sekarang dapat menulis JavaScript kita. Dan kami memulai dengan menentukan opsi default plugin kami.

Pilihan

Seperti yang Anda lihat di atas, kami telah menetapkan tiga opsi:

  • floor: pemilih id - seperti #floor atau #footer - yang kami anggap sebagai akhir dari situs web atau konten. Biasanya, itu akan menjadi footer situs.
  • artikel: pemilih kelas yang membungkus artikel.
  • data: karena kami tidak memiliki akses ke API eksternal apa pun (situs web kami statis) kami harus mengirimkan kumpulan data artikel seperti URL artikel, ID, dan judul dalam format JSON sebagai argumen opsi ini.

Fungsi

Di sini kita memiliki init (). Dalam fungsi ini, kami akan menambahkan sejumlah fungsi yang harus dijalankan segera selama inisialisasi situs. Misalnya, kami memilih lantai situs.

Ada juga beberapa fungsi yang akan kita jalankan di luar inisialisasi. Kami menambahkan fungsi-fungsi ini untuk membuat dan menambahkan mereka setelah fungsi init.

Kumpulan fungsi pertama yang akan kita tulis adalah yang kita gunakan untuk mengambil atau mengembalikan 'sesuatu'; apa pun dari String, Objek, atau Nomor yang akan dapat digunakan kembali di seluruh fungsi lain dalam plugin. Ini termasuk hal-hal untuk:

Dapatkan semua artikel di halaman:

Dapatkan alamat artikel. Di WordPress, ini dikenal sebagai  “post slug”.

Dapatkan id dan alamat artikel selanjutnya untuk diambil.

Berikut ini adalah fungsi utilitas dari plugin; sebuah fungsi yang bertanggung jawab untuk melakukan satu “thing” tertentu. Ini termasuk:

Fungsi yang memberi tahu apakah suatu elemen memasuki area pandang. Kami menggunakannya terutama untuk mengetahui apakah 'lantai' situs yang ditentukan terlihat dalam viewport.

Fungsi yang menghentikan eksekusi fungsi; dikenal sebagai debounce. Seperti yang disebutkan sebelumnya, kita akan berurusan dengan aktivitas pengguliran pengguna yang akan terjadi pada frekuensi yang sangat sering. Dengan demikian fungsi dalam acara gulir akan sering berjalan, setelah pengguna menggulir, yang akan mengubah pengalaman bergulir di situs lamban atau tertinggal.

Fungsi debounce di atas akan mengurangi frekuensi eksekusi. Ini akan menunggu waktu yang ditentukan, melalui parameter menunggu, setelah pengguna berhenti menggulir sebelum menjalankan fungsi.

Suatu fungsi yang menentukan apakah akan melanjutkan atau membatalkan suatu operasi.

Kami akan menggunakan fungsi utilitas sebelumnya, isProceed (), untuk memeriksa apakah semua kondisi terpenuhi untuk melanjutkan menarik keluar konten baru. Jika demikian, fungsi yang mengikuti akan berjalan, mengambil konten baru dan menambahkannya setelah artikel terakhir.

Tambahkan fungsi ini di dalam init. Jadi, fungsi akan berjalan segera setelah plugin diinisialisasi, dan kemudian mengambil konten baru ketika kondisi terpenuhi.

Selanjutnya, kita akan menambahkan fungsi untuk mengubah sejarah browser dengan API Web Sejarah. Fungsi khusus ini agak lebih kompleks daripada fungsi-fungsi sebelumnya. Bagian yang sulit di sini adalah kapan tepatnya kita harus mengubah sejarah selama gulir pengguna, judul dokumen, serta URL. Berikut ini adalah ilustrasi untuk membantu menyederhanakan ide di balik fungsi:

Seperti yang Anda lihat dari gambar, kami memiliki tiga baris:  “roof-line”, “mid-line”, dan “floor-line” yang menggambarkan posisi artikel dalam viewport.  Gambar menunjukkan bahwa bagian bawah artikel pertama, serta bagian atas artikel kedua, sekarang berada di garis tengah. Tidak spesifik maksud pengguna untuk artikel yang mereka lihat; apakah pos pertama atau pos kedua? Oleh karena itu, kami tidak akan mengubah riwayat peramban ketika dua artikel berada pada posisi ini.

Kami akan merekam sejarah ke posting berikutnya ketika bagian atas artikel mencapai 'garis atap', karena sebagian besar bagian terlihat dari viewport.

Kami merekam sejarah posting sebelumnya ketika bagian bawahnya menyentuh 'garis-lantai', sama halnya, karena sekarang mengambil sebagian besar bagian yang terlihat dari viewport.

Ini adalah kode “sementara” yang perlu Anda tambahkan:

Terakhir, kita membuat fungsi yang akan menjalankan fetch () dan history () ketika pengguna menggulir halaman. Untuk melakukannya kita membuat fungsi baru yang disebut scroller (), dan menjalankannya pada inisialisasi plugin.

Dan seperti yang Anda lihat di atas, kami menolaknya karena keduanya melakukan AJAX dan mengubah riwayat browser adalah operasi yang mahal.

Menambahkan konten pengganti

Ini opsional, tetapi disarankan untuk menghormati pengalaman pengguna. Placeholder memberikan umpan balik kepada pengguna, menandakan bahwa artikel baru sedang dalam perjalanan.

Pertama, kami membuat template placeholder. Biasanya jenis template ini diletakkan setelah footer situs.

Perlu diingat bahwa artikel placeholder, strukturnya, harus menyerupai konten asli blog Anda. Sesuaikan struktur HTML yang sesuai.

Gaya placeholder lebih sederhana. Ini terdiri dari semua gaya dasar untuk meletakkannya seperti artikel yang sebenarnya, animasikeyframe yang mensimulasikan pengertian pemuatan, dan gaya untuk mengubah visibilitas (placeholder awalnya tersembunyi; ini hanya ditampilkan ketika elemen induk memiliki kelas pengambilan).

Kemudian kami memperbarui beberapa baris untuk menunjukkan placeholder selama permintaan AJAX, sebagai berikut.

Begitulah cara kami menangani placeholder! Plugin kami selesai, dan inilah saatnya untuk menyebarkan plugin.

Deployment

Menerapkan plugin cukup mudah. Kami menetapkan elemen yang membungkus artikel blog kami, dan memanggil plugin kami dengan opsi yang ditetapkan, sebagai berikut.

Gulungan tak terbatas sekarang harus berfungsi.

Peringatan: Tombol Kembali

Dalam tutorial ini, kami telah membangun pengalaman gulir tanpa batas; sesuatu yang biasa kita lihat di situs berita seperti Quartz, TechInAsia, dan di banyak aplikasi seluler.

Meskipun terbukti menjadi cara yang efektif untuk mempertahankan keterlibatan pengguna, itu juga memiliki sisi negatif: itu melanggar tombol 'Kembali' di browser. Ketika Anda mengeklik tombol, itu tidak selalu secara akurat menggulir Anda kembali ke konten atau halaman yang dikunjungi sebelumnya.

Situs web mengatasi masalah ini dengan berbagai cara; Quartz, misalnya, akan mengarahkan Anda ke URL yang dirujuk; URL yang sebelumnya Anda kunjungi, tetapi bukan yang tercatat melalui API Riwayat Web. TechInAsia hanya Anda akan kembali ke homepage.

Membungkus

Tutorial ini panjang, mencakup banyak hal! Beberapa di antaranya mudah dimengerti, sementara beberapa bagian mungkin tidak begitu mudah dicerna. Untuk membantu, saya telah menyusun daftar referensi sebagai suplemen untuk artikel ini.

Terakhir, lihat sumber kode lengkap dan lihat demo!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.