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

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

Avatar for Kalan Kalan
October 03, 2020
Programming
0
200

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

Avatar for Kalan

Kalan

October 03, 2020
Tweet

More Decks by Kalan

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

Other Decks in Programming

See All in Programming
iOSエンジニア向けの英語学習アプリを作る！
Avatar for yukawashouhei yukawashouhei
0
180
CSC509 Lecture 05
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
290
ABEMAモバイルアプリが
Kotlin Multiplatformと歩んだ5年 ─ 導入と運用、成功と課題 / iOSDC 2025
Avatar for Akio Yasui akkyie
0
320
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
Avatar for みずほリサーチ&テクノロジーズ株式会社 先端技術研究部 mhrtech
3
1k
Advance Your Career with Open Source
Avatar for ivargrimstad ivargrimstad
0
330
Serena MCPのすすめ
Avatar for wadakatu wadakatu
4
900
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
Avatar for Daichi KUDO da1chi
3
1.8k
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
Avatar for imkaoru imkaoru
4
590
After go func(): Goroutines Through a Beginner’s Eye
Avatar for Vaibhav Gupta 97vaibhav
0
230
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
Avatar for aokirishima aokswork3
0
190
猫と暮らすネットワークカメラ生活🐈 ~Vision frameworkでペットを愛でよう~ / iOSDC Japan 2025
Avatar for Yutaro Muta yutailang0119
0
220
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
Avatar for Itaru Ota ota1022
0
240

Featured

See All Featured
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
4
680
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
75
5k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
185
22k
Making Projects Easy
Avatar for Brett Harned brettharned
119
6.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
15k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
15
1.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.6k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k

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