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

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

Avatar for Kalan Kalan
October 03, 2020
Programming
240
0

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

Avatar for Kalan

Kalan

October 03, 2020

More Decks by Kalan

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

Other Decks in Programming

See All in Programming
Jindong: Introducing Declarative Haptics in Compose Multiplatform
Avatar for HyunWoo Lee l2hyunwoo
0
140
Loosening the Reins: Go Generics Get More Flexible
Avatar for kuro kuro_kurorrr
0
360
PHPプロジェクトの結合バランスを可視化する #php_night
Avatar for Takuma Kajikawa kajitack
0
190
Go 1.27 における memory allocation の高速化
Avatar for ANDPAD inc andpad
0
370
レビュー履歴をAIに食わせて、 Compose移行を加速するs
Avatar for Yuki Shiho shihochan
0
260
이 함수, 실패하면 어떻게 되나요? null부터 Rich Errors까지, Kotlin 에러 처리 15년
Avatar for TaeHee Lee haeti2
0
110
Claude Codeを組織的に動かして月400PRを実現した話
Avatar for happy_ryo happy_ryo
0
240
まずはプロンプトガイドを読もう、話はそれからだ
Avatar for Akira TSURUDA kiakiraki
1
250
楽しそうなつよつよエンジニアと目が死んでる僕/A brilliant engineer having a blast, and dead-eyed me.
Avatar for Ryusei Ohkura 3l4l5
2
270
Cloudflare is Agents
Avatar for chimame chimame
0
190
源内ハンズオン概要編
Avatar for Hideyuki Nagata hideg
0
240
思考垂れ流し開発　～音声入力 × AIエージェント × 開発ハーネスによる試行錯誤～
Avatar for NPOS npostring
0
710

Featured

See All Featured
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
510
New Earth Scene 8
Avatar for Sydney Stone popppiees
3
2.5k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
3
1.2k
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
410
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
320
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
460
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
1.1k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
12k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
370
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
500
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
3
490

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