$30 off During Our Annual Pro Sale. View Details »

Day24. Svelte 如何編譯程式碼(2)

Kalan
October 03, 2020

Day24. Svelte 如何編譯程式碼(2)

Kalan

October 03, 2020
Tweet

More Decks by Kalan

Other Decks in Programming

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