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

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

Kalan
October 03, 2020
Programming
0
170

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

Kalan

October 03, 2020
Tweet

More Decks by Kalan

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

Other Decks in Programming

See All in Programming
個人アプリを2年ぶりにアプデしたから褒めて / I just updated my personal app, praise me!
lovee
0
270
QA環境で誰でも自由自在に現在時刻を操って検証できるようにした話
kalibora
1
150
『改訂新版 良いコード／悪いコードで学ぶ設計入門』活用方法−爆速でスキルアップする！効果的な学習アプローチ / effective-learning-of-good-code
minodriven
29
4.6k
Alba: Why, How and What's So Interesting
okuramasafumi
0
230
サーバーゆる勉強会 DBMS の仕組み編
kj455
1
330
Flatt Security XSS Challenge 解答・解説
flatt_security
0
790
Terraform で作る Amazon ECS の CI/CD パイプライン
hiyanger
0
110
月刊 競技プログラミングをお仕事に役立てるには
terryu16
1
1.2k
盆栽転じて家具となる / Bonsai and Furnitures
aereal
0
2.1k
Beyond ORM
77web
11
1.6k
Оптимизируем производительность блока Казначейство
lamodatech
0
980
AWS re:Invent 2024個人的まとめ
satoshi256kbyte
0
140

Featured

See All Featured
A designer walks into a library…
pauljervisheath
205
24k
Why Our Code Smells
bkeepers
PRO
335
57k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Code Reviewing Like a Champion
maltzj
521
39k
Making Projects Easy
brettharned
116
6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Embracing the Ebb and Flow
colly
84
4.5k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
113
50k

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