MUKI space*
Front-end Development,
Effective Note-Taking.
使用 indexedDB Web API 製作預存後端 API 資料的功能
使用 indexedDB Web API 可以有效地在瀏覽器端預存後端 API 資料，從而減少 API 呼叫次數，提高使用者的讀取速度，並支持離線資料訪問。資料結構設計上，使用 rId 和日期範圍作為索引，以便精確檢索。核心功能包括初始化資料庫、清除資料庫、存入及取得快取資料，以及處理資料限制。這些功能能提升系統效能、降低伺服器負擔，並提供離線支持。
然而，使用 indexedDB 也有一些缺點，如增加管理複雜性、儲存限制和資料一致性問題。為解決這些問題，可能需要實作資料過期機制或使用版本號判斷資料新舊。此外，選擇 idb 套件可以簡化開發過程，提高效率。總結來說，indexedDB 提供了一個靈活的數據存儲解決方案，但需根據專案需求和資料正確性進行謹慎評估和實施。...
動態渲染 Vue 元件以及動態導入模組，簡化重複邏輯
在開發模組化功能時，使用大量的 v-if 來動態渲染 Vue 元件會導致程式碼重複且難以維護。為了解決這個問題，可以透過動態渲染元件和動態導入模組來簡化邏輯。首先，使用 Barrel Files 將模組集中管理，接著在 App.vue 中根據 moduleId 渲染對應的 Vue 元件，避免用大量的 v-if 判斷。進一步優化可以使用 Vue 的 動態元件搭配 Mapping 表格來渲染模組，這樣可以大幅減少重複的程式碼。
為了進一步簡化，推薦使用 Vite 的 import.meta.glob 功能，這樣可以自動批量導入模組，無需手動更新 Mapping 表格或 index.ts 檔案。透過這種方式，不僅程式碼更簡潔，未來新增或修改元件時只需將新檔案放入目錄即可，無需更改現有邏輯，讓開發和維護更加高效。這種動態渲染方式特別適合需要處理大量條件邏輯的場景。...
timestamp 轉換工具，我的 Chrome 擴充功能 Unix Timestamp Converter
在日常開發和數據處理中，Unix 時間戳的轉換常常繁瑣且容易出錯，因此開發了一款名為 Unix Timestamp Converter 的 Chrome 擴充功能。這款工具旨在簡化時間戳轉換過程，提升效率，並支持多時區轉換，適合需要頻繁處理時間數據的用戶。其介面設計簡單直觀，讓無論是技術人員還是非技術背景的使用者都能輕鬆使用。
Unix Timestamp Converter 的主要功能包括即時轉換、支持多時區，以及簡單直觀的用戶介面。用戶只需在 Chrome 線上應用程式商店下載並安裝，即可在工具列中快速啟動使用。這款工具已成為開發者日常工作流程中不可或缺的一部分，並希望能幫助更多需要處理 Unix Timestamp 的用戶。...
在 React 使用 Quill 編輯器，並加入上傳圖片至圖床的功能
在 React 中使用 Quill 編輯器，並增加上傳圖片至圖床的功能。react-quill 套件已久未更新，因此轉用官方 Quill 套件。Quill 預設將圖片轉為 base64，但專案需求改為上傳至圖床並插入網址。可在 toolbarOptions 中設定工具列，並增加 uploadImage 功能上傳圖片。
安裝 Quill React 使用 npm，編輯器分為 Editor.js(x) 和 EditorQuill.js(x) 兩部分。Editor.js(x) 載入 Quill 的 snow 或 bubble 主題樣式。EditorQuill.js(x) 設定工具列並新增上傳圖片功能，圖片上傳後插入編輯器，並設置樣式 max-width 為 100%。完整程式碼可在 codesandbox.io 參考。...
如何在 Vue.js 中不使用 CSS 框架(ex.Element Plus )，自行寫出表格和分頁功能
JavaScript 和 CSS 框架常被用來加速網站開發，但不一定需要使用。Vue.js 可以不依賴 CSS 框架，自行實現表格和分頁功能。首先安裝 vue-router，設定路由。接著可使用假資料或 API 取得資料，並在表格中顯示第一頁內容。使用 vue-router 實現頁碼，透過 query 參數控制頁面顯示。監聽 route.query.page 變化，根據新頁碼更新資料。完整範例可在線上 DEMO 網址查看，提供了無需 CSS 框架的實作方式。...
使用 Element Plus 分頁處理前端的大量資料，並使用工廠函式優化程式碼
通常在網站上顯示大量資料，前端會從後端 API 獲取分頁資料，但若後端未提供分頁功能，可使用 Vue3 與 Element Plus 實現前端分頁。Element Plus 的 el-table 和 el-pagination 元件需自行處理。
利用工廠函式 (Factory Function) 可優化重複的分頁功能。工廠函式可接收參數並返回需要的資料，減少重複程式碼。透過工廠函式建立分頁狀態、處理資料過濾及跳頁功能，達到重用與減少冗餘程式碼的目的。...
用 React Context API 實作跨組件傳值的功能
使用 React Context API 可以輕鬆實現跨組件傳值功能，適合不需要複雜狀態管理的小型應用。與 Vue 的 Vite + Pinia 類似，React 提供多種狀態管理選擇，如 Redux、Mobx、Zustand、Recoil 和 Jotai，其中 Context API 是內建的選項，無需額外安裝套件。本文介紹了如何在 React 中利用 Context API 來傳遞會員資料，通過建立 UserContext 並在 App 中使用 UserProvider 來共享資料，確保在不同組件間能夠輕鬆取得使用者資料。
實作過程包括在獨立的 context 檔案中打 API 取得即時會員資料，並使用 createContext 和 useContext 建立資料共享機制。在 App 組件中引入 UserProvider，然後在內部使用 useUser Hook 來讀取和渲染使用者資料。此外，其他頁面如 Home.jsx 也可以通過 useUser 獲取資料，實現簡單而有效的跨組件資料傳遞。這種方法適合需要跨組件傳遞資料但不需要複雜狀態管理的情況。...
客製化 Quill 編輯器，並搭配 ant design 製作所見即所得編輯器
為了整合公司內部系統，決定使用 Quill 編輯器重寫文章管理系統，因為 Markdown 無法直接調整文字顏色，轉而選擇 WYSIWYG 編輯器。Quill React 因功能齊全且客製化選項多，最終被選為編輯器。
Quill React 安裝簡單，透過 npm 指令即可完成，並內建兩種主題：snow 和 bubble。可自訂工具列，並加入自訂按鈕，如 undo、redo。使用 HTML 可完全客製化工具列內容，但需謹慎考慮。完整程式碼可在 GitHub 和 CodeSandbox 上獲取。...
Vue3 使用 watch 監聽路由變化，支援瀏覽器的上一頁 / 下一頁按鈕切換
使用 Vue3 可以監聽路由變化，解決瀏覽器「上一頁」「下一頁」按鈕切換時，選單 active 樣式不變的問題。
透過 watch 監聽 currentRoute，每次路由變化時更新 activeIndex，確保選單樣式隨路由變化而更新。...