push state

keadaan hy-push

hy-push-state adalah komponen web yang memungkinkan Anda mengubah halaman web menjadi aplikasi web. Komponen secara dinamis memuat konten baru (sebelumnya dikenal sebagai "ajax") dan menyisipkannya ke halaman saat ini, tanpa menyebabkan Kilatan Putih, Kilatan Konten Tanpa Gaya, dll.

Ubah situs web statis menjadi aplikasi web dinamis. {:.memimpin}

hy-push-state mirip dengan pjax dan smoothState, tetapi menawarkan logika pengambilan awal yang lebih canggih dan memberi Anda kontrol lebih besar atas internalnya untuk mengaktifkan animasi transisi halaman tingkat lanjut.

hy-push-state sudah digunakan oleh ratusan situs sebagai bagian dari tema Hydejack{:.external} Jekyll.

CATATAN : Versi saat ini masih merupakan pra-rilis. API publik mungkin masih berubah dalam beberapa hal penting. {:.pesan}

Contoh

Saat melihat halaman ini di webcomponents.org, contoh di bawah ini akan ditampilkan sebagai demo interaktif. Jika tidak, temukan contoh mandiri di bawah.

 < hy-push-state initial-href =" https://qwtel.com/hy-push-state/example/simple/ " prefetch >
  < p >
    < a href =" ./1.html " > Page 1 </ a >
    < a href =" ./2.html " > Page 2 </ a >
    < a href =" ./3.html " > Page 3 </ a >
  </ p >
  < p > Super simple example. </ p >
</ hy-push-state >

Saat melihat dokumen ini di GitHub, npm, atau di tempat lain, Anda dapat melihat contoh mandiri:

• Contoh Komponen Web{:.external}
• Contoh jQuery{:.eksternal}
• Contoh Vanilla JS{:.eksternal}
• Contoh Mixin{:.eksternal}

Lisensi

hy-push-state adalah Open Source tetapi tidak gratis.

Anda boleh menggunakan komponen sesuai dengan lisensi GPL-3.0, namun ini berarti Anda harus bersedia merilis kode Anda di bawah lisensi yang kompatibel dengan GPLv3.

Untuk kasus-kasus di mana hal ini tidak dapat diterima, lisensi komersial berikut tersedia:

	Pribadi	Rintisan	Perusahaan
# Pengembang	2	15	∞
Lisensi	Pribadi	Rintisan	Perusahaan
Harga	$29	$249	$499
	Beli {:.gumroad-button}	Beli {:.gumroad-button}	Beli {:.gumroad-button}
{:.meja peregangan}

Penggunaan

hy-push-state dapat digunakan dalam berbagai cara:

• Sebagai Komponen Web, baik sebagai Modul ES6 dan Impor HTML
• Sebagai plugin jQuery
• Sebagai kelas Vanilla JavaScript
• Sebagai bagian dari kode frontend yang dibundel.
• (Lanjutan) Mungkin sebagai bagian dari hierarki komponen Anda sendiri sebagai ES6 Mixin.

Komponen Web

Komponen Web adalah cara penggunaan hy-push-state yang lebih disukai, tetapi memerlukan dukungan di browser atau polyfill. Ada beberapa cara untuk memasukkannya ke halaman Anda:

Modul ES6 yang dibundel

Ini adalah versi yang paling cepat mendapatkan dukungan asli di semua browser utama.

 < script type =" module " href =" https://unpkg.com/hy-push-state/dist/webcomponent/module " > </ script >

< hy-push-state replace-ids =" main,aside " prefetch >
  < main id =" main " > <!-- ... --> </ main >
  < aside id =" aside " > <!-- ... --> </ aside >
</ hy-push-state > 

Impor HTML

Beberapa browser telah memutuskan untuk tidak menerapkan Impor HTML, tetapi mereka mudah di-polyfill.

 < link rel =" import " href =" https://unpkg.com/hy-push-state/dist/webcomponent/hy-push-state.html " >

< hy-push-state replace-ids =" main,aside " prefetch >
  < main id =" main " > <!-- ... --> </ main >
  < aside id =" aside " > <!-- ... --> </ aside >
</ hy-push-state > 

Modul ES6 yang tidak dibundel (eksperimental)

Saat memuat komponen dari CDN unpkg, Anda dapat mengimpor sumber secara langsung dengan menambahkan parameter kueri ?module .

 < script type =" module " src =" https://unpkg.com/hy-push-state/src/webcomponent/module?module " > </ script >

< hy-push-state replace-ids =" main,aside " prefetch >
  < main id =" main " > <!-- ... --> </ main >
  < aside id =" aside " > <!-- ... --> </ aside >
</ hy-push-state >

Perhatikan bahwa pendekatan ini akan menghasilkan ratusan permintaan HTTP terpisah (satu untuk setiap modul) dan ditujukan untuk pengujian dan prototipe saja. Mengimpor modul ES6 yang tidak dibundel jauh lebih lambat dibandingkan distribusi yang dibundel dan akan tetap demikian di masa mendatang.

Salah satu keuntungan dari pendekatan ini adalah ketergantungan bersama tidak akan disertakan dua kali ketika menggunakan lebih dari satu komponen dari keluarga komponen Hydejack. Namun, menyiapkan webpack adalah solusi yang lebih baik dalam kasus berikut:

Bundel

Anda dapat menggunakan hy-push-state dengan bundler frontend seperti webpack atau rollup. Cukup instal komponen dengan npm atau benang dan impor sumbernya ke dalam kode Anda:

 import 'hy-push-state/src/webcomponent/module' ;

Jika Anda ingin memiliki kendali atas kapan elemen khusus define d, Anda juga dapat mengimpor HTMLElement seperti:

 import { HyPushStateElement } from 'hy-push-state/src/webcomponent' ;
// ...
customElements . define ( 'hy-push-state' , HyPushStateElement ) ;

Perhatikan bahwa semua dependensi hy-push-state adalah modul ES6 yang valid, sehingga dapat disejajarkan dengan ModuleConcatenationPlugin milik webpack.

Dokumentasi

• Pilihan
• Metode
• Acara

Pengambilan Halaman terlebih dahulu

hy-push-state memulai permintaan HTTP segera setelah pengguna "mengisyaratkan" bahwa dia akan membuka halaman baru dengan mengarahkan, memfokuskan, atau menyentuh ( touchstart -ing) sebuah tautan. Jika tebakannya benar, permintaan tersebut memiliki kecepatan awal 100 md atau lebih, sehingga semakin meningkatkan kecepatan yang dirasakan situs Anda selain penggantian halaman bergaya aplikasi web yang sudah cepat.

Tidak seperti implementasi lain dari fitur ini, permintaan prefetch saat ini akan dibatalkan jika pengguna memberi petunjuk pada link yang berbeda, sehingga memastikan bahwa tidak akan ada lebih dari satu permintaan prefetch dalam penerbangan pada satu waktu. Hal ini untuk menghindari penyumbatan jaringan dengan permintaan yang akan dibuang pada saat kedatangan, yang penting ketika koneksi 3G lambat.

Misalnya, hover link di sidebar pada qwtel.com akan menghasilkan timeline seperti di bawah ini:

{:.lead} Tangkapan layar konsol pengembang Chrome dari permintaan pengambilan terlebih dahulu. {:.angka}

Animasi Tingkat Lanjut

hy-push-state memungkinkan pembuatan animasi transisi halaman tingkat lanjut, seperti yang digunakan di Hydejack dan aplikasi web canggih. Hal ini dapat berbasis janji, bukan berbasis waktu, untuk memperhitungkan penundaan yang lebih kecil yang disebabkan oleh kode lain, gangguan GC, atau perangkat yang lebih lambat secara umum.

Kode untuk animasi fade-out sederhana menggunakan Web Animations API mungkin terlihat seperti:

 pushStateEl . addEventListener ( 'hy-push-state-start' , ( { detail } ) =>
  detail . transitionUntil ( new Promise ( res =>
    document
      . getElementById ( 'my-content' )
      . animate ( [ { opacity : 1 } , { opacity : 0 } ] , { duration : 250 } )
      . addEventListener ( 'finish' , res )
  ) )
) ;

Animasi berbasis waktu juga dimungkinkan dan dikonfigurasi dengan opsi duration .

Standar Emas

Komponen ini mengikuti Standar Emas Komponen Web.

Sumber

Kode sumber ditulis dalam gaya pemrograman literal , dan harus mudah didekati. Namun, beberapa pengetahuan tentang RxJS diperlukan.

Fungsionalitas inti diimplementasikan dalam mixin / index.js , yang digunakan untuk membuat versi komponen khusus kerangka kerja.

• jquery
  • index.js
• mixin
  • constants.js
  • event-listeners.js
  • events.js
  • fetching.js
  • history.js
  • index.js
  • methods.js
  • operators.js
  • script-hack.js
  • scrolling.js
  • setup.js
  • update.js
• vanilla
  • index.js
• webcomponent
  • html-import.s
  • index.js
  • module.js
• common.js
• index.js
• url.js

Ukuran

Ukuran paket yang diperkecil adalah sekitar 90kb, atau ~20kb gzip. Mayoritas berasal dari RxJS. Saat sudah menggunakan RxJS di proyek Anda, atau menggunakan lebih dari satu komponen keluarga komponen Hydejack, pertimbangkan untuk menggunakan bundler frontend.

Ukuran	Mengajukan
84K	dist/jquery/index.js
19K	dist/jquery/index.js.gz
80K	dist/mixin/index.js
18K	dist/mixin/index.js.gz
81K	dist/vanilla/index.js
18K	dist/vanilla/index.js.gz
86K	dist/webcomponent/html-import.js
19K	dist/webcomponent/html-import.js.gz
86K	dist/webcomponent/index.js
19K	dist/webcomponent/index.js.gz
86K	dist/webcomponent/module.js
19K	dist/webcomponent/module.js.gz