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
820
選擇 Svelte 的三個理由 - JSDC
Avatar for Kalan kjj6198
0
400
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
Avatar for Kalan kjj6198
0
220
状態管理を楽にする道
Avatar for Kalan kjj6198
1
420
Day25. 如何解析 HTML 語法
Avatar for Kalan kjj6198
0
180
Svelte 如何編譯程式碼（1）
Avatar for Kalan kjj6198
0
240
Day22. Svelte 經驗談
Avatar for Kalan kjj6198
0
210
Day18. UI 實戰篇 - 圖片檢視器
Avatar for Kalan kjj6198
0
200
Day17. UI 實戰篇 - 音樂播放器
Avatar for Kalan kjj6198
0
100

Other Decks in Programming

See All in Programming
WebAssembly を読み込むベストプラクティス 2026年春版 / Best Practices for Loading WebAssembly (Spring 2026)
Avatar for petamoriken / 森建 petamoriken
5
1.1k
Agent Skills を社内で育てる仕組み作り
Avatar for jackchuka jackchuka
1
2.3k
AI駆動開発勉強会 広島支部 第一回勉強会 AI駆動開発概要とワークショップ
Avatar for smz hyt hayatoshimiu
0
350
Stage 3 Decorators でできること / できないこと / TSKaigi 2026
Avatar for Susisu susisu
1
440
Modding RubyKaigi for Myself
Avatar for yui-knk yui_knk
0
400
「OSSがあるなら自作するな」は AI時代も正しいか ── Build vs Adopt の新しい判断基準
Avatar for Kumo Ishikawa kumorn5s
7
2.9k
Kubernetesを使わない環境にもCloud Nativeなデプロイを実現する / Enabling Cloud Native deployments without the complexity of Kubernetes
Avatar for linyows linyows
3
510
Spec-Driven Development with AI Agents (Workshop, May 2026)
Avatar for Anton Arhipov antonarhipov
4
430
OCRを使ってゲームのアイテムをデータ化する
Avatar for Kishikawa Katsumi kishikawakatsumi
0
110
RailsTokyo 2026#4: AI様があれば、
Hotwireの弱点は消えるか？
Avatar for Naofumi Kagami naofumi
4
510
Migrations : C'est une question d'hygiène !
Avatar for Vincent Amstoutz vinceamstoutz
0
1.1k
tsserverとは何だったのか、これからどうなるのか
Avatar for Ryota Nakamura nowaki28
1
340

Featured

See All Featured
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
240
Visualization
Avatar for Eitan Lees eitanlees
151
17k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
3
360
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
290
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
2
1k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
17k
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.3k
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
5.8k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
3.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k

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