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
PipeCDのプラグイン化で目指すところ
warashi
1
270
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
760
ふつうの技術スタックでアート作品を作ってみる
akira888
1
490
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
210
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
760
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
510
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
150
Goで作る、開発・CI環境
sin392
0
220
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
350
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
120
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Done Done
chrislema
184
16k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Adopting Sorbet at Scale
ufuk
77
9.4k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Stop Working from a Prison Cell
hatefulcrawdad
270
21k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
52k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Site-Speed That Sticks
csswizardry
10
680
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