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
160
状態管理を楽にする道
Avatar for Kalan kjj6198
1
360
Day25. 如何解析 HTML 語法
Avatar for Kalan kjj6198
0
140
Svelte 如何編譯程式碼（1）
Avatar for Kalan kjj6198
0
180
Day22. Svelte 經驗談
Avatar for Kalan kjj6198
0
160
Day18. UI 實戰篇 - 圖片檢視器
Avatar for Kalan kjj6198
0
150
Day17. UI 實戰篇 - 音樂播放器
Avatar for Kalan kjj6198
0
66

Other Decks in Programming

See All in Programming
Webからモバイルへ Vue.js × Capacitor 活用事例
Avatar for Naoki Haba naokihaba
0
540
💎 My RubyKaigi Effect in 2025: Top Ruby Companies 🌐
Avatar for Yohei Yasukawa yasulab
PRO
1
130
Using AI Tools Around Software Development
Avatar for inouehi inouehi
0
1.2k
イベントストーミングから始めるドメイン駆動設計
Avatar for おだかとしゆき jgeem
4
820
つよそうにふるまい、つよい成果を出すのなら、つよいのかもしれない
Avatar for irof irof
1
280
Parallel::Pipesの紹介
Avatar for Shoichi Kaji skaji
2
910
Cloudflare Realtime と Workers でつくるサーバーレス WebRTC
Avatar for Taiyu Yoshizawa nekoya3
0
390
PT AI без купюр
Avatar for Vladimir Kochetkov v0lka
0
230
Passkeys for Java Developers
Avatar for Yoshikazu Nojima ynojima
3
850
Perlで痩せる
Avatar for Yuuki Shimizu yuukis
1
680
AIコーディング道場勉強会#2 君（エンジニア）たちはどう生きるか
Avatar for misaki.otb misakiotb
1
130
Bytecode Manipulation 으로 생산성 높이기
Avatar for Daekyu bigstark
1
290

Featured

See All Featured
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
231
18k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.6k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
77
5.8k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
4
130
Scaling GitHub
Avatar for Zach Holman holman
459
140k
Fireside Chat
Avatar for paigeccino paigeccino
37
3.5k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
524
40k
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
36
2.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
47
2.8k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
367
19k

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