kyosora 筆記

深入理解 JavaScript 的 async/await在我們之前討論的 Promise 和 setTimeout 的基礎上，async/await 是 JavaScript 中處理非同步操作的更高層次抽象。它提供了一種更直觀、更類似同步程式碼的方式來處理非同步操作。 async/await 的基本概念 async 函式 使用 async 關鍵字宣告的函式。 總是返回一個 Promise。 允許在其中使用 await 關鍵字。 await 運算符 只能在 async 函式內部使用。 用於等待一個 Promise 解決（或拒絕）。 暫停 async 函式的執行，直到 Promise 完成。 與 Promise 的關係async/await 本質上是 Promise 的語法糖。它讓我們可以用更簡潔、更易讀的方式編寫基於 Promise 的程式碼。讓我們看一個例子來比較： 使用 Promise： 1234567891011function fetchData() { return...

setTimeout 和 JavaScript 的 Event Loop 運作原理JavaScript 是一種單執行緒語言，但它能夠執行非同步操作，這要歸功於事件循環（Event Loop）機制。在本文中，我們將深入探討 setTimeout 函式的運作原理，以及它如何與 JavaScript 的事件循環相互作用。 JavaScript 的單執行緒特性首先，我們需要理解 JavaScript 是單執行緒的。這意味著它一次只能執行一個操作。但是，如果所有操作都是同步的，那麼長時間運行的任務就會阻塞整個程式，導致糟糕的使用者體驗。這就是非同步程式設計發揮作用的地方。 非同步程式設計和事件循環JavaScript 使用事件循環來處理非同步操作。事件循環負責執行程式碼、收集和處理事件，以及執行排隊的子任務。以下是事件循環的基本組成部分： 呼叫堆疊（Call Stack） Web API 回呼佇列（Callback Queue） 事件循環（Event Loop） setTimeout 的運作原理setTimeout...

Vue 3 資料傳遞Vue 3 為前端開發者提供了強大的功能來建構互動式網頁應用程序。在組件化的架構中,資料的傳遞是重要的一環。本文將介紹在 Vue 3 中,如何實現父元件與子元件之間的資料傳遞,包括父元件傳資料給子元件、子元件傳資料給父元件,以及子元件間的資料傳遞。 Props: 用於父元件向子元件傳遞資料。 Emit: 子元件可以通過發射事件來向父元件傳遞資料。 Provide/Inject: 這是一種跨越多個層級的元件間通信方法,特別適用於那些不是直接父子關係的元件間的資料傳輸。 1. 父元件傳資料到子元件在 Vue 3 中,父元件可以透過 props 向子元件傳遞資料。props 是子元件用來接收來自父元件資料的一種機制。 1.1 父元件假設我們有一個父元件,想要傳遞一個名為 message 的資料到子元件。 123456789101112131415161718<template> <ChildComponent :message="messageFromParent"...

JavaScript 深拷貝完整指南：掌握物件複製的關鍵技巧在 JavaScript 開發中，正確處理物件拷貝是一個重要的技能。本文將詳細介紹各種深拷貝的方法，幫助你選擇最適合的實作方式。 深拷貝 vs 淺拷貝：關鍵差異在開始介紹各種方法之前，我們先來理解深拷貝和淺拷貝的差異： 淺拷貝：只複製第一層屬性，內部物件仍然共享參考 深拷貝：遞迴複製所有層級，創建完全獨立的新物件 實作方法 1：使用 JSON 方法最簡單的深拷貝方法是使用 JSON.parse() 和 JSON.stringify()： 123456789101112// 簡單的深拷貝實作function jsonDeepCopy(obj) { // 將物件轉換為 JSON 字串，再解析回物件 return JSON.parse(JSON.stringify(obj));}// 使用範例const original = { name: 'John', info: { age: 25 }};const copy =...

本教學將引導如何開發一個Chrome擴展套件，此套件能自動將新建的書籤按照其域名自動分類到對應的文件夾中。我們會使用background.js來實現這個功能。 前提擁有基本的JavaScript知識。已安裝Chrome瀏覽器。 步驟1：創建擴展目錄首先，在你的電腦上創建一個新的資料夾來存放擴展文件，例如命名為BookmarkOrganizer。 步驟2：撰寫manifest.json在BookmarkOrganizer資料夾內，創建一個名為manifest.json的文件，並加入以下內容： 12345678910{ "manifest_version": 3, "name": "自動整理書籤到域名資料夾", "version": "1.0", "description": "將新建的書籤自動整理到以域名命名的資料夾中。", "permissions": ["bookmarks"],...

CORS 都有哪些解決方法?在前後端分離的開發過程中,跨來源資源共用(Cross-Origin Resource Sharing, CORS)是一個常見的問題。當前端和後端運行在不同的網域或連接埠時,瀏覽器的同源政策會阻止前端對後端的請求。以下我們將探討幾種解決 CORS 問題的方法,特別是在使用 .NET Core 作為後端的情況下。 1. 在後端配置 CORS在 .NET Core 中,你可以通過以下步驟來配置 CORS: 在 Startup.cs 文件的 ConfigureServices 方法中添加 CORS 服務: 123456789101112public void ConfigureServices(IServiceCollection services){ services.AddCors(options => { options.AddPolicy("AllowSpecificOrigin", builder =>...

Git分支管理規範：提升團隊協作效率引言在現代軟體開發中,版本控制系統已成為不可或缺的工具。而Git,作為最流行的分散式版本控制系統,為開發者提供了強大而靈活的功能。然而,僅僅使用Git是不夠的。一個優秀的分支管理策略可以大大提升團隊的協作效率,減少衝突,並確保代碼質量。本文將深入探討一套實用的Git分支管理規範,幫助您的團隊更好地協作。 1. 主要分支1.1 主分支 (main)主分支,通常命名為"main"(早期版本可能使用"master"),是整個代碼庫的核心。 用途：代表產品的穩定版本 特點：隨時可部署到生產環境 規則：禁止直接在main分支上進行開發 主分支應該始終保持穩定和可靠。每一次提交到main分支的代碼,都應該經過充分的測試和審核。這確保了主分支上的代碼隨時可以部署到生產環境,而不會引入意外的錯誤或不穩定因素。 1.2 開發分支...

Vue響應式系統的演進:從defineProperty到ProxyVue.js作為一個漸進式JavaScript框架,其響應式系統一直是其核心特性之一。隨著Vue從2.x版本進化到3.x版本,其底層響應式系統也經歷了重大的變革——從使用Object.defineProperty轉向採用Proxy。本文將深入探討這一演進過程,分析其原因和影響。 Vue 2:Object.defineProperty時代在Vue 2中,響應式系統主要依賴於Object.defineProperty方法。 實作方式Vue 2通過遍歷對象的所有屬性,為每個屬性定義getter和setter。這使得Vue能夠追蹤屬性的讀取和修改操作。 優點 能夠有效地追蹤現有屬性的變化 在大多數現代瀏覽器中有良好的支援度 限制 無法檢測到對象屬性的動態添加或刪除 對陣列的變異方法(如push、pop)難以直接追蹤 需要遍歷對象的所有屬性,對性能有一定影響 對新增的屬性,需要使用特殊的API(如Vue.set()或this.$set())來確保響應性 Vue 3:擁抱Proxy新時代Vue...

實現左右佈局的多種CSS方法在網頁設計中，左右佈局是一種常見的需求。通常，我們希望左側有一個固定寬度的欄位（例如導航欄或側邊欄），而右側則可以自適應剩餘的空間。本文將介紹幾種使用CSS實現這種佈局的方法，其中左側寬度為200px，右側自適應。 1. 浮動（Float）方法這是一種傳統的方法，雖然現在不太常用，但對於理解CSS佈局原理很有幫助。 12345678910.container { overflow: hidden; /* 清除浮動 */}.left { float: left; width: 200px;}.right { margin-left: 200px; /* 與左側寬度相同 */} 優點：兼容性好，支持舊版瀏覽器。缺點：需要清除浮動，可能影響其他元素。 2. 絕對定位（Absolute Positioning）方法這種方法使用絕對定位來固定左側欄位。 1234567891011.container { position: relative;}.left { ...

測試驅動開發（TDD）入門與實作教學測試驅動開發（Test-Driven Development，簡稱TDD）是一種軟體開發方法，其中開發人員先寫出失敗的測試案例，然後才撰寫能夠讓測試通過的代碼，最後進行代碼的重構。TDD 的目標是實現快速反饋、提高代碼質量和促進簡單設計。 TDD 的基本步驟TDD 的開發循環遵循「紅-綠-重構」的模式： 紅色階段（Red）：先寫一個失敗的測試。這個測試應該基於你希望程序執行的下一個功能。 綠色階段（Green）：撰寫足夠的代碼讓這個測試通過。這時候的代碼不追求完美，只需通過測試即可。 重構階段（Refactor）：重構代碼，改善結構與設計，同時保證所有測試仍然通過。 使用 C# 實作 TDD接下來，讓我們透過一個簡單的 C# 實例來看看 TDD 是如何在實際開發中運作的。 前提條件確保你的開發環境中安裝了 .NET Core SDK，並且你熟悉基本的 C# 編程和單元測試。 實作步驟假設我們要開發一個簡單的函式庫，用於計算兩個數字的和。 步驟 1：創建一個新的解決方案 1dotnet new sln -n TDDExample 步驟...