在本教程中，我们将构建一个具有平滑过渡页面的网站，而无需通常进行积极的页面刷新。 浏览演示中的页面以了解我的意思。
为了达到这种效果，我们将使用History Web API 。 简而言之，该API用于更改浏览器历史记录。 它允许我们加载新的URL，更改页面标题，然后同时将其记录为浏览器中的新访问，而无需实际加载页面。
这听起来令人困惑，但是它带来了许多可能性，例如能够提供更平滑的页面过渡并提供快速感，从而改善了用户体验。 您可能已经在许多网站和Web应用程序（例如Trello ， Quartz和Privacy）上见证了Web History API的运行。
在继续进行之前，我们先来看一下要在网站上部署的特定API。
简要介绍一下History Web API
要访问Web History API，我们首先编写window.history然后再跟随其中一个API。 方法或属性 。 在本教程中，我们将重点介绍pushState()方法，因此：
window.history.pushState( state, title, url ); 从上面的代码片段中可以看到， pushState()方法采用三个参数。
- 第一个参数
state应当是包含任意数据的对象。 然后可以通过window.history.state访问此数据。 在实际的应用程序中，我们将传递诸如页面ID，URL或从表单派生的序列化输入之类的数据。 - 最后两个参数是
title和 -
url。 这两个更改了浏览器中的URL和文档标题，并将它们记录为浏览器历史记录中的新条目。
让我们剖析以下示例，以更好地了解pushState()方法的工作方式。
(function( $ ){
$( "a" ).on( "click", function( event ) {
event.preventDefault();
window.history.pushState( { ID: 9 }, "About - Acme", "about/" );
} );
})( jQuery ); 在上面的代码中， click事件附带的链接然后部署pushState()方法。 当我们单击链接时，我们期望代码更改文档标题和URL：
确实如此； 屏幕快照显示URL已按pushState()方法中的定义更改为“ about /”。 由于pushState()方法在浏览器历史记录中创建了一条新记录，因此我们能够通过浏览器的“ 后退”按钮返回到上一页 。
但是，此示例中的所有浏览器当前都忽略title参数。 您可以从屏幕快照中看到文档并未更改为About-Acme 。 此外，调用pushState()方法也不会触发popstate事件。 历史每次更改都会调度的事件-这是我们需要的！ 如MDN中所述，在浏览器如何处理此事件方面存在一些差异：
“浏览器在页面加载时倾向于不同地处理popstate事件。 Chrome（v34之前的版本）和Safari总是在页面加载时发出popstate事件，但Firefox不会。
我们将需要一个库作为后备，以使History Web API在整个浏览器中一致地工作，而没有任何障碍。
认识History.js
由于pushState()方法无法充分发挥作用，因此在本教程中，我们将利用History.js 。 顾名思义，此JavaScript库是polyfill ，它复制了可在不同浏览器上运行的本机History API。 它还公开了与本地API相似的一组方法，尽管差别很小。
如前所述，浏览器本机API是通过history窗口对象以小写字母“ h”调用的，而History.js API是通过History以大写字母“ H”访问的。 给定前面的示例，并假设我们加载了history.js文件，我们可以按如下所示修改代码（再次注意，大写的“ H”）。
window.History.pushState( {}, title, url );我希望这个简短的解释易于理解。 否则，如果您想了解有关Web History API的更多信息，则这里有一些其他参考。
建立我们的静态网站
在本节中，我们不会详细讨论构建静态网站所需的每个步骤。 我们的网站非常简单，如以下屏幕截图所示：
您不必创建看起来完全相同的网站。 您可以自由添加任何内容并根据需要创建任意数量的页面。 但是，您需要考虑一些有关HTML结构以及对某些元素使用id和class属性的特定要点。
- 在文档
head加载jQuery和History.js 。 您可以通过Bower或CDN（例如CDNJS或JSDelivr）将其作为项目依赖项加载。 - 用ID
wrap将header，content和footerwrap在div；<div id="wrap"></div> - 网站页眉和页脚上有一些导航项。 每个菜单应指向一个页面。 确保页面存在并包含内容。
- 每个菜单链接都具有
page-link类，我们将使用它们来选择这些菜单。 - 最后，我们给每个链接一个
title属性，该属性将传递给pushState()以确定文档标题。
考虑到所有这些因素，我们HTML标记大致如下：
<head>
<script src="jquery.js"></script>
<script src="history.js"></script>
</head>
<body>
<div id="wrap">
<header>
<nav>
<ul>
<li><a class="page-link" href="./" title="Acme">Home</a></li>
<li><a class="page-link" href="./about.html" title="About Us">About</a></li>
<!-- more menu -->
</ul>
</nav>
</header>
<div>
<!-- content is here -->
</div>
<footer>
<nav>
<ul>
<li><a href="tos.html" class="page-link" title="Terms of Service">Terms</a></li>
<!-- more menu -->
</ul>
</nav>
<!-- this is the footer -->
</footer>
</div>
</body>完成静态网站的构建后，我们可以继续学习本教程的主要部分。
应用History Web API
在开始编写任何代码之前，我们需要创建一个新文件来保存我们JavaScript。 我们将其命名为script.js并将文件加载到文档中的body结束标记之前。
让我们添加第一段代码，以在单击菜单导航时更改文档标题和URL：
// 1.
var $wrap = $( "#wrap" );
// 2.
$wrap.on( "click", ".page-link", function( event ) {
// 3.
event.preventDefault();
// 4.
if ( window.location === this.href ) {
return;
}
// 5.
var pageTitle = ( this.title ) ? this.title : this.textContent;
pageTitle = ( this.getAttribute( "rel" ) === "home" ) ? pageTitle : pageTitle + " — Acme";
// 6.
History.pushState( null, pageTitle, this.href );
} );我已将代码分为几个编号部分。 这些将使您更容易使用以下参考来精确定位代码：
- 在第一行，我们选择元素
<div id="wrap"></div>，它包装了我们所有的网站内容。 - 我们附加点击事件。 但是，正如您在上面看到的那样，我们将其附加到
#wrap元素上，而不是将事件直接附加到每个菜单导航上。 这种做法称为事件委托 。 换句话说，我们的#wrap元素负责代表.page-link监听点击事件。 - 我们还添加了
event.preventDefault()以便不会将用户定向到有问题的页面。 - 如果单击的菜单URL与当前窗口相同，则无需继续进行下一个操作，这仅仅是因为没有必要。
-
pageTitle变量包含从链接标题属性或链接文本派生的标题格式。 除首页外，每个页面标题均遵循{Page Title} — Acme约定。 “ Acme”是我们的虚拟公司名称。 - 最后，我们将
pageTitle和页面URL传递给History.jspushState()方法。
此时，当我们单击菜单导航时，标题以及URL应该相应更改，如下所示：
但是页面内容保持不变！ 它不会更新以匹配新标题和新URL。
内容
我们需要添加以下代码行来替换实际的页面内容。
// 1.
History.Adapter.bind( window, "statechange", function() {
// 2.
var state = History.getState();
// 3.
$.get( state.url, function( res ) {
// 4.
$.each( $( res ), function( index, elem ) {
if ( $wrap.selector !== "#" + elem.id ) {
return;
}
$wrap.html( $( elem ).html() );
} );
} );
} );同样，这里的代码被分成几个编号部分。
- 代码的第一行监听通过History.js
pushState()方法执行的History更改，并运行附加的函数。 - 我们检索状态更改，其中包含各种数据，例如URL，标题和ID。
- 通过jQuery
.get()方法，我们从给定的URL中检索内容。 - 最后，我们从检索到的内容中筛选出一个名为
wrap的id的元素，并最终用它替换当前页面的内容。
添加完毕后，当我们单击菜单导航时，内容现在应该已更新。 如上所述，我们还可以通过浏览器的“ 后退”和“ 前进”按钮来回访问已访问的页面。
此时，我们的网站可以展示。 但是，我们想通过添加一些动画使页面更加生动，从而走得更远，最后，我们的网站更具吸引力。
添加动画和转场
这种情况下的动画仅需简单，因此我们将从头开始编写所有内容，而不是通过Animate.css ， ZURB的 Motion UI或Effeckt.css之类的库加载动画。 我们将动画命名为slideInUp ，如下所示：
@keyframes slideInUp {
from {
transform: translate3d(0, 10px, 0);
opacity: 0;
}
to {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}顾名思义，动画将页面内容与元素的不透明度一起从底部滑动到顶部。 将动画应用于包裹页面主要内容的元素，如下所示。
.section {
animation-duration: .38s;
animation-fill-mode: both;
animation-name: slideInUp;
} 一旦应用了动画，从一页到另一页的过渡现在应该感觉更流畅。 在这里，您可以停下来打电话一天！ 我们的网站已完成，我们准备将其部署给全世界。
但是，您可能还需要考虑添加一件事，特别是对于那些想要监视访问次数和访问者在您网站上的行为的用户而言。
我们需要添加Google Analytics（分析）来跟踪每个页面视图 。
谷歌分析
由于我们的页面将被异步加载（加载的初始页面除外），因此跟踪页面浏览量也应异步进行。
首先，请确保您有标准的谷歌Analytics（分析）在文档中添加head 。 该代码通常如下所示：
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXX-XX', 'auto');
ga('send', 'pageview');
</script>然后，我们需要调整JavaScript代码以包括Google Analytics（分析）跟踪代码，以便异步加载的每个页面也都将作为页面视图进行度量。
我们有几种选择。 首先，我们可以从用户单击导航链接，更改页面标题和URL或页面内容完全加载时开始计数。
我们将选择后者，它可以说是最真实的，并且在这样做时，我们在更改页面内容后利用jQuery promise()方法，如下所示：
$wrap.html( $( elem ).html() )
.promise()
.done( function( res ) {
// Make sure the new content is added, and the 'ga()' method is available.
if ( typeof ga === "function" && res.length !== 0 ) {
ga('set', {
page: window.location.pathname,
title: state.title
});
ga('send', 'pageview');
}
});仅此而已，我们现在将页面视图记录在Google Analytics（分析）中。
结语
在本教程中，我们使用Web History API改进了一个简单的静态网站，以使页面转换更加平滑，加载更快，并总体上为用户提供了更好的体验。 在本教程的最后，我们还实现了Google Analytics（分析）以异步记录用户页面视图 。 此外，如上所述，我们的网站是搜索引擎机器人的理想爬网工具 ，因为它只是一个简单HTML网站。
这是一个内容丰富的教程，介绍了CSS Animation，jQuery Ajax和jQuery Promise之类的许多内容。 这里有一些参考资料供您参考，以增强您所学的知识。
706
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
