iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
Modern Web

web component - 次世代網頁技術的重要拼圖 系列

本系列主要介紹web component,主要分成以下主題:web component的優缺點,如何寫出web component,web conponent 的應用。

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

web component 的實做- 單項下拉選單組件

select元素是一個很常出現、很常使用也很難客製化的元素。所以我第一篇的實做會選擇select來客製化。為了能更好的複用組件,我會分成以下數個部分:顯示資料用...

2022-10-05 ‧ 由 BugofBook 分享
DAY 22

web component 的實做- 多選下拉選單組件

相較於昨天的單選下拉選單,多選下拉選單組件要修改的只有以下幾個組件:下拉選單的內容組件,以及把所有組件串起來的組件。同時還要追加一個顯示個別資料用的組件。 這篇...

2022-10-06 ‧ 由 BugofBook 分享
DAY 23

web component 的實做- virtualized list

web component是組件,好處之一就是能封裝功能,除了封裝UI之外,封裝Web api也是目標之一。本篇和下一篇文章會以IntersectionObse...

2022-10-07 ‧ 由 BugofBook 分享
DAY 24

web component 的實做- infinite-scroller

還在修改程式碼,今天也會晚一點放上關鍵的程式碼。還有,明天一定放上github給連結... 目標 把昨天的virtualized list組件加入infinit...

2022-10-08 ‧ 由 BugofBook 分享
DAY 25

web component 的實做- 實做組件庫或大量使用web component的建議

到上一篇為止都是以針對小區域來使用web component,我想這也是大多數可能使用web component技術的人的需求。畢竟,現在前端框架很流行(不限於...

2022-10-09 ‧ 由 BugofBook 分享
DAY 26

web component 組件庫實做建議-CSS篇

先說聲抱歉,本篇和下一篇都是以實做"VanillaJS"版本的web component組件庫為前提。大部分的web component編輯...

2022-10-10 ‧ 由 BugofBook 分享
DAY 27

web component 組件庫實做建議-大型複合組件

抱歉,這篇文章寫的錯誤百出,請各位無視這篇文章,我再找時間更新。 在使用web component建構組件庫的時侯,有一個很常見的問題,那就是web compo...

2022-10-11 ‧ 由 BugofBook 分享
DAY 28

web component 組件庫實做-介紹造輪子的工具庫

這幾天在找網路上的web component相關的庫,才發現自己之前的很多想法都是有問題的。想到我之前在專案中寫的東西,以及本次鐵人賽的部分文章。這下就算鐵人賽...

2022-10-12 ‧ 由 BugofBook 分享
DAY 29

web component 組件庫-介紹能直接使用的函式庫

這篇文章會以我知道的能箱使用的組件庫列出來,再加一點點心得 Material components web 這個函式庫是google利用LitElement這個...

2022-10-13 ‧ 由 BugofBook 分享
DAY 30

結語

今天是最後一天了,就來說一下我這次參加的心得好了。 我是前年就想參賽了,本次的主題也是那時就訂下了。但因為前年剛好在忙公司的案子,去年剛換工作不久,都沒有心情和...

2022-10-14 ‧ 由 BugofBook 分享