iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

Web Component 網頁元件之路 系列

當我是 React 工程師時 , 我使用 Material-UI ,
當我是 Vue 工程師時 , 我需要用 Element-UI ,
那我換到 Angular 時 , 我需要學新的一套 UI 框架 (っ °Д °;)っ
有沒有不更換 UI 框架的方法呢 ?
基於上方的問題 , 我踏上了 Web Component 網頁元件的旅途
希望各位看官喜歡這 30 天的沿途風景 <( _ _ )>

鐵人鍊成 | 共 30 篇文章 | 6 人訂閱 訂閱系列文 RSS系列文
DAY 21

[Day21] - 製作 Web component 的一些工具

前幾天我們花費心力 , 說明 Web Component 如何製作 , 與當資料變換時 , 我們需要使用的 _render 還有就是全部更新太耗效能 , 而需要...

2021-09-25 ‧ 由 Tree 分享
DAY 22

[Day22] - 介紹 LitElement 如何使用

今天我們來介紹一下 , 昨天說明的 Web Component 框架中的其中之一 - LitElement 特別拿出來介紹 , 是因為你可以不需要 compil...

2021-09-26 ‧ 由 Tree 分享
DAY 23

[Day23] - 介紹 Stencil.js 如何使用

今天我們來介紹一下 , 昨天說明的 Web Component 框架中的其中之一 - stencil.js 特別拿出來介紹 , 是因為如果你想要用 TypeSc...

2021-09-27 ‧ 由 Tree 分享
DAY 24

[Day24] - 介紹 Svelte.js 如何使用

前幾天我們有說明 Virtual Dom 如何實作 , 今天我們來介紹一個 反對 Virtual Dom 的工具 Svelte.js 內文 Svelte.js...

2021-09-28 ‧ 由 Tree 分享
DAY 25

[Day25] - Vue 的 Html 字串處理 ( compiler 介紹 )

day-13 介紹 , 當資料改變時 , 我們可以利用 _render 來更新 dom 每次更新 isLogin 的資料時 , 就會用 innerHTML 更新...

2021-09-29 ‧ 由 Tree 分享
DAY 26

[day26] - Vue 的 Html 字串處理 ( 簡易版 tokenizer 實作 )

/** * transform a string into an array of tokens * @param htmlString {string}...

2021-09-30 ‧ 由 Tree 分享
DAY 27

[day27] - Vue 的 Html 字串處理 ( 簡易版 parser 實作 )

今天要將昨天的 tagList 轉換成 ast // input tagList const tagList = [ { type: 'tagStart',...

2021-10-01 ‧ 由 Tree 分享
DAY 28

[Day28] - Vue 的 Html 字串處理 ( renderer 介紹 )

function h(tag, children) { return { tag, children } } /** * transform the a...

2021-10-02 ‧ 由 Tree 分享
DAY 29

[day29] - the diff function in Vue

後來發現 , 之前說明了 Vue . React Component 如何變成 Web Component 但是忘記說明 Angular Component 如...

2021-10-03 ‧ 由 Tree 分享
DAY 30

[day30] - 總結 30 天 Web Component 的旅途

需要補上前幾天的內文 &amp; 整理 30 天到底做了什麼 ? 內文 ---待處理

2021-10-04 ‧ 由 Tree 分享