Promise 和 setTimeout 的深入解析
在 JavaScript 中，Promise 和 setTimeout 是處理非同步操作的兩個重要工具。兩者都用於處理非同步事件，但工作方式和使用場景不同。 PromisePromise 是 JavaScript 用來處理非同步操作的物件，代表一個可能尚未完成、但未來某個時間點會完成的操作。Promise 有三種狀態： Pending（進行中）：初始狀態，既未完成也未拒絕。 Fulfilled（已完成）：操作成功完成。 Rejected（已拒絕）：操作失敗。 Promise 的主要優點： 可以將非同步操作以同步流程的方式表達，避免回呼地獄。 提供 .then()、.catch() 和 .finally() 方法，讓處理非同步結果更直觀。 Promise 的基本用法1234567891011121314const myPromise = new Promise((resolve, reject) => { // 非同步操作 if (/* 操作成功 */) { resolve(result); } else { ...
Vue中的Pinia狀態管理：全面指南
引言Vue 應用規模一大，狀態管理就會開始讓人頭痛。Pinia 是 Vue 官方推薦的狀態管理函式庫，設計目標是型別安全、直觀，且不需要 Vuex 那套繁瑣的 mutation 流程。本文涵蓋 Pinia 的核心概念、進階特性與常見實踐，從安裝到插件系統都會走一遍。 什麼是Pinia?Pinia 是新一代的 Vue 狀態管理函式庫，定位上取代 Vuex。由 Vue 核心團隊成員 Eduardo San Martin Morote 建立，在 Vue 3 中成為官方推薦的狀態管理方案。 Pinia的主要特性: 直觀且簡潔的 API 完整的 TypeScript 支援 支援 Vue 2 和 Vue 3（Pinia v2；v3 起僅支援 Vue 3） 極小的套件大小 支援多個 Store 支援熱模組替換（HMR） 支援 Vue DevTools 插件系統可擴充 安裝和設置1npm install pinia 在 Vue 應用中引入 Pinia： 123456789import { createApp } from 'vue'import ...
JS防抖（Debouncing）與節流（Throttling）
JS防抖與節流教學滾動、視窗縮放、鍵盤輸入這類高頻事件，若直接把處理函式綁上去，瀏覽器很快就會喘不過氣。防抖（Debouncing）和節流（Throttling）是兩種常見的解法，差別在於「事件停了才執行」還是「固定間隔最多執行一次」，選錯方向效果會差很多。 防抖 (Debouncing)觸發事件後，等待指定時間才執行處理函式。如果等待期間又觸發了，就重新計時。連續快速觸發的情況下，最終只會執行一次。 使用時機觸發頻率高、但不需要即時響應每次觸發的場景： 搜尋框輸入（使用者停止輸入後再發出請求） 視窗大小調整（調整結束後再重新計算排版） 範例12345678910111213function debounce(func, wait) { let timeout; return function(...args) { const context = this; clearTimeout(timeout); timeout = setTimeout(() => func.apply(context, ...
圖片懶加載技術：提升網站效能的七大方法
圖片往往是影響網頁載入速度的主要因素之一。本文整理七種圖片懶加載技術，比較各自的相容性與效能取捨，方便依場景選用。 什麼是圖片懶加載？圖片懶加載是一種網頁優化技術，延遲載入暫時不可見的圖片。只有當使用者滾動到圖片位置時，圖片才會開始載入，可以顯著減少初始頁面載入時間和頻寬使用。 七種圖片懶加載方法1. 原生懶加載HTML Living Standard 定義的 loading 屬性是最簡單的懶加載方式： 1<img src="image.jpg" loading="lazy" alt="懶加載圖片"> 支援度：Chrome 77+、Firefox 75+、Safari 16.4+，全球覆蓋率約 95%。不支援的舊版瀏覽器會忽略此屬性，圖片照常載入，無需額外後備處理。 優點： 零程式碼，無需 JavaScript 瀏覽器原生支援，效能佳 缺點： Safari 16.4 以下（含 iOS 16.4 以下）不支援 2. Intersection Observer API這是一個強大的 JavaScript...
深入理解 JavaScript 的 async/await
async/await 是 Promise 的語法糖，讓非同步程式碼讀起來像同步。底層仍是 Promise，事件循環沒有改變，只是寫法不同。 async/await 的基本概念async 函式：使用 async 關鍵字宣告，無論函式本身回傳什麼值，呼叫端拿到的一定是 Promise。 await 運算符：等待一個 Promise 決議（resolve 或 reject）。在標準模式下只能用在 async 函式內；ES2022 起，ES 模組的頂層也可以直接使用 await，不需要包一層 async 函式。 與 Promise 的關係async/await 本質上是 Promise 的語法糖。看個對照例子： 使用 Promise： 1234567891011function fetchData() { return fetch('https://api.example.com/data') .then(response => response.json()) .then(data => { console....
setTimeout 和 JavaScript 的 Event Loop 運作原理
JavaScript 是單執行緒語言，一次只能執行一個操作。如果所有事情都同步跑，任何耗時任務都會卡住整個程式——這就是事件循環（Event Loop）存在的原因，也是 setTimeout 能讓你「稍後再執行」的底層機制。 JavaScript 的單執行緒特性單執行緒的意思是：呼叫堆疊只有一條，同時只能有一段程式碼在跑。長時間的同步操作（例如複雜運算或等待 I/O）一旦佔住堆疊，使用者介面就會完全卡死、無法回應任何輸入。 非同步程式設計的核心思路是：把等待的部分交出去，主執行緒繼續跑其他的，等結果回來再接手。 事件循環的四個組件理解事件循環前，先認識它的基本組成： 呼叫堆疊（Call Stack）：記錄目前正在執行的函式，採後進先出（LIFO）結構。 Web API：瀏覽器提供的環境能力，包括計時器（setTimeout、setInterval）、網路請求（fetch）、DOM 事件等。這些操作不在 JS 引擎內跑，而是交給瀏覽器的底層執行緒處理。 回呼佇列（Callback Queue / Task Queue）：Web API 完成後，把回呼函式排進這裡，等待被執行。 事...
Vue 3 資料傳遞
Vue 3 組件化架構的核心問題之一，就是資料怎麼在元件之間流動。本文整理三個主要機制：父傳子用 props、子傳父用 emit、跨層級用 provide/inject，並附上 Vuex 與 Pinia 的對照。所有範例均採 <script setup> 語法。 1. 父元件傳資料到子元件（Props）父元件透過屬性綁定把資料往下傳，子元件用 defineProps 宣告接收。 父元件 12345678910<template> <ChildComponent :message="messageFromParent" /></template><script setup>import { ref } from 'vue';import ChildComponent from './ChildComponent.vue';const messageFromParent = ref('Hello from Parent');...
JavaScript 深拷貝完整指南：掌握物件複製的關鍵技巧
JavaScript 的物件是傳參考的，稍不注意就會讓原始資料被意外修改。本文整理四種深拷貝方法，說明各自的限制與適用場景。 深拷貝 vs 淺拷貝：關鍵差異 淺拷貝：只複製第一層屬性，內部物件仍然共享參考 深拷貝：遞迴複製所有層級，建立完全獨立的新物件 實作方法 1：使用 JSON 方法最簡單的深拷貝寫法： 123456789function jsonDeepCopy(obj) { return JSON.parse(JSON.stringify(obj));}const original = { name: 'John', info: { age: 25 }};const copy = jsonDeepCopy(original); 優點： 寫法簡單，零依賴 適用於只含字串、數字、布林值、null 的普通物件 缺點： 函式屬性會直接消失 undefined 值會被丟棄 無法處理循環引用（直接拋錯） Date 會被轉成 ISO 字串，JSON.parse 後變成 string 而非 D...
Chrome套件開發教學：自動整理書籤到域名資料夾
本教學將引導如何開發一個 Chrome 擴充套件，此套件能將新建的書籤依域名分類到對應資料夾。我們會使用 background.js 來實現這個功能。 前提擁有基本的 JavaScript 知識。已安裝 Chrome 瀏覽器。 步驟1：建立擴充套件目錄首先，在你的電腦上建立一個新的資料夾來存放擴充套件檔案，例如命名為 BookmarkOrganizer。 步驟2：撰寫 manifest.json在 BookmarkOrganizer 資料夾內，建立一個名為 manifest.json 的檔案，並加入以下內容： 12345678910{ "manifest_version": 3, "name": "自動整理書籤到域名資料夾", "version": "1.0", "description": "將新建的書籤自動整理到以域名命名的資料夾中。", "permissions": ["bookmark...
Git分支管理規範：提升團隊協作效率
引言光裝了 Git 不夠，沒有分支規範的團隊遲早會踩到「main 被直接推壞」或「三個人同時改同一支分支」的坑。這篇整理一套以 Gitflow 為基礎的分支模型，適合中小型專案直接套用。 1. 主要分支1.1 主分支 (main)主分支代表產品的穩定版本，任何時候都應該可以直接部署到正式環境。 用途：對應正式環境的可部署版本 規則：禁止直接在 main 分支上開發，所有變更必須經過 PR 審查 每次合併到 main 的程式碼都應該通過完整測試，不能引入未知的不穩定因素。 1.2 開發分支 (develop)develop 是日常開發的整合中心，從 main 建出來，最終穩定後再合回 main。 用途：整合各功能分支的開發成果 特點：包含最新的開發進度，相對不穩定 規則：功能與修復都先進 develop，確認穩定後才往 main 合 2. 支援性分支2.1 功能分支 (feature) 命名規則：feature/功能名稱（例如：feature/user-authentication） 來源：從 develop 建立 合併目標：完成後合回 develop 每個新功能都應該有...
