Rails Turbolinks 5 概述及实现原理

lyfi2003 · 发布于 2016年08月07日 · 最后由 lyfi2003 回复于 2016年08月15日 · 3793 次阅读
121
本帖已被设为精华帖!

Turbolinks5 是 Turbolinks-classic 的改进版. @Rei 在 13 年做过一些原理分析, 现在是时间更新一波 Turbolinks5 的原理解析了.

在踩过一遍坑之后, 我总结了一些经验.

Turbolinks5 概述及实现原理

要不要用 Turbolinks5

必须用起来, 既然是 Rails5 应用, 强烈推荐使用 Turbolinks5 来构建你的应用. 在用好它的前提下, 它的用户体验速度赶超用 AngularJS, ReactJS, VueJS 构建的单页应用( 在详细页里面有解释 ). 而学习成本实际上很低, 一个团队只要一个人掌握即可. 而且我希望通过我的文章你就能完全掌握好它.

Turbolinks5 与 classic 版本的区别

核心原理没有变化, 但代码全部重构的更为清晰, 触发的事件也进行了重构, 更明白了:

  1. page:change -> turbolinks:load
  2. 不需要继续绑定 ready 事件了
  3. script 的追踪标签 由 data-turbolinks-track -> data-turbolinks-track="reload"

但如果你未能掌握好它, 仍然有一些易踩的坑, 我们来看一个 RubyChina 现场版的( 2016-8-7 21:36 测试有效 ):

  1. 点击 "我的主页"
  2. 点击浏览器的 "后退"
  3. 点击浏览器的 "前进"

看到了什么? 两个活跃图表

为什么会出现这种情况, 我们应当如何避免类似问题, 欢迎继续阅读 Turbolinks5 概述及实现原理

如果你想进一步学习我是如何分析源代码的话, 可以花 1 元钱来购买一篇源代码分析: Turbolinks5 源码分析

来自 windy

共收到 17 条回复
14293

经常遇到 Restoration Visits导致楼主所说的 “多个活跃图表”情况 😂

121

#2楼 @hww 极易踩中 😅

2099

谁赶紧去提个 Pull Request 😀

18832

好文要顶

737f5d

@lyfi2003 解决这个问题只能通过关闭cache或者before-cache event里面初始化? 请问还有别的办法么?

1

#6楼 @leiz_me 让操作幂等,其实文档有写。

121

#6楼 @leiz_me 避免在 body 里面做 dom 操作, 尽可能放在 JS 文件里处理. 如果有时候不得不用( 比如某些第三方插件 ), 就按我文章里面的办...

445

请问下,现在Turbolinks5和微信浏览器的兼容性如何了?有个新项目,打算用Turbolinks5,不知道还有没有之前的版本那么多坑!

121

#9楼 @stephen 这个问题主要看微信对单页的支持功能, 微信在 6.2 以上版本支持还可以, 我在 八十二十 上使用, 会遇到一些问题但都能按我提到的方法解决.

De6df3

Bug 已修复 😄

121

#11楼 @huacnlee 😀 👍 应该去 PR 贡献一波的, 拖延症了~

15820

@lyfi2003 文章已购买, 貌似代码没有高亮显示?

121

#13楼 @tardis 用的 simditor 的编辑器, 高亮的有点问题, 我后面优化一下. 看的时候有啥问题欢迎与我交流~

24996

我个人不懂turbolinks5. 可以先不用. 以后专门研究过在开启吗?

121

#16楼 @lilijreey 嗯 当然可以

De6df3 huacnlee 将本帖设为了精华贴 09月28日 02:26
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册