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

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

Avatar for Kalan Kalan
October 03, 2020
Programming
0
190

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

Avatar for Kalan

Kalan

October 03, 2020
Tweet

More Decks by Kalan

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

Other Decks in Programming

See All in Programming
NPOでのDevinの活用
Avatar for みんなのコード codeforeveryone
0
730
技術同人誌をMCP Serverにしてみた
Avatar for 74th(Atsushi Morimoto) 74th
1
590
Deep Dive into ~/.claude/projects
Avatar for Yuya Hirayama hiragram
12
2.3k
ISUCON研修おかわり会 講義スライド
Avatar for Yuki Yata arfes0e2b3c
0
300
LT 2025-06-30: プロダクトエンジニアの役割
Avatar for Keisuke Yamamoto yamamotok
0
680
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
Avatar for Hayato OKUMOTO falcon8823
5
1.1k
Team topologies and the microservice architecture: a synergistic relationship
Avatar for Chris Richardson cer
PRO
0
1.2k
20250628_非エンジニアがバイブコーディングしてみた
Avatar for ponponmikan ponponmikankan
0
640
なぜ「共通化」を考え、失敗を繰り返すのか
Avatar for Rinchoku rinchoku
1
630
新メンバーも今日から大活躍！SREが支えるスケールし続ける組織のオンボーディング
Avatar for HonMarkHunt honmarkhunt
3
3.3k
5つのアンチパターンから学ぶLT設計
Avatar for Narihara narihara
1
150
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
Avatar for Shohei Okada okashoi
1
220

Featured

See All Featured
Fireside Chat
Avatar for paigeccino paigeccino
37
3.5k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
54
13k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
69
11k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
124
52k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.6k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.3k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
51
8.5k
Code Review Best Practice
Avatar for Trisha Gee trishagee
69
18k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
207
24k

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