Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Day24. Svelte 如何編譯程式碼（2）

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Kalan Kalan
October 03, 2020
Programming
0
220

Day24. Svelte 如何編譯程式碼（2）

Avatar for Kalan

Kalan

October 03, 2020
Tweet

More Decks by Kalan

See All by Kalan
單頁式應用中的無障礙設計
Avatar for Kalan kjj6198
0
810
選擇 Svelte 的三個理由 - JSDC
Avatar for Kalan kjj6198
0
380
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
Avatar for Kalan kjj6198
0
200
状態管理を楽にする道
Avatar for Kalan kjj6198
1
410
Day25. 如何解析 HTML 語法
Avatar for Kalan kjj6198
0
160
Svelte 如何編譯程式碼（1）
Avatar for Kalan kjj6198
0
220
Day22. Svelte 經驗談
Avatar for Kalan kjj6198
0
190
Day18. UI 實戰篇 - 圖片檢視器
Avatar for Kalan kjj6198
0
180
Day17. UI 實戰篇 - 音樂播放器
Avatar for Kalan kjj6198
0
91

Other Decks in Programming

See All in Programming
AI時代の認知負荷との向き合い方
Avatar for OptFit Corp. optfit
0
170
Gemini for developers
Avatar for Mete Atamel meteatamel
0
100
AIで開発はどれくらい加速したのか？AIエージェントによるコード生成を、現場の評価と研究開発の評価の両面からdeep diveしてみる
Avatar for どすこい daisuketakeda
1
2.5k
ノイジーネイバー問題を解決する 公平なキューイング
Avatar for Shoichi Ochi occhi
0
110
Vibe Coding - AI 驅動的軟體開發
Avatar for Micky Li mickyp100
0
180
dchart: charts from deck markup
Avatar for Anthony Starks ajstarks
3
1k
カスタマーサクセス業務を変革したヘルススコアの実現と学び
Avatar for Tomoyuki Hamaguchi _hummer0724
0
740
Lambda のコードストレージ容量に気をつけましょう
Avatar for tatsuki-yamada tattwan718
0
150
AIエージェント、”どう作るか”で差は出るか？ / AI Agents: Does the "How" Make a Difference?
Avatar for r-kagaya rkaga
4
2k
2026年 エンジニアリング自己学習法
Avatar for yumechi(Motoki Hirao) yumechi
0
140
AWS re:Invent 2025参加 直前 Seattle-Tacoma Airport(SEA)におけるハードウェア紛失インシデントLT
Avatar for tetutetu214 tetutetu214
2
120
Unicodeどうしてる？ PHPから見たUnicode対応と他言語での対応についてのお伺い
Avatar for てきめん tekimen youkidearitai
PRO
1
2.6k

Featured

See All Featured
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
910
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon szymonslowik
1
920
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.2k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.8k
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
1
440
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
170
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.6k
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.3k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k

Transcript

  1. 第 12 屆 IT 鐵⼈賽 30 天從 0 到 1

    學 Svelte Day24 - Svelte 如何編譯程式碼（2）

  2. 第 12 屆 IT 鐵⼈賽 Svelte 會將元件編譯

  3. 第 12 屆 IT 鐵⼈賽 create_fragment

  4. 第 12 屆 IT 鐵⼈賽 create_fragment c(create): 建立 element element:

    document.createElement text: document.createTextNode append: target.appendChild detach: target.removeChild

  5. 第 12 屆 IT 鐵⼈賽 create_fragment m(mount): 將 Element 放入

    DOM 當中 p(patch): 元件更新時的執⾏函數 i(intro): 當 transition 存在時的執⾏ 函數 o(outro)：當 transition 出場時 d(detch): 當元件銷毀時的執⾏函數

  6. 第 12 屆 IT 鐵⼈賽 instance Svelte 元件裡頭執⾏的程式會被包在 instance 中

  7. 第 12 屆 IT 鐵⼈賽 event listener

  8. 第 12 屆 IT 鐵⼈賽 SvelteComponent

  9. 第 12 屆 IT 鐵⼈賽 SvelteComponent