push state

hy-push-state

hy-push-state เป็นส่วนประกอบของเว็บที่ให้คุณเปลี่ยนหน้าเว็บให้เป็นเว็บแอปได้ คอมโพเนนต์จะโหลดเนื้อหาใหม่แบบไดนามิก (เดิมเรียกว่า "ajax") และแทรกลงในหน้าปัจจุบัน โดยไม่ทำให้เกิด Flash เป็นสีขาว, Flash ของเนื้อหาที่ไม่ได้จัดรูปแบบ ฯลฯ

เปลี่ยนเว็บไซต์แบบคงที่ให้เป็นเว็บแอปแบบไดนามิก {:.ตะกั่ว}

hy-push-state นั้นคล้ายคลึงกับ pjax และ SmoothState แต่มีลอจิกการดึงข้อมูลล่วงหน้าขั้นสูงกว่า และให้คุณควบคุมภายในได้มากขึ้นเพื่อเปิดใช้งานแอนิเมชั่นการเปลี่ยนหน้าขั้นสูง

hy-push-state ถูกใช้โดยไซต์หลายร้อยแห่งซึ่งเป็นส่วนหนึ่งของธีม Hydejack{:.external} Jekyll

หมายเหตุ : เวอร์ชันปัจจุบันยังคงเป็นเวอร์ชันก่อนเผยแพร่ API สาธารณะอาจยังคงมีการเปลี่ยนแปลงในลักษณะที่สำคัญ {:.ข้อความ}

ตัวอย่าง

เมื่อดูหน้านี้บน webcomponents.org ตัวอย่างด้านล่างจะแสดงผลเป็นการสาธิตเชิงโต้ตอบ หรือค้นหาตัวอย่างแบบสแตนด์อโลนด้านล่าง

 < 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 >

เมื่อดูเอกสารนี้บน GitHub, npm หรือที่อื่น ๆ คุณสามารถดูตัวอย่างแบบสแตนด์อโลนได้:

• ตัวอย่างส่วนประกอบของเว็บ{:.ภายนอก}
• ตัวอย่าง jQuery{:.external}
• ตัวอย่าง Vanilla JS{:.external}
• ตัวอย่างมิกซ์อิน{:.ภายนอก}

ใบอนุญาต

hy-push-state เป็น Open Source แต่ไม่ฟรี

คุณสามารถใช้ส่วนประกอบตามใบอนุญาต GPL-3.0 ได้ แต่นั่นหมายความว่าคุณต้องยินดีที่จะปล่อยรหัสของคุณภายใต้ใบอนุญาตที่เข้ากันได้กับ GPLv3 ตามลำดับ

สำหรับกรณีนี้ไม่เป็นที่ยอมรับใบอนุญาตเชิงพาณิชย์ต่อไปนี้:

	ส่วนตัว	การเริ่มต้น	องค์กร
#นักพัฒนา	2	15
ใบอนุญาต	ส่วนตัว	การเริ่มต้น	องค์กร
ราคา	29 ดอลลาร์	$249	$499
	ซื้อ {:.gumroad-button}	ซื้อ {:.gumroad-button}	ซื้อ {:.gumroad-button}
{:.ยืดตาราง}

การใช้งาน

hy-push-state สามารถใช้ได้หลายวิธี:

• เป็น Web Component ทั้งเป็น โมดูล ES6 และ การนำเข้า HTML
• เป็นปลั๊กอิน jQuery
• เป็นคลาส Vanilla JavaScript
• เป็นส่วนหนึ่งของโค้ดส่วนหน้าแบบรวม
• (ขั้นสูง) อาจเป็นส่วนหนึ่งของลำดับชั้นส่วนประกอบของคุณเองในชื่อ ES6 Mixin

ส่วนประกอบของเว็บ

Web Component เป็นวิธีที่นิยมใช้ในการใช้ hy-push-state แต่ต้องการการสนับสนุนในเบราว์เซอร์หรือ polyfill มีหลายวิธีในการรวมไว้ในเพจของคุณ:

โมดูล ES6 ที่แถมมา

นี่เป็นเวอร์ชันที่จะได้รับการสนับสนุนแบบเนทีฟในเบราว์เซอร์หลักๆ ทั้งหมดโดยเร็วที่สุด

 < 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 > 

นำเข้า HTML

เบราว์เซอร์บางตัวตัดสินใจไม่นำการนำเข้า HTML มาใช้ แต่สามารถเติมโพลีฟิลได้อย่างง่ายดาย

 < 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 > 

โมดูล ES6 ที่ไม่ได้รวมกลุ่ม (ทดลอง)

เมื่อโหลดส่วนประกอบจาก unpkg CDN คุณสามารถนำเข้าแหล่งที่มาได้โดยตรงโดยการต่อท้ายพารามิเตอร์การสืบค้น ?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 >

โปรดทราบว่าแนวทางนี้จะส่งผลให้เกิดคำขอ HTTP แยกกันหลายร้อยรายการ (หนึ่งคำขอสำหรับแต่ละโมดูล) และมีไว้สำหรับการทดสอบและสร้างต้นแบบเท่านั้น การนำเข้าโมดูล ES6 ที่ไม่ได้รวมกลุ่มจะช้ากว่าการแจกแจงแบบรวมกลุ่มมากและจะยังคงอยู่เช่นนั้นในอนาคตอันใกล้

ข้อดีประการหนึ่งของแนวทางนี้คือ การพึ่งพาร่วมกันจะไม่ถูกรวมสองครั้งเมื่อใช้ส่วนประกอบมากกว่าหนึ่งรายการจากตระกูลส่วนประกอบ Hydejack อย่างไรก็ตาม การตั้งค่า webpack เป็นวิธีแก้ปัญหาที่ดีกว่าในกรณีเหล่านี้:

เครื่องมัดรวม

คุณสามารถใช้ hy-push-state กับ Bundler ส่วนหน้า เช่น Webpack หรือ Rollup ได้ เพียงติดตั้งส่วนประกอบด้วย npm หรือเส้นด้ายแล้วนำเข้าซอร์สในโค้ดของคุณ:

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

หากคุณต้องการควบคุมว่าเมื่อใดที่องค์ประกอบที่กำหนดเองได้รับ define d คุณสามารถนำเข้า HTMLElement ได้ดังนี้:

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

โปรดทราบว่าการขึ้นต่อกันของ hy-push-state ทั้งหมดเป็นโมดูล ES6 ที่ถูกต้อง เพื่อให้สามารถอินไลน์ด้วย ModuleConcatenationPlugin ของ webpack

เอกสารประกอบ

• ตัวเลือก
• วิธีการ
• กิจกรรม

กำลังดึงข้อมูลหน้าล่วงหน้า

hy-push-state เริ่มต้นคำขอ HTTP ทันทีที่ผู้ใช้ "บอกเป็นนัย" ว่าเขา/เธอกำลังจะเปิดหน้าใหม่โดยการวางเมาส์เหนือ โฟกัส หรือสัมผัส ( touchstart -ing) ลิงก์ หากการเดาถูกต้อง คำขอจะมีเวลาเริ่มต้น 100 มิลลิวินาทีขึ้นไป ซึ่งจะเป็นการเพิ่มความเร็วการรับรู้ไซต์ของคุณเพิ่มเติม นอกเหนือจากการแทนที่หน้าสไตล์เว็บแอปที่รวดเร็วอยู่แล้ว

แตกต่างจากการใช้งานฟีเจอร์นี้อื่นๆ คำขอดึงข้อมูลล่วงหน้าในปัจจุบันจะถูกยกเลิกหากผู้ใช้แนะนำลิงก์อื่น เพื่อให้แน่ใจว่าจะไม่มีคำขอดึงข้อมูลล่วงหน้ามากกว่าหนึ่งรายการในแต่ละครั้ง วิธีนี้จะหลีกเลี่ยงการอุดตันเครือข่ายด้วยคำขอที่จะถูกทิ้งเมื่อมาถึง ซึ่งเป็นสิ่งสำคัญเมื่อใช้การเชื่อมต่อ 3G ที่ช้า

ตัวอย่างเช่น การโฮเวอร์ลิงก์ในแถบด้านข้างบน qwtel.com จะสร้างไทม์ไลน์เหมือนกับตัวอย่างด้านล่าง:

{:.lead} ภาพหน้าจอคอนโซลนักพัฒนาซอฟต์แวร์ Chrome ของการดึงข้อมูลคำขอล่วงหน้า {:.รูป}

แอนิเมชั่นขั้นสูง

hy-push-state อนุญาตให้สร้างภาพเคลื่อนไหวการเปลี่ยนหน้าขั้นสูง เช่นเดียวกับที่ใช้ใน Hydejack และเว็บแอปที่ล้ำสมัย สิ่งเหล่านี้อาจเป็นไปตามสัญญาแทนที่จะอิงตามเวลาเพื่อพิจารณาถึงความล่าช้าเล็กน้อยที่เกิดจากโค้ดอื่น การหยุดชะงักของ GC หรืออุปกรณ์ที่ช้ากว่าโดยทั่วไป

โค้ดสำหรับแอนิเมชั่นแบบเฟดเอาท์อย่างง่ายโดยใช้ Web Animations API อาจมีลักษณะดังนี้:

 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 )
  ) )
) ;

ภาพเคลื่อนไหวตามเวลาก็สามารถทำได้เช่นกันและได้รับการกำหนดค่าด้วยตัวเลือก duration

มาตรฐานทองคำ

คอมโพเนนต์นี้เป็นไปตาม Web Components Gold Standard

แหล่งที่มา

ซอร์สโค้ดเขียนด้วยรูปแบบ การเขียนโปรแกรมตามตัวอักษร และควรเข้าถึงได้สมเหตุสมผล อย่างไรก็ตาม จำเป็นต้องมีความรู้บางอย่างเกี่ยวกับ RxJS

ฟังก์ชันการทำงานหลักถูกนำมาใช้ใน mixin / index.js ซึ่งใช้เพื่อสร้างเวอร์ชันเฉพาะของเฟรมเวิร์กของส่วนประกอบ

• 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

ขนาด

ขนาดของบันเดิลย่อขนาดจะอยู่ที่ประมาณ 90kb หรือ ~20kb gzipped ส่วนใหญ่มาจาก RxJS เมื่อใช้ RxJS ในโปรเจ็กต์ของคุณอยู่แล้ว หรือใช้มากกว่าหนึ่งคอมโพเนนต์ของกลุ่มคอมโพเนนต์ Hydejack ให้พิจารณาใช้ฟรอนต์เอนด์บันเดิล

ขนาด	ไฟล์
84K	dist/jquery/index.js
19ก	dist/jquery/index.js.gz
80K	dist/mixin/index.js
18K	dist/mixin/index.js.gz
81ก	dist/vanilla/index.js
18K	dist/vanilla/index.js.gz
86ก	dist/webcomponent/html-import.js
19ก	dist/webcomponent/html-import.js.gz
86ก	dist/webcomponent/index.js
19ก	dist/webcomponent/index.js.gz
86ก	dist/webcomponent/module.js
19ก	dist/webcomponent/module.js.gz