Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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

Avatar for Kalan Kalan
October 03, 2020
Programming
260
0

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

Avatar for Kalan

Kalan

October 03, 2020

More Decks by Kalan

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

Other Decks in Programming

See All in Programming
残高管理から台帳サービスへの進化
Avatar for kobaryo artoy
1
190
Turning Architecture into Unit Tests in the AI Era (NSSpain XIV)
Avatar for Stelios Frantzeskakis steliosf
PRO
1
140
JRuby: Past, Present, and Future
Avatar for headius headius
0
230
KiroのSpecで「五目並べ」を作ってみる
Avatar for Satoshi Kaneyasu satoshi256kbyte
1
370
When benchmarks go bad - what I learned from measuring performance wrong
Avatar for Holly Cummins hollycummins
0
210
Atomic Design, Enforced: Scaling Mobile Design Systems (next.app devCon / droidCon Berlin 2026)
Avatar for Stelios Frantzeskakis steliosf
PRO
0
170
カツオ、ご期待ください
Avatar for saku_totomi suneo3476
0
170
mrbgem 三角測量 開発
Avatar for ogom ogom
0
240
[Rails World 2026] Durable orchestration on Rails: from continuation to workflow
Avatar for Vladimir Dementyev palkan
1
730
パズルゲームの作り方 / how to make puzzle games
Avatar for kaityo256 kaityo256
PRO
2
290
Kubernetes祭り #2 OP/ED
Avatar for bells17 bells17
0
110
なぜCTOを降りてFDEを選んだのか？〜なぜプロダクト企業がFDEで顧客の現場に踏み込むのか〜
Avatar for ryuta sakamoto gonta
1
190

Featured

See All Featured
Building an army of robots
Avatar for Kyle Neath kneath
307
47k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
400
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.9k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
3k
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
500
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
3
4.4k
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
980
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
433
67k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
22k
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
1
800

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