Turbolinks 入門

Ruby Conf Taiwan 2016 簡報

Transcript

1. Turbolinks 入門
2. WEB GENERATOR GAME DEVELOPER 襟 儘 䓛⛳ @elct9620
4. 技術原理 Turbolinks API 效果展示 Turbolinks 入門
5. Turbolinks 是基於 HTML5 的 History API 所實現 的技術。 技術原理
6. 在過去 History API 只用於切換上一頁或者下一頁。 技術原理
7. Turbolinks API history.back(); history.forward(); 原始的 History API
8. HTML5 新增的 pushState 功能則讓我們可以對瀏 覽紀錄進行操作。 技術原理
9. 技術原理
10. 技術原理
11. 技術原理
12. 技術原理
13. 技術原理 var newState = { pageName: 'New Page', controller: 'acticle', id: '1' }; window.history.push( newState, newState.pageName, "/article/1");
14. 技術原理
15. 技術原理
16. 另外還有 popState 跟 history.state 可以讓我們存 取和捕捉目前的狀態。 技術原理
17. Turbolinks 是受到 PJAX 技術的影響產生的產物。 技術原理
18. 技術原理
19. 技術原理
20. 很多時候我們在使用 Rails 會把 Turbolinks 關閉， 因為跟 JavaScript 常常出現衝突。 不過這只是因為沒有了解 Turbolinks 的使用方式而 已。 Turbolinks API
21. Turbolinks API <a href="https://google.com" data-turbolinks=“false"> Google </a> 取消 Turbolinks 效果
22. Turbolinks API <script data-turbolinks-eval=“false" src="// cdn.example.js/pixel.js"></script> 限制 JavaScript 重複執行
23. Turbolinks API <link href="/assets/style-201611041620.css" data- turbolinks-track="reload" rel="stylesheet"/> 追蹤 Assets 更新並且重新載入
24. Turbolinks API <meta name="turbolinks-root" content="/app"> 限定 Turbolinks 生效範圍
25. Turbolinks API <meta name="turbolinks-cache-control" content="no- cache"> 取消頁面快取
26. Turbolinks API <div id="shared" data-turbolinks-permanent>1 items</ div> 跨頁面共享元素
27. Turbolinks API .turbolinks-progress-bar { height: 5px; background-color: green; } 顯示進度條
28. 雖然透過屬性的設定可以做到不少調整，但是與 JavaScript 搭配的時候，還是需要能夠相互搭配才 行。 Turbolinks API
29. Turbolinks API $(document).ready(function() { // OnLoad... }); 大多數時候我們會在 jQuery 的 ready() 做處理
30. Turbolinks API $(document).on("turbolinks:load, function(){ // OnLoad... }); 不過在 Turbolinks 要改用 Turbolinks 的 load 事件
31. jQuery.ready => 頁面讀取觸發 Turbolinks:load => 替換頁面時觸發 Turbolinks API
32. jQuery.ready => 頁面讀取觸發 Turbolinks:load => 替換頁面時觸發 Turbolinks API
33. jQuery.ready => 頁面讀取觸發 Turbolinks:load => 替換頁面時觸發 Turbolinks API
34. Turbolinks API Turbolinks.visit('/edit/1'); 觸發 Turbolinks 換頁
35. Turbolinks API Turbolinks.visit('/edit/1', {action: 'replace'}); 用 replaceState 方式換頁
36. Turbolinks API Turbolinks.clearCache(); 清除快取
37. Pinterest 效果 DEMO 時間