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

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

Avatar for Kalan Kalan
October 03, 2020
Programming
0
180

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
330
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
Avatar for Kalan kjj6198
0
160
状態管理を楽にする道
Avatar for Kalan kjj6198
1
350
Day25. 如何解析 HTML 語法
Avatar for Kalan kjj6198
0
140
Svelte 如何編譯程式碼（1）
Avatar for Kalan kjj6198
0
180
Day22. Svelte 經驗談
Avatar for Kalan kjj6198
0
150
Day18. UI 實戰篇 - 圖片檢視器
Avatar for Kalan kjj6198
0
150
Day17. UI 實戰篇 - 音樂播放器
Avatar for Kalan kjj6198
0
63

Other Decks in Programming

See All in Programming
オープンソースコントリビュート入門
Avatar for katsuma _katsuma
0
120
カウシェで Four Keys の改善を試みた理由
Avatar for ike ike002jp
1
130
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
Avatar for Masayuki Izumi izumin5210
6
1.5k
Improve my own Ruby
Avatar for monochrome sisshiki1969
0
100
Road to RubyKaigi: Making Tinny Chiptunes with Ruby
Avatar for makicamel makicamel
4
540
KANNA Android の技術的課題と取り組み
Avatar for Yosuke Watanabe watabee
0
200
generative-ai-use-cases(GenU)の推しポイント ～2025年4月版～
Avatar for Hideyuki Nagata hideg
1
380
Bedrock×MCPで社内ブログ執筆文化を育てたい！
Avatar for Har1101 har1101
7
1.5k
「理解」を重視したAI活用開発
Avatar for FastDOCTOR fast_doctor
0
290
2ヶ月で生産性2倍、お買い物アプリ「カウシェ」4チーム同時改善の取り組み
Avatar for ike ike002jp
1
110
Rubyの!メソッドをちゃんと理解する
Avatar for Yuto Urushima alstrocrack
1
130
Vibe Coding の話をしよう
Avatar for schroneko schroneko
14
3.7k

Featured

See All Featured
The Language of Interfaces
Avatar for Des Traynor destraynor
158
25k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
57k
It's Worth the Effort
Avatar for 3n 3n
184
28k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
34
2.2k
Fireside Chat
Avatar for paigeccino paigeccino
37
3.4k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
7
410
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
47
2.7k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
523
40k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
71
4.8k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
133
9.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
30
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