http://rocodev.com 5VSCPMJOLT ultra fast by default 12年10月28⽇日星期⽇日 

http://rocodev.com .F ○ blog.xdite.net ○ Rails Developer ○ ROCO ( Rails application development and consultant） ○ Facebook World Hack Grand Prize 12年10月28⽇日星期⽇日 

http://rocodev.com 5VSCPMJOLT 12年10月28⽇日星期⽇日 

http://rocodev.com 3BJMT

'FBUVSF 12年10月28⽇日星期⽇日 

http://rocodev.com BWBJMBCMF
OPX https://github.com/rails/turbolinks 12年10月28⽇日星期⽇日 

http://rocodev.com 5VSCPMJOLT 12年10月28⽇日星期⽇日 

http://rocodev.com -FU`T
UBML
BCPVU
lQKBYz
pSTU 12年10月28⽇日星期⽇日 

http://rocodev.com QKBY pushState + Ajax 12年10月28⽇日星期⽇日 

http://rocodev.com QKBY
ᏈՌ ○ plus.google.com ○ facebook.com ○ github.com 12年10月28⽇日星期⽇日 

http://rocodev.com XIZ
XF
OFFE
lQKBYz 12年10月28⽇日星期⽇日 

http://rocodev.com QSPCMFN
PG
BKBY ○ 可以不刷新頁面改變內容，但無法改變 頁面網址 ○ 要實作不刷新頁面並通過 url 追蹤，必 須透過 window.localtion.hash ○ 經典的 hashbang #! 設計 ( Twitter ) ○ dirty url ○ not SEO friendly 12年10月28⽇日星期⽇日 

http://rocodev.com )5.-
QVTI4UBUF ○ history.pushState ○ history.replaceState ○ window.onpopstate 12年10月28⽇日星期⽇日 

http://rocodev.com
BOPUIFS
JTTVFT ○ 改變了內容也要順便改標題 ○ 如何處理不支援的瀏覽器 ○ 事件如何綁定 ○ ajax error handling ○ ajax 前後的一些自定義事件 12年10月28⽇日星期⽇日 

http://rocodev.com QKBY

BKBY

QVTI4UBUF https://github.com/defunkt/jquery-pjax 12年10月28⽇日星期⽇日 

http://rocodev.com %FNP http://pjax.heroku.com/ 12年10月28⽇日星期⽇日 

http://rocodev.com QKBY ○ ajax + pushState 的封裝 ○ 處理雜事 ○ clean URL ○ SEO friendly ○ 作者 : defunkt ( Github CEO) 12年10月28⽇日星期⽇日 

http://rocodev.com $.pjax({ url: '/authors', container: '#main' }) 12年10月28⽇日星期⽇日 

http://rocodev.com $.ajax({ url: '/authors', dataType: 'html', beforeSend: function(xhr){ xhr.setRequestHeader('X-PJAX', 'true') }, success: function(data){ $('#main').html(data) history.pushState(null, $(data).filter('title').text(), '/authors') }) }) 12年10月28⽇日星期⽇日 

http://rocodev.com Explore $(document).pjax('a[data-pjax]') 12年10月28⽇日星期⽇日 

http://rocodev.com Explore $('#main').pjax('.js-pjax').on('pjax:error', function(e, xhr, err) { $('.error').text('Something went wrong: ' + err) }) 12年10月28⽇日星期⽇日 

http://rocodev.com $('#main').pjax('a').on('pjax:send', function(){ $(this).showLoader() }) 12年10月28⽇日星期⽇日 

http://rocodev.com 3BJMT
JOUFHSBUJPO def my_page if request.headers['X-PJAX'] render :layout => false end end $.ajax({ url: '/authors', dataType: 'html', beforeSend: function(xhr){ xhr.setRequestHeader('X-PJAX', 'true') }, success: function(data){ $('#main').html(data) history.pushState(null, $(data).filter('title').text(), '/authors') }) }) 12年10月28⽇日星期⽇日 

http://rocodev.com QKBYSBJMT # app/assets/javascripts/application.js $(function() { $('a:not([data-remote]):not([data-behavior]):not([data-skip- pjax])').pjax('[data-pjax-container]'); }); 12年10月28⽇日星期⽇日 

http://rocodev.com CBDL
UP
<5VSCPMJOLT> 12年10月28⽇日星期⽇日 

http://rocodev.com QKBY
ሣ
DPOUBJOFS
ییܭֱ 12年10月28⽇日星期⽇日 

http://rocodev.com 5VSCPMJOLT ○ 放大絕招 : 換掉整個 ○ 無痛安裝: ○ bundle install turbolinks ○ //=require turbolinks https://github.com/rails/turbolinks/blob/master/lib/assets/ javascripts/turbolinks.js.coffee 12年10月28⽇日星期⽇日 

http://rocodev.com #FOFpU ○ 不需要 jQuery ○ 不需要對每個 page 重新 compile JS/CSS ○ 2x fast with little JS/CSS ○ 3x fast with lots JS/CSS ○ 對 heavy asset 、light content 有非常強 大的提速效果 https://github.com/steveklabnik/turbolinks_test 12年10月28⽇日星期⽇日 

http://rocodev.com BMTP ○ opt-out: data-no-tubolinks on parent node ○ assets change detection: full reload ○ data-method, data-remote, data- confirm with Rails still works ○ full speed for pushState browsers,gracefully fallback for everything else 12年10月28⽇日星期⽇日 

http://rocodev.com TUJMM
#FUB
OPX 12年10月28⽇日星期⽇日 

http://rocodev.com ᔤੜ໰୊ ○ 多數的 javascript 寫法，並不假設會有 Turbolinks 這種東西。 ○ 大多數熱門 plugin 可以配合 Turbolinks。 但自己寫的有可能就...GG ○ 有可能某天死在某個 3rd party plugin 上 https://github.com/kossnocorp/jquery.turbolinks 12年10月28⽇日星期⽇日 

http://rocodev.com 4VHHFTUJPO ○ designed to be long-lived across many different HTML pages without a refresh ○ Don't register event handlers or other bindings in a refresh handler unless you reliably tear them down. ○ You audit all third-party code that you use to make sure that they do not rely on DOM Ready events, or if they do, that they DOM Ready events areidempotent. 12年10月28⽇日星期⽇日 

http://rocodev.com 5IBOLT 12年10月28⽇日星期⽇日