.NET Core 中的依賴注入和控制反轉
IoC（控制反轉）和 DI（依賴注入）常被混用，但兩者的層次不同：IoC 是設計原則，DI 是實現手段之一。搞清楚這個關係，才不會看到「容器」兩字就覺得是 IoC 的全部。 控制反轉 (IoC) 是什麼傳統寫法裡，程式碼自己決定何時建立依賴、用哪個實作——控制權在你的類別手上。IoC 把這個控制權交出去：由外部（框架、容器、或呼叫方）決定要注入什麼。 IoC 並不等於 DI 容器。Martin Fowler 最早定義 IoC 時，涵蓋了 Service Locator、Template Method、以及依賴注入等多種形式。DI 容器只是實現 IoC 最常見的一種工具。 IoC 帶來的實際好處： 解耦：類別依賴介面而非具體實作，替換實作時不需動到使用方。 可測試性：測試時可把真實依賴換成 mock，不需啟動整個應用程式。 可擴展性：新增實作、切換策略，不需修改現有程式碼。 這三點都源自同一個機制——類別不再自己 new 依賴，而是被動接受注入。 依賴注入 (DI) 的注入方式DI 的核心想法：不在類別內部建立依賴物件，改由外部傳入。 注入方式有三種，但在 .NET 內建 DI...
為甚麼應該從.Net Framework跳到.Net Core?
從 .NET Framework 到 .NET Core：一個必要的轉變.NET Framework 和 .NET Core（現稱 .NET）不是競爭的替代品——它們代表不同世代的設計決策。.NET Framework 誕生於 2002 年，綁死在 Windows 上；.NET Core 從 2016 年起重新設計，跨平台、開源、模組化。微軟已明確宣告 .NET Framework 4.8.1 是最後一個主要版本，不再加入新功能，只做安全性修補。這個時間點對正在評估是否遷移的團隊來說是最實際的理由。 以下從四個面向說明差異。 跨平台.NET Core 從設計之初就以跨平台為目標，同一份程式碼可以在 Windows、Linux 和 macOS 上建置與執行。這對想把工作負載搬上 Linux 容器或雲端的團隊影響最直接：容器基底映像可以選更精簡的 Linux 版本，不必帶著 Windows Server 授權費。 .NET Framework 本身只支援 Windows。Mono 是另一個獨立的開源 .NET 實作（最初由 Novell/Xamarin 開發，2016 年 Micr...
CSS實現DOM節點水平居中的多種方式
水平置中看似基礎，但選錯方法往往要多加幾行補丁才能修正。以下五種寫法各有適用條件，選之前先確認目標元素是行內還是區塊、有無固定寬度、父容器是否允許改動。 1. text-align: center作用在父容器，讓其中的行內元素或行內區塊元素水平置中。 123.parent { text-align: center;} 文字、<span>、<img>、display: inline-block 的元素都吃這個規則；display: block 的子元素不受影響。如果要置中的是區塊元素，這條沒用。 2. margin: auto把區塊元素的左右邊距都設為 auto，瀏覽器會平均分配剩餘空間。 1234.child { width: 300px; margin: 0 auto;} 不想寫死寬度的話，可以用 width: fit-content，寬度跟著內容走，同樣能置中： 1234.child { width: fit-content; margin: 0 auto;} 兩種寫法的前提一...
Pinia的資料儲存機制：深入探討
在 Vue.js 生態系統中，Pinia 是目前官方推薦的狀態管理函式庫。不過，當我們透過 Pinia 儲存資料時，這些資料究竟放在哪裡？本文拆解 Pinia 的運作原理，以及它如何處理資料儲存。 Pinia 的核心概念Pinia 把應用程式的狀態切成獨立的「store」，每個 store 負責管理一塊特定的狀態。這種設計讓狀態管理更模組化，也比較容易維護。 定義一個 store 的基本寫法： 12345678910111213import { defineStore } from 'pinia'export const useCounterStore = defineStore('counter', { state: () => ({ count: 0, name: 'guest', }), actions: { increment() { this.count++ }, },...
Pinia與Vuex的區別:詳細比較
在 Vue.js 的狀態管理領域，Pinia 和 Vuex 是兩個主要的選擇。兩者解決的問題相同，但設計理念和使用方式有顯著差異。本文逐項比較它們的差異，幫你判斷哪個更適合手邊的專案。 1. 起源與發展Vuex Vuex 是 Vue.js 的官方狀態管理函式庫，於 2015 年發布。 遵循 Flux 架構，設計初衷是處理大型複雜應用的狀態管理。 Pinia Pinia 由 Vue 核心團隊成員 Eduardo San Martin Morote 開發。 最初作為 Vuex 5 的概念驗證而建立，後來發展成獨立專案。 Vue 3 發布後，Pinia 迅速獲得社群青睞，最終成為 Vue 官方推薦的狀態管理方案。 2. 核心概念Vuex Store：單一狀態樹，作為應用的唯一資料來源。 State：存儲應用的響應式狀態。 Getters：從 store 派生出的狀態。 Mutations：用於修改狀態的同步函式。 Actions：可包含非同步操作的函式，用於提交 mutation。 Modules：將 store 拆分成模組，每個模組擁有自己的 state、mutation、act...
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....
