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

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

Kalan
October 03, 2020
Programming
0
180

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

Kalan

October 03, 2020
Tweet

More Decks by Kalan

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

Other Decks in Programming

See All in Programming
Better Code Design in PHP
afilina
0
180
機能が複雑化しても 頼りになる FactoryBotの話
tamikof
1
250
React 19アップデートのために必要なこと
uhyo
8
1.6k
読まないコードリーディング術
hisaju
0
120
1年目の私に伝えたい！テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
1
660
複数のAWSアカウントから横断で 利用する Lambda Authorizer の作り方
tc3jp
0
130
GoとPHPのインターフェイスの違い
shimabox
2
220
Honoとフロントエンドの 型安全性について
yodaka
7
1.5k
Rubyと自由とAIと
yotii23
6
1.9k
Jakarta EE meets AI
ivargrimstad
0
680
良いコードレビューとは
danimal141
9
8.4k
CloudRun, Spanner に対する負荷試験の反省と オブザーバビリティによるアプローチ
oyasumipants
1
180

Featured

See All Featured
It's Worth the Effort
3n
184
28k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Code Review Best Practice
trishagee
67
18k
Designing for Performance
lara
605
68k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7.1k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
Automating Front-end Workflow
addyosmani
1369
200k
Rails Girls Zürich Keynote
gr2m
94
13k
Adopting Sorbet at Scale
ufuk
75
9.2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k

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