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

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

Avatar for Kalan Kalan
October 03, 2020
Programming
0
200

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

Avatar for Kalan

Kalan

October 03, 2020
Tweet

More Decks by Kalan

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

Other Decks in Programming

See All in Programming
ソフトウェアテスト徹底指南書の紹介
Avatar for Hiroki Iseri goyoki
1
110
デザインシステムが必須の時代に
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
2
110
AWS Serverless Application Model入門_20250708
Avatar for ShinMatsuzaki smatsuzaki
0
130
コンテキストエンジニアリング Cursor編
Avatar for kinopee kinopeee
1
710
「リーダーは意思決定する人」って本当？～ 学びを現場で活かす、リーダー4ヶ月目の試行錯誤 ～
Avatar for Marina Nakagawa marina1017
0
240
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
180
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
Avatar for Takumi Abe east_takumi
0
170
🔨 小さなビルドシステムを作る
Avatar for Mutsuha Asada momeemt
2
530
エンジニアのための”最低限いい感じ”デザイン入門
Avatar for しゅん🌙 shunshobon
0
130
tool ディレクティブを導入してみた感想
Avatar for Sugar Sato sgash708
1
150
サーバーサイドのビルド時間87倍高速化
Avatar for PLAID Tech plaidtech
PRO
0
500
コーディングは技術者(エンジニア)の嗜みでして / Learning the System Development Mindset from Rock Lady
Avatar for mackey0225 mackey0225
2
580

Featured

See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Scaling GitHub
Avatar for Zach Holman holman
462
140k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
160
23k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
179
9.9k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
23
3.6k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
279
23k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.8k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
50
5.5k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
30
6k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
695
190k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
431
65k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
271
21k

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