push state

超推状态

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 或其他地方查看此文档时，您可以查看独立示例：

• WebComponent 示例{:.external}
• jQuery 示例{:.external}
• 普通 JS 示例{:.external}
• 混合示例{:.external}

执照

hy-push-state是开源的，但不是免费的。

您可以按照 GPL-3.0 许可证使用该组件，但这意味着您必须愿意依次在 GPLv3 兼容许可证下发布您的代码。

对于不可接受的情况，可以使用以下商业许可证：

	个人的	启动	企业
# 开发者	2	15	无穷大
执照	个人的	启动	企业
价格	29 美元	249 美元	499 美元
	购买{:.gumroad-button}	购买{:.gumroad-button}	购买{:.gumroad-button}
{:.拉伸表}

用法

hy-push-state可以通过多种方式使用：

• 作为 Web 组件，既作为ES6 模块又作为HTML 导入
• 作为 jQuery 插件
• 作为 Vanilla JavaScript 类
• 作为捆绑前端代码的一部分。
• （高级）可能作为您自己的组件层次结构的一部分，如 ES6 Mixin。

网页组件

Web 组件是使用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与 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