MUKI space*
Front-end Development,
Effective Note-Taking.
動態渲染 Vue 元件以及動態導入模組，簡化重複邏輯
在開發模組化功能時，使用大量的 v-if 來動態渲染 Vue 元件會導致程式碼重複且難以維護。為了解決這個問題，可以透過動態渲染元件和動態導入模組來簡化邏輯。首先，使用 Barrel Files 將模組集中管理，接著在 App.vue 中根據 moduleId 渲染對應的 Vue 元件，避免用大量的 v-if 判斷。進一步優化可以使用 Vue 的 動態元件搭配 Mapping 表格來渲染模組，這樣可以大幅減少重複的程式碼。
為了進一步簡化，推薦使用 Vite 的 import.meta.glob 功能，這樣可以自動批量導入模組，無需手動更新 Mapping 表格或 index.ts 檔案。透過這種方式，不僅程式碼更簡潔，未來新增或修改元件時只需將新檔案放入目錄即可，無需更改現有邏輯，讓開發和維護更加高效。這種動態渲染方式特別適合需要處理大量條件邏輯的場景。...
用 Geolocation API 和 Leaflet Routing Machine 實作叫車導航功能
使用 Geolocation API 和 Leaflet Routing Machine 可以實現叫車導航功能。Geolocation API 提供使用者的經緯度，而 Leaflet 是輕量級地圖工具，用於顯示地圖和標記。Leaflet Routing Machine 則專門用於路線規劃和導航，能計算兩點間的路徑，並提供距離和時間資訊。這些工具的結合可實現從位置追蹤到路線導航的完整流程，適用於叫車服務中，Geolocation API 提供即時位置，Leaflet 負責地圖呈現，Leaflet Routing Machine 負責路線計算與導航視覺化。
在實作中，使用者輸入地址後，系統會自動計算司機的路線並顯示在地圖上，預估距離和時間。模擬啟動後，司機標記沿路線移動，顯示即時距離。此功能不僅適用於叫車服務，也適合物流追蹤、旅遊規劃和遊戲開發。完整程式碼可參考範例連結，並可深入了解 Leaflet 和 Routing Machine 的其他功能。...
用 Geolocation API 取得與追蹤使用者地理位置
Geolocation API 是 HTML5 Web API 中一個強大的工具，允許網頁存取使用者的地理位置，能提供導航、在地服務等功能。此 API 注重隱私，只有在使用者授權的前提下才能取得位置資訊。Geolocation API 的核心功能包括取得使用者目前位置、持續監控位置變化及提供位置精準度資訊。瀏覽器可透過 GPS、網路位置及 IP 位址來確定使用者位置。
使用 Geolocation API 前需檢查瀏覽器支援性，並透過 `getCurrentPosition()` 方法取得當前位置。此方法接受三個參數：成功回調、錯誤回調及選項設定。為了即時追蹤位置變化，可使用 `watchPosition()` 方法，並結合地圖服務如 OpenStreetMap 來顯示位置。若使用者拒絕授權，需引導其修改瀏覽器設定以重新啟用地理位置功能。此 API 提供的功能強大且安全，但需經過使用者同意以保護隱私。...
使用 BroadcastChannel 讓 sessionStorage 的資料可以跨分頁同步讀取
公司希望使用者關閉視窗時清除 token 資料，於是使用 sessionStorage 儲存資訊。為了讓使用者在新分頁自動登入，初步使用 localStorage 監聽 storage 事件，但遇到使用者未登出直接關閉視窗的問題。最後改用 BroadcastChannel API，成功實現跨分頁同步 sessionStorage 資料。
BroadcastChannel 允許同網域的頁面互相傳遞訊息，避免使用 localStorage 當橋樑。然而 Safari 不支援此 API，需改用簡單登入登出功能。此技術解決了多分頁同步的需求，顯著提升登入體驗。...
Vue3 做原生的 HTML5 表單驗證
Vue3 支援使用原生 HTML5 表單驗證，搭配正則表達式可增強驗證效果。在 VUE 中，透過 form 的 reportValidity() 方法驗證必填欄位，或使用 VUE 的 ref 獲取 DOM。表單需用 <form> 標籤，並於必填欄位加上 required 屬性。
可選用原生 JS 獲取 form 的 DOM element，或用 VUE 的 ref。在 setup() 中匯入 ref，宣告 form，並回傳。這些方法均可實現 HTML5 驗證功能，完整範例可參考 sandbox。...
使用 CSS:not 與 data-index 即時搜尋頁面
去年發現一篇文章介紹如何用 CSS 在單一頁面即時搜尋資料，覺得很實用。這功能已實作在前公司的網站，可在「朋友列表」或「尋友工具」中查看效果。搜尋框輸入名字，即時篩選出結果，使用 jQuery 改寫原生 JavaScript。
此功能利用 CSS 的 :not 和 data-* 屬性完成，需在 HTML 中加入 data-index 屬性，並將名字轉為小寫。利用 jQuery 在 style 中加入 :not 語法，實現即時搜尋。該功能現已被製作成 jQuery 插件，可在 GitHub 上找到相關資源。...
WebSocket 簡單介紹與 jQuery 實作應用
WebSocket 是一種 HTML5 提供的全雙工通訊技術，於 2011 年成為標準。瀏覽器與伺服器只需一次握手即可快速通訊。WebSocket 的語法簡單，有四個主要事件：onopen、onclose、onmessage 和 onerror。使用 jQuery 可將功能拆分，如 effect.js 和 websocket.client.js，實現即時資料傳輸。
利用 JSON 傳遞資料需三步驟：在 effect.js 存變數，利用 JSON 傳遞給 WebSocket，client.js 接收並處理。這樣可在不同網頁間互傳資料，如 master.html 和 client.html。Super Sync Sports 是一個有趣的 WebSocket 實例，利用手機控制網頁進行運動遊戲。...
使用 HTML5 和 jQuery 簡易存取資料
HTML5 的 data-* 屬性使得數據存取變得簡單，不影響版面。可用於網頁互動及後端資料紀錄。data-* 是自定義屬性，名稱需符合 XML 規範，且不包含大寫字母。
範例中，data-myid 可作為識別標記，jQuery 可輕鬆取值。透過點擊事件，能動態顯示不同的屬性值，實現多組數據選擇功能。...