介绍 Rails 4.0 的 Turbolinks 已翻译 100%

lidashuang 投递于 2013/03/03 16:18 (共 10 段, 翻译完成于 03-05)
阅读 6793
收藏 11
2
加载中

David Heinemeier Hansson, Ruby on Rail创始人,最新在 Twitter 发布 上发布一个叫做Turbolinks的新功能,会在Ruby on Rails 4.0版本的Gemfile默认绑定发布。Turbolinks 已经在手机网站Basecamp发挥了巨大作用。

一些人在黑客新闻中发布了一个Turbolinks在Github的库连接,标题为

Turbolinks for Rails (like pjax)
那么,什么是PJAX,还有Turbolinks跟PJAX有什么不同?
enixyu
翻译于 2013/03/05 17:45
2

Javascript pushState

HTML5在Javascript加入了一些新的API,其中一个就是History interfacepushState允许Javascript在会话历史中随意储存数据,并且绑定一个标题和可选的URL。back()和forward()方法允许我们浏览已存储的会话历史数据。通过这个方法,我们可以使用pushState保存当前页的浏览历史,并且动态的在不同状态下,后退和前进,而不需要重新载入整个页面。

enixyu
翻译于 2013/03/05 17:52
1

PJAX


PJAX是一个混合词,代表terms push State and AJAX。PJAX的理念其实很简单:当点击一个超链接的时候,不需要重载整个页面,而是加载页面中需要更新的某些元素。这明显需要客户端Javascript的帮助,发送一个AJAX请求到服务器,获取数据,并替代页面中需要更新的元素。

PJAX data flow diagram

使用PJAX的数据流程

上面的草稿图给我们介绍了PJAX实际是如何工作的。首先(1)一个正常的GET请求被发送到服务器,然后服务器会返回整个页面 (2). 所有连续的请求 (3)通过点击超链接而触发,但只获取页面的某些元素(4)。

enixyu
翻译于 2013/03/05 18:03
1

在客户端,定义了一个容器 (这个例子里面,就是#mainin),当超链接‘/author’被点击的时候,容器将会被替换。

$.pjax({url:'/authors',container:'#main'})

定义PJAX动作

PJAX同样需要服务器端的应用只返回页面的某些元素。所以,PJAX在HTTP头添加了一个叫X-PJAX的请求,让web应用知道,这个请求是来自PJAX。在Rails里面,你只需简单的检查HTTP头部并赋值render :layout => false.

ifrequest.headers['X-PJAX']
    render:layout=>falseend

禁用PJAX的布局请求

还有一个方法,在Rails中使用PJAX。这个方法在Ryan Bates的Railscasts Episode #294中已经得到大概的描述。PJAX也存在缺点,当你需要仔细考虑页面的哪些部分需要被替换掉。

enixyu
翻译于 2013/03/05 18:11
1

Turbolinks


Turbolinks同样使用pushState,但是它并不是至替代页面的某些部分,而是从服务器加载整个网页,并替换当前加载的DOM中的<title>和<body>节点。默认情况下,页面所有的链接都遵循这个规则。所以,不像PJAX,你不需要为了让链接和容器取支持重载而去标记它们,Turbolnks会帮你处理这个些问题。

现在,Turbolinks还处于开发的初期,但是就像前面提到的,它已经在Basecamp中使用。在你的Ruby(Sinatra, Rails)工程中使用,只需简单的向你的用用中添加Turbolinks的gem:

gem'turbolinks'

向你的Gemfile中添加turbolinks

不要忘记了在编辑过Gemfinle后运行bundle install来安装gem。你需要在asset pipeline中的app/assets/javascripts/application.js添加一行turbolinks.js.coffeefile

//= require turbolinks
把turbolinks包含在asset pipeline之中。


enixyu
翻译于 2013/03/05 18:20
1

从现在开始,所有的请求将支持pushState,并由turbolinks来处理。那些不支持pushState的浏览器也可以正常工作,因为它们只需把它们当做普通的链接动作。你可以通过打开浏览器的开发者工具(Chrome里面是F12),并打开网络标签,以便检查程序是否工作正常。你会看到,在你点击了链接的时候,turbolinks.js帮你处理这这些请求。

Developer console in Chrome showing TurbolinksChrome的开发者终端显示Turbolinks如何工作

如果你需要手工的排除一些链接,不让Turbolinks帮你处理这些请求,你可以添加data-no-turbolnk属性到链接标签里面。

<ahref="/articles"data-no-turbolink>Articles</a>
手工的排除链接。



enixyu
翻译于 2013/03/05 18:26
1

这样就可以告诉turbolinks忽略这些链接。你可以在任何容器中添加这个属性,甚至是<body>标签,Turbolinks将会忽略那些容器里面的所有链接。当你使用document.ready的时候,会存在一个问题,那就是,这个事件只会在DOM完成加载的时候被触发,但是不会在Turbolinks更改了页面后被触发。一个快捷的修复方法是,document.ready和page:change事件:

$(function() {
   initPage();
}); $(window).bind('page:change', function() {
  initPage();
})
代码将会在页面被修改或者文档加载完毕时被执行。
enixyu
翻译于 2013/03/05 18:30
1
注意:Turbolinks是用 CoffeeScript编写的,所以需要coffeescript-rails 的gem,来编译成javascript. 请确保这个gem已经添加到你的应用中。如果你不希望在你的应用中使用CoffeeScript,你可以手工的下载和编译turbolinks.js.conffee到Javascript。请参考CoffeeScript 文档,了解如何安装CoffeeScript和如何通过coffee -cturbolinks.js.coffee编译为turbolinks.js。
enixyu
翻译于 2013/03/05 18:34
1

结论


Hacker News的一位用户 JuDue问了一个有趣的问题

[..] the inevitable vs PJAX conversation (ie: is it flexible enough? Does it need to be?)      跟PJAX的比较怎么样?例如,Turbolinks是否已经足够灵活?
一般的回答是:这个要看情况。Turbolinks明显的优化了客户端的页面加载性能。问题是,服务器端仍然需要渲染整个页面。如果在你的应用中,这个是瓶颈,那么Turbolinks将不会是最佳选择。PJAX在另一方面,可以通过只渲染页面的某些元素,来很好的解决这个问题,但是代价是,给开发过程带来更多的额外工作。
enixyu
翻译于 2013/03/05 18:40
1

对于灵活性,这完全取决与你的需求。如果你只有很少的链接不需要Turbolinks处理的话,这完全没问题。如果你大部分的页面,只需要更新某些小的页面元素,并保持网络的小流量,那PJAX就是不二之选。

总的来说:Turbolinks可以明显地优化页面加载,如果你的页面使用Javascript和CSS样式。PJAX则更多的考虑服务器端的性能。

其他材料


enixyu
翻译于 2013/03/05 18:46
1
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接。
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。
加载中

评论(6)

moli
moli

引用来自“moli”的评论

引用来自“moli”的评论

今天发现这个问题,page ajax加载后,原有的docment ready 失效了。

看了这个,就知道原来是这样啊。。。

引用来自“hww”的评论

。。。。。。今天也发现了
都1年了
已销号
已销号

引用来自“moli”的评论

引用来自“moli”的评论

今天发现这个问题,page ajax加载后,原有的docment ready 失效了。

看了这个,就知道原来是这样啊。。。
。。。。。。今天也发现了
moli
moli

引用来自“moli”的评论

今天发现这个问题,page ajax加载后,原有的docment ready 失效了。

看了这个,就知道原来是这样啊。。。
tsl0922
tsl0922
试用了一下,效果还不错。
enixyu
enixyu

引用来自“lidashuang”的评论

翻译的真快啊,顶

文章语法比较简单,字数也少。。一篇简洁易懂的文章
lidashuang
lidashuang
翻译的真快啊,顶
返回顶部
顶部