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

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

Avatar for Kalan Kalan
October 03, 2020
Programming
230
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
410
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
Avatar for Kalan kjj6198
0
220
状態管理を楽にする道
Avatar for Kalan kjj6198
1
430
Day25. 如何解析 HTML 語法
Avatar for Kalan kjj6198
0
190
Svelte 如何編譯程式碼（1）
Avatar for Kalan kjj6198
0
240
Day22. Svelte 經驗談
Avatar for Kalan kjj6198
0
220
Day18. UI 實戰篇 - 圖片檢視器
Avatar for Kalan kjj6198
0
210
Day17. UI 實戰篇 - 音樂播放器
Avatar for Kalan kjj6198
0
110

Other Decks in Programming

See All in Programming
スマートグラスで並列バイブコーディング
Avatar for Hayami Shuhei hyshu
0
270
1B+ /day規模のログを管理する技術
Avatar for Broadleaf Co., Ltd. broadleaf
0
120
これからAgentCoreを触る方へ トレンドはGatewayです
Avatar for Har1101 har1101
6
440
TSKaigi Night Talks 2026_TypeScriptでサプライチェーンの整合性を型に閉じ込める
Avatar for ギークプラス ソフトウェア事業部 geekplus_tech
0
420
AI駆動開発を妨げる技術的負債の解消アプローチ / ai-refactoring-approach
Avatar for MinoDriven minodriven
15
8k
技術記事、 専門家としてのプログラマ、 言語化
Avatar for Koutarou Chikuba mizchi
13
6.6k
Oxlintのカスタムルールの現況
Avatar for syumai syumai
6
1.2k
LLM本来の能力を解き放つサンドボックス技術とAI民主化への適用
Avatar for Yuku Kotani yukukotani
3
4.7k
エンジニアと一緒にテストコードの設計と実装を改善した話
Avatar for mototakatsu mototakatsu
0
230
どこまでゆるくて許されるのか
Avatar for tk3fftk tk3fftk
0
280
ADKを使って簡単にAIエージェントを作ってみよう
Avatar for K1mu21 k1mu21
0
280
ECSアプリログをFireLensでコスト削減しようとしたけど諦めた話 in Fargate×Node.js
Avatar for アキキー | Akihisa Ikeda akihisaikeda
2
4.2k

Featured

See All Featured
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.9k
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
330
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
2.1k
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.3k
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
1
400
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.5k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
9.4k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
380
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
1
2.1k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
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