push state
1.0.0
hy-push-state — это веб-компонент, который позволяет превращать веб-страницы в веб-приложения. Компонент динамически загружает новый контент (ранее известный как «ajax») и вставляет его на текущую страницу, не вызывая Flash of White, Flash of Unstyled Content и т. д.
Превратите статические веб-сайты в динамические веб-приложения. {:.вести}
hy-push-state похож на pjax и SmoothState, но предлагает более продвинутую логику предварительной выборки и дает вам больше контроля над его внутренними компонентами для включения расширенной анимации перехода страниц.
hy-push-state уже используется сотнями сайтов как часть темы Hydejack{:.external} Jekyll.
ПРИМЕЧАНИЕ . Текущая версия по-прежнему является предварительной версией. Публичный API все еще может существенно измениться. {:.сообщение}
При просмотре этой страницы на сайте webcomComponents.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} | |
| {:.stretch-таблица} |
hy-push-state можно использовать по-разному:
Веб-компонент является предпочтительным способом использования hy-push-state , но требует поддержки в браузере или полифиле. Есть несколько способов разместить его на своей странице:
Это версия, которая в ближайшее время получит встроенную поддержку во всех основных браузерах.
< 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 > При загрузке компонента из CDN unpkg вы можете импортировать источник напрямую, добавив параметр запроса ?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. Однако настройка веб-пакета является лучшим решением в следующих случаях:
Вы можете использовать hy-push-state с помощью внешнего упаковщика, такого как Webpack или Rollup. Просто установите компонент с помощью npm или Yarn и импортируйте исходный код в свой код:
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 веб-пакета.
hy-push-state запускает HTTP-запрос, как только пользователь «намекает», что он/она собирается открыть новую страницу, наводя курсор, фокусируясь или касаясь ( touchstart -ing) ссылки. Если предположение верно, запрос имеет задержку в 100 мс или более, что еще больше увеличивает воспринимаемую скорость вашего сайта в дополнение к и без того быстрой замене страницы в стиле веб-приложения.
В отличие от других реализаций этой функции, текущий запрос предварительной выборки будет отменен, если пользователь намекнет на другую ссылку, гарантируя, что одновременно будет выполняться не более одного запроса предварительной выборки. Это позволяет избежать засорения сети запросами, которые будут отброшены по прибытии, что важно при медленных соединениях 3G.
Например, при наведении курсора на ссылку на боковой панели сайта qwtel.com появится временная шкала, подобная приведенной ниже:
{:.lead} Скриншот консоли разработчика Chrome с запросами предварительной выборки. {:.фигура}
hy-push-state позволяет создавать расширенные анимации перехода страниц, подобные тем, которые используются в Hydejack и современных веб-приложениях. Они могут быть основаны на обещаниях, а не на времени, чтобы учитывать меньшие задержки, вызванные другим кодом, прерываниями GC или более медленными устройствами в целом.
Код простой анимации затухания с использованием 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 .
Этот компонент соответствует Золотому стандарту веб-компонентов.
Исходный код написан в буквальном стиле программирования и должен быть достаточно доступным. Однако требуются некоторые знания RxJS.
Основная функциональность реализована в mixin / index.js , который используется для создания специфичных для платформы версий компонента.
jqueryindex.jsmixinconstants.jsevent-listeners.jsevents.jsfetching.jshistory.jsindex.jsmethods.jsoperators.jsscript-hack.jsscrolling.jssetup.jsupdate.jsvanillaindex.jswebcomponenthtml-import.sindex.jsmodule.jscommon.jsindex.jsurl.jsРазмер мини-пакета составляет около 90 КБ или ~20 КБ в сжатом виде. Большая часть исходит от RxJS. Если вы уже используете RxJS в своем проекте или используете более одного компонента семейства компонентов Hydejack, рассмотрите возможность использования внешнего упаковщика.
| Размер | Файл |
|---|---|
| 84К | dist/jquery/index.js |
| 19 тыс. | dist/jquery/index.js.gz |
| 80 тыс. | dist/mixin/index.js |
| 18К | dist/mixin/index.js.gz |
| 81К | dist/vanilla/index.js |
| 18К | 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 |
