文档结构  
翻译进度:已翻译     翻译赏金:0 元 (?)    ¥ 我要打赏

barba.js 是一款小巧(gzip压缩后4.4kb)、灵活、免依赖的JS库,可以帮助你创建流畅平滑的网页切换。

它可以帮助减少页面间的延迟,最小化浏览器的HTTP请求,提升网站用户体验。

使用Barba.js的网站

观看演示

它是如何工作的

Barba.js 使用 PJAX (又名push state ajax) 来提升用户体验的。

这项技术体现在防止常规的链接行为,手动改变浏览器网址,在页面手动注入新内容。这样就不会存在浏览器的“硬刷新”。

第 1 段(可获 2 积分)

这里演示当用户点击链接时会发生什么:

  1. 检查链接是否有效,并且符合PJAX的要求,如果是,则阻止浏览器的默认行为。
  2. 使用 Push State API.更改URL。
  3. 通过XMLHttpRequest开始抓取新页面。
  4. 创建一个newtransition实例。
  5. 加载新页面后,barba.js将解析新的HTML(使用 .barba-container),并将新内容放在 #barba-wrapper内的DOM上。
  6.  transition 实例将小心隐藏旧容器并显示新容器。
  7. 转换完成后,旧容器将从DOM中删除。
第 2 段(可获 2 积分)

请注意,在服务器端,您的网页需要正常服务。
Barba.js只作为您的网站的增强功能,一切都应该在没有Javascript时正常工作。

为什么?

使用这种技术将带来许多好处:

  • 可以在页面之间创建漂亮的过渡以增强用户体验。
  • 减少HTTP请求。 (为什么每次页面改变都要重新加载css / js?)
  • 可以使用prefetch和 cache加速导航。

特性

安装

barba.js支持AMD,CommonJS和浏览器全局(使用UMD)。
您可以使用npm安装:

第 3 段(可获 2 积分)
npm install barba.js --save-dev

或者只需在你的页面中加入下面的script脚本

<script src="barba.min.js" type="text/javascript"></script>

使用barba.js需要了解一点DOM结构。默认情况下,在页面中使用以下标记结构

<div id="barba-wrapper">
  <div class="barba-container">
    ...Put here the content you wish to change between pages...
  </div>
</div>

请注意, 所有的css属性选择器 (#barba-wrapper, .barba-container) 是可编辑的, 参加 API 部分.

在你工程里包含barba.js后,是时候初始化它了。

 

第 4 段(可获 2 积分)
// 请注意,应该准备好DOM
Barba.Pjax.start();

贡献

Barba.js是由 Luigi De Rosa在业余时间创建的,并根据MIT许可证发布。
在这个项目上的任何帮助都是受欢迎的。
对于任何问题/疑问,请毫不犹豫的在git上创建一个issue。

其他

有关任何其他信息,请访问网站

第 5 段(可获 2 积分)

文章评论