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

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

Avatar for Kalan Kalan
October 03, 2020
Programming
0
210

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

Avatar for Kalan

Kalan

October 03, 2020
Tweet

More Decks by Kalan

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

Other Decks in Programming

See All in Programming
Cap'n Webについて
Avatar for Yusuke Wada yusukebe
0
160
gunshi
Avatar for kazupon kazupon
1
130
Basic Architectures
Avatar for Denys Poltorak denyspoltorak
0
150
2年のAppleウォレットパス開発の振り返り
Avatar for muno92 muno92
PRO
0
130
令和最新版Android Studioで化石デバイス向けアプリを作る
Avatar for Sora Arakawa arkw
0
470
愛される翻訳の秘訣
Avatar for Kishikawa Katsumi kishikawakatsumi
3
360
Deno Tunnel を使ってみた話
Avatar for すずとも kamekyame
0
290
AtCoder Conference 2025「LLM時代のAHC」
Avatar for Yuki Imajuku imjk
2
620
はじめてのカスタムエージェント【GitHub Copilot Agent Mode編】
Avatar for Satoshi Kaneyasu satoshi256kbyte
0
130
LLM Çağında Backend Olmak: 10 Milyon Prompt'u Milisaniyede Sorgulamak
Avatar for Selçuk Usta selcukusta
0
140
LLMで複雑な検索条件アセットから脱却する！！ 生成的検索インタフェースの設計論
Avatar for po3rin po3rin
4
1k
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
550

Featured

See All Featured
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.3k
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
3.9k
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
57
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
51k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.3k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
1
330
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
6.8k
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
120
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
9
35k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
54
8k

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