kyosora 筆記

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 組件化架構的核心問題之一，就是資料怎麼在元件之間流動。本文整理三個主要機制：父傳子用 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 的物件是傳參考的，稍不注意就會讓原始資料被意外修改。本文整理四種深拷貝方法，說明各自的限制與適用場景。 深拷貝 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 擴充套件，此套件能將新建的書籤依域名分類到對應資料夾。我們會使用 background.js 來實現這個功能。 前提擁有基本的 JavaScript 知識。已安裝 Chrome 瀏覽器。 步驟1：建立擴充套件目錄首先，在你的電腦上建立一個新的資料夾來存放擴充套件檔案，例如命名為 BookmarkOrganizer。 步驟2：撰寫 manifest.json在 BookmarkOrganizer 資料夾內，建立一個名為 manifest.json 的檔案，並加入以下內容： 12345678910{ "manifest_version": 3, "name": "自動整理書籤到域名資料夾", "version": "1.0", "description": "將新建的書籤自動整理到以域名命名的資料夾中。", "permissions": ["bookmark...

在前後端分離的開發過程中，跨來源資源共用（Cross-Origin Resource Sharing，CORS）是一個常見問題。當前端和後端執行在不同的網域或連接埠時，瀏覽器的同源政策會阻擋前端對後端的請求。 瀏覽器在發送非「簡單請求」（帶自訂標頭、使用 PUT/DELETE 等方法）前，會先送出一個 OPTIONS preflight 請求，確認後端是否允許該來源的跨域存取。後端必須正確回應 Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers 等標頭，瀏覽器才會放行後續的實際請求。理解這個機制是除錯 CORS 問題的關鍵。 以下整理幾種解決方法，以 .NET Core 後端為例說明。 1. 在後端設定 CORS.NET 5 / Startup.cs 寫法 在 Startup.cs 的 ConfigureServices 方法中加入 CORS 服務： 1234567891011public void ConfigureServices(IServiceColl...

引言光裝了 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 每個新功能都應該有...

Vue.js 的響應式系統一直是框架的核心。從 Vue 2 到 Vue 3，底層從 Object.defineProperty 切換到 Proxy，不是換個 API 這麼簡單——兩種機制的攔截粒度根本不同，直接決定了哪些操作能被追蹤、哪些不能。 Vue 2：Object.defineProperty 時代實作方式Vue 2 在初始化元件時遞迴遍歷整個物件，對每個屬性呼叫 Object.defineProperty，掛上 getter 和 setter： 1234567891011121314function defineReactive(obj, key, val) { Object.defineProperty(obj, key, { get() { // 收集依賴（目前正在執行的 watcher） dep.depend() return val }, set(newVal) { if (newVal === val) return val = newVal ...

左側固定寬度、右側自適應，是網頁版型裡最高頻的需求之一。以下整理五種 CSS 做法，左側統一設為 200px，逐一說明寫法與實務取捨。 1. 浮動（Float）方法傳統做法，現在主要用來維護舊專案，但看懂它對理解 CSS 佈局原理有幫助。 12345678910.container { overflow: hidden; /* 清除浮動 */}.left { float: left; width: 200px;}.right { margin-left: 200px; /* 與左側寬度相同 */} 相容性最廣，IE6+ 都能用。缺點是必須清除浮動，父容器用 overflow: hidden 是最省事的方式，但如果內容需要溢出顯示（如下拉選單），就得改用 clearfix。 2. 絕對定位（Absolute Positioning）方法用絕對定位把左側釘死在左上角。 1234567891011.container { position: relative;}.left { pos...

測試驅動開發（TDD）入門與實作教學測試驅動開發（Test-Driven Development，簡稱 TDD）是一種軟體開發方法：先寫出會失敗的測試案例，再撰寫讓測試通過的程式碼，最後重構。目標是快速反饋、提升程式碼品質、推動簡單設計。 TDD 的基本步驟TDD 的開發循環遵循「紅-綠-重構」模式： 紅色階段（Red）：先寫一個會失敗的測試。這個測試對應你想實作的下一個功能。 綠色階段（Green）：寫足夠讓測試通過的程式碼。不追求完美，只要通過即可。 重構階段（Refactor）：整理程式碼，改善結構與設計，同時確認所有測試仍然通過。 使用 C# 實作 TDD以下用一個簡單的 C# 範例，走完 TDD 的完整流程。 前提條件確保開發環境已安裝 .NET Core SDK，並熟悉基本的 C# 與單元測試。 實作步驟目標：開發一個類別庫，計算兩個整數的和。 步驟 1：建立新的方案 1dotnet new sln -n TDDExample 步驟 2：加入類別庫專案與測試專案 12345dotnet new classlib -n CalculatorLibrarydotne...

Git 基礎教學這篇文章帶你了解 Git 的基礎使用，包括版本控制的概念、安裝設定，以及日常會用到的指令。 Git 是什麼？Git 是一個開源的分散式版本控制系統，能有效率地處理大小不一的專案。它的許多概念和設計方式與其他版本控制系統不太一樣，值得花時間理解。 安裝 GitGit 可以在各種作業系統上執行： Windows：從 Git 官方網站 下載安裝檔。 macOS：透過 Homebrew 執行 brew install git。 Linux：用套件管理器安裝，例如 Ubuntu 的 sudo apt-get install git。 安裝過程中，預設選項就夠用了，一路 Next 到底即可。 設定 Git安裝完成後，打開終端機（Terminal 或 Command Prompt），先設定使用者名稱和電子郵件。每次提交都會帶上這些資訊： 12git config --global user.name "你的名字"git config --global user.email "you@example.com" 基本 Git 指令初始化...