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

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
420
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
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 Satoshi Kaneyasu satoshi256kbyte
1
140
170k Jobs a Day on GKE: Scaling Mercari's CI Platform - and What's Next for AI-Native Development
Avatar for Junya Okabe junyaokabe
0
120
VibeCodingからAgenticWorkflowへ
Avatar for starfish719 starfish719
0
780
初めての模倣学習とVLA
Avatar for Minoru Natsutani natsutan
0
190
承認済みなのに差戻しできてしまうバグ、型で潰せます
Avatar for SHINCHI Takahiro shinchit
0
100
書籍「プロフェッショナルAI駆動開発」紹介スライド
Avatar for Juntaro Matsumoto juntaromatsumoto
0
300
仕様駆動開発の消費期限
Avatar for watany watany
20
8.9k
異なる設計思想のフレームワークを経験して得た学び
Avatar for amekuhideki amekuhideki
1
180
コンパウンドプロダクト開発のためのローカルプロセスマネージャー再発明 #layerxgo
Avatar for izumin5210 izumin5210
0
180
プロポーザルを書いてもらう
Avatar for pvcresin pvcresin
0
570
今さら聞けない .NET CLI
Avatar for tkym htkym
0
210
仕様書を書く前にハーネスを作る - Agent Native開発は「探索を速く、判定を固く」
Avatar for Gota gotalab555
4
1.7k

Featured

See All Featured
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1033
470k
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
1
710
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
10k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
3k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
270
14k
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
290
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
201
75k
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
250
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.5k
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
Avatar for Marco Roth marcoroth
3
480
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
3
1.1k

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