Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Turbolinks 入門
Search
蒼時弦や
December 02, 2016
Programming
2
380
Turbolinks 入門
Ruby Conf Taiwan 2016 簡報
蒼時弦や
December 02, 2016
Tweet
Share
More Decks by 蒼時弦や
See All by 蒼時弦や
2024 - COSCUP - Clean Architecture in Rails
elct9620
2
160
2023 - RubyConfTW - Rethink Rails Architecture
elct9620
0
160
20230916 - DDDTW - 導入 Domain-Driven Design 的最佳時機
elct9620
0
420
2023 - WebConf - 選擇適合你的技能組合
elct9620
0
630
20230322 - Generative AI 小聚 ft. Happy Designer
elct9620
0
370
2022 - 默默會 - 重新學習 MVC 的 Model
elct9620
1
440
MOPCON 2022 - 從 Domain-Driven Design 看網站開發框架隱藏
elct9620
1
470
2022 - COSCUP - 我想慢慢寫程式該怎麼辦?
elct9620
0
250
2022 - COSCUP - 打造高速 Ruby 專案開發流程
elct9620
0
280
Other Decks in Programming
See All in Programming
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
110
Go製CLIツールをnpmで配布するには
syumai
0
760
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
250
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
0
190
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
3
290
QA x AIエコシステム段階構築作戦
osu
0
210
Workers を定期実行する方法は一つじゃない
rokuosan
0
130
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
220
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.4k
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
4
1.3k
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
2
200
AI Ramen Fight
yusukebe
0
120
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Music & Morning Musume
bryan
46
6.7k
Raft: Consensus for Rubyists
vanstee
140
7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Building an army of robots
kneath
306
45k
A designer walks into a library…
pauljervisheath
207
24k
KATA
mclloyd
30
14k
What's in a price? How to price your products and services
michaelherold
246
12k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
How GitHub (no longer) Works
holman
314
140k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Transcript
Turbolinks 入門
WEB GENERATOR GAME DEVELOPER 襟 儘 䓛⛳ @elct9620
None
技術原理 Turbolinks API 效果展示 Turbolinks 入門
Turbolinks 是基於 HTML5 的 History API 所實現 的技術。 技術原理
在過去 History API 只用於切換上一頁或者下一頁。 技術原理
Turbolinks API history.back(); history.forward(); 原始的 History API
HTML5 新增的 pushState 功能則讓我們可以對瀏 覽紀錄進行操作。 技術原理
技術原理
技術原理
技術原理
技術原理
技術原理 var newState = { pageName: 'New Page', controller: 'acticle',
id: '1' }; window.history.push( newState, newState.pageName, "/article/1");
技術原理
技術原理
另外還有 popState 跟 history.state 可以讓我們存 取和捕捉目前的狀態。 技術原理
Turbolinks 是受到 PJAX 技術的影響產生的產物。 技術原理
技術原理
技術原理
很多時候我們在使用 Rails 會把 Turbolinks 關閉, 因為跟 JavaScript 常常出現衝突。 不過這只是因為沒有了解 Turbolinks
的使用方式而 已。 Turbolinks API
Turbolinks API <a href="https://google.com" data-turbolinks=“false"> Google </a> 取消 Turbolinks 效果
Turbolinks API <script data-turbolinks-eval=“false" src="// cdn.example.js/pixel.js"></script> 限制 JavaScript 重複執行
Turbolinks API <link href="/assets/style-201611041620.css" data- turbolinks-track="reload" rel="stylesheet"/> 追蹤 Assets 更新並且重新載入
Turbolinks API <meta name="turbolinks-root" content="/app"> 限定 Turbolinks 生效範圍
Turbolinks API <meta name="turbolinks-cache-control" content="no- cache"> 取消頁面快取
Turbolinks API <div id="shared" data-turbolinks-permanent>1 items</ div> 跨頁面共享元素
Turbolinks API .turbolinks-progress-bar { height: 5px; background-color: green; } 顯示進度條
雖然透過屬性的設定可以做到不少調整,但是與 JavaScript 搭配的時候,還是需要能夠相互搭配才 行。 Turbolinks API
Turbolinks API $(document).ready(function() { // OnLoad... }); 大多數時候我們會在 jQuery 的
ready() 做處理
Turbolinks API $(document).on("turbolinks:load, function(){ // OnLoad... }); 不過在 Turbolinks 要改用
Turbolinks 的 load 事件
jQuery.ready => 頁面讀取觸發 Turbolinks:load => 替換頁面時觸發 Turbolinks API
jQuery.ready => 頁面讀取觸發 Turbolinks:load => 替換頁面時觸發 Turbolinks API
jQuery.ready => 頁面讀取觸發 Turbolinks:load => 替換頁面時觸發 Turbolinks API
Turbolinks API Turbolinks.visit('/edit/1'); 觸發 Turbolinks 換頁
Turbolinks API Turbolinks.visit('/edit/1', {action: 'replace'}); 用 replaceState 方式換頁
Turbolinks API Turbolinks.clearCache(); 清除快取
Pinterest 效果 DEMO 時間
None