hy-push-state是一個 Web 元件,可讓您將網頁轉換為 Web 應用程式。該元件動態載入新內容(以前稱為“ajax”)並將其插入到目前頁面中,不會導致 Flash of White、Flash of Unstyled Content 等。
將靜態網站轉變為動態網路應用程式。 {:。
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 或其他地方查看此文件時,您可以查看獨立範例:
hy-push-state是開源的,但不是免費的。
您可以按照 GPL-3.0 授權使用該元件,但這意味著您必須願意依序在 GPLv3 相容授權下發布您的程式碼。
對於不可接受的情況,可以使用以下商業許可證:
個人的 | 啟動 | 企業 | |
---|---|---|---|
# 開發者 | 2 | 15 | 無窮大 |
執照 | 個人的 | 啟動 | 企業 |
價格 | 29 美元 | 249 美元 | 499 美元 |
購買{:.gumroad-button} | 購買{:.gumroad-button} | 購買{:.gumroad-button} | |
{:.拉伸表} |
hy-push-state可以透過多種方式使用:
Web 元件是使用hy-push-state的首選方式,但需要瀏覽器或 polyfill 的支援。有多種方法可以將其包含在您的頁面上:
這是最快在所有主要瀏覽器上獲得本機支援的版本。
< 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 匯入,但它們很容易被填滿。
< 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 >
從 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與 webpack 或 rollup 等前端組合器一起使用。只需使用npm或yarn安裝元件並在程式碼中導入原始程式碼:
import 'hy-push-state/src/webcomponent/module' ;
如果您想控制何時define
自訂元素,您也可以像這樣匯入HTMLElement
:
import { HyPushStateElement } from 'hy-push-state/src/webcomponent' ;
// ...
customElements . define ( 'hy-push-state' , HyPushStateElement ) ;
請注意, hy-push-state的所有依賴項都是有效的 ES6 模組,因此它們可以與 webpack 的ModuleConcatenationPlugin
內聯。
一旦使用者透過懸停、對焦或觸碰 ( touchstart
-ing) 連結「暗示」他/她即將開啟新頁面, hy-push-state就會啟動 HTTP 請求。如果猜測正確,則該請求將有 100 毫秒或更多的領先時間,除了已經很快的 Web 應用程式樣式頁面替換之外,還進一步提高了網站的感知速度。
與此功能的其他實現不同,如果用戶提示不同的鏈接,當前的預取請求將被取消,從而確保一次不會有超過一個預取請求。這可以避免請求到達後被丟棄而堵塞網絡,這在 3G 連接速度較慢時至關重要。
例如,將滑鼠懸停在 qwtel.com 側邊欄中的連結將產生如下所示的時間軸:
{:.lead} Chrome 開發者控制台預取要求的螢幕截圖。 {:。
hy-push-state允許建立進階頁面轉換動畫,例如 Hydejack 和最先進的 Web 應用程式中使用的動畫。這些可以是基於承諾的而不是基於時間的,以解決由其他代碼、GC 中斷或一般較慢的設備引起的較小延遲
使用 Web 動畫 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 元件黃金標準。
原始碼是以字面程式設計風格編寫的,並且應該相當容易理解。然而,需要一些 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,或 gzip 後約 20kb。其中大部分來自 RxJS。當您的專案中已使用 RxJS,或使用 Hydejack 組件系列中的多個組件時,請考慮使用前端捆綁器。
尺寸 | 文件 |
---|---|
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 |