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

Transcript

1. 第 12 屆 IT 鐵⼈賽
   30 天從 0 到 1 學 Svelte
   Day24 - Svelte 如何編譯程式碼（2）
   

   View Slide

2. 第 12 屆 IT 鐵⼈賽
   Svelte 會將元件編譯
   

   View Slide

3. 第 12 屆 IT 鐵⼈賽
   create_fragment
   

   View Slide

4. 第 12 屆 IT 鐵⼈賽
   create_fragment
   c(create): 建立 element
   element: document.createElement
   text: document.createTextNode
   append: target.appendChild
   detach: target.removeChild
   

   View Slide

5. 第 12 屆 IT 鐵⼈賽
   create_fragment
   m(mount): 將 Element 放入 DOM 當中
   p(patch): 元件更新時的執⾏函數
   i(intro): 當 transition 存在時的執⾏
   函數
   o(outro)：當 transition 出場時
   d(detch): 當元件銷毀時的執⾏函數
   

   View Slide

6. 第 12 屆 IT 鐵⼈賽
   instance
   Svelte 元件裡頭執⾏的程式會被包在 instance 中
   

   View Slide

7. 第 12 屆 IT 鐵⼈賽
   event listener
   

   View Slide

8. 第 12 屆 IT 鐵⼈賽
   SvelteComponent
   

   View Slide

9. 第 12 屆 IT 鐵⼈賽
   SvelteComponent
   

   View Slide