ywwwtseng

原型链（Prototype Chain）与面向对象编程（OOP）关系

1. 面向对象编程（OOP）的核心概念

面向对象编程（OOP）的核心概念包括：

• 封装（Encapsulation）：将数据和方法封装在对象内部，并通过方法与外部交互。
• 继承（Inheritance）：通过子类继承父类的属性和方法，简化代码重用。
• 多态（Polymorphism）：同一个方法在不同对象中表现出不同的行为。
• 抽象（Abstraction）：隐藏实现细节，提供简单的接口。

ywwwtseng

響應式設計 (Responsive Design)

什麼是響應式設計？

響應式設計（Responsive Design）是一種網頁設計方法，旨在使網頁的佈局和元素能根據不同設備的螢幕尺寸、解析度以及視窗大小自動調整。這樣的設計方式可以提供用戶在各種裝置上都能獲得最佳的瀏覽體驗。

為什麼使用響應式設計？

• 適應不同裝置：隨著智慧型手機、平板電腦和桌面電腦等設備的多樣化，響應式設計確保網站能夠在各種設備上無縫顯示。
• 提升用戶體驗：提供一致的設計體驗，無論用戶使用什麼設備，頁面都能自動調整。

ywwwtseng

HTML / CSS 佈局流程詳細說明

類型	定義	常見用途	常用屬性	使用限制 / 注意事項	範例語法
Normal Flow（正常流）	預設排列，元素依序從上到下、左到右排列（block 換行、inline 不換行）	段落、文章、基本排版	display: block / inline / inline-block margin, padding	預設排列方式，較難做左右並排	<p>Hello</p><span>World</span>
Float Flow（浮動流）	使元素脫離正常流，漂浮到左/右邊，其它元素繞過它	圖文混排、舊式左右欄佈局	float: left / right clear, overflow（解浮動）	脫離文流，容易影響其他元素排版，需要清除浮動	img { float: left; } div::after { clear: both; }
Positioned Flow（定位流）	脫離文流，根據指定位置（top/right/bottom/left）擺放	彈出視窗、對話框、貼齊右上角元素、懸浮按鈕	position: absolute / relative / fixed / sticky top, left, z-index	absolute 依賴最近 relative 父元素定位；fixed 固定在螢幕	.box { position: absolute; top: 10px; left: 20px; }
Flex Flow（彈性流）	改變排列邏輯，讓子元素彈性排列於一維方向	水平導覽列、按鈕列、居中排版	display: flex flex-direction, justify-content, align-items, gap	排列為一維（單行或單列），不適合複雜網格	`.container { display: flex; justify-c

ywwwtseng

🌐 瀏覽器運作流程與 Process / Thread 對應（從輸入網址到頁面顯示）

流程步驟	所屬 Process	所屬 Thread
使用者啟動瀏覽器	Browser Process	Main Thread
使用者輸入網址、按下 Enter	Browser Process	UI Thread、IO Thread
查詢 DNS、建立連線	Network Process	Network Thread
傳送 HTTP 請求	Network Process	Network Thread
收到回應（HTML 等）	Network Process	Network Thread
將資料傳給 Render Process	Render Process	Main Thread（負責 HTML/CSS/JS 解析）

ywwwtseng

Program & Process & Thread

🧾 Program（程式）

定義：一個儲存在磁碟上的靜態指令集合，通常是可執行檔（例如 .exe、.out）。

特性：

• 是「還沒被執行」的程式碼。
• 例如：你電腦上的 chrome.exe 就是一個程式，只有在你點它時才會變成 process。

ywwwtseng

OIDC、OAuth 2.0、SSO、JWT、Token、Session、Cookie 全面整理

---

🔐 一、OAuth 2.0（AUTH 2.0）

OAuth 2.0 是一種授權（Authorization）框架，不是用來驗證身份的（不是 Authentication），而是允許第三方應用程式代表用戶訪問資源，但不暴露用戶密碼。

📌 比喻：

你去銀行（資源伺服器）開戶，銀行要你提供身份證（Access Token），但不是你的鑰匙（密碼），這個身份證是政府（身份提供者）發給你的。

ywwwtseng

🧠 JavaScript 記憶體管理基礎：Stack vs Heap

JavaScript 引擎執行時，會使用兩種記憶體空間：

區域	說明	舉例
🧱 Stack（堆疊）	用來儲存函數的執行上下文（Execution Context）與區域變數（primitive）	呼叫函數時進入 call stack、執行完就退出
🗃 Heap（堆）	儲存物件、函數等參照型資料（reference types）	像是閉包、物件、陣列、函數本體

📌 補充說明

ywwwtseng

🌀 Event Loop Queue vs Job Queue 差異說明

項目	Event Loop Queue（Macro Task Queue）	Job Queue（Micro Task Queue）
📌 又稱	Task Queue / Callback Queue	Microtask Queue / Job Queue
🎯 負責處理	setTimeout、setInterval、I/O callbacks、DOM Events 等	Promise.then()、queueMicrotask()、MutationObserver
⏳ 執行時機	每輪事件循環的最後階段才會執行	每個 task 執行結束後立即清空 microtasks
🥇 優先順序	較低，等微任務執行完才會輪到它	較高，會優先執行完所有 microtasks 才會進入下一個 macro task
✅ 用途	處理整體非同步任務	處理細粒度更新、異步邏輯鏈接

ywwwtseng

del_all_branch () {
    current_branch=$(git branch --show-current)
    git branch | grep -Ev "^\s*(master|main|develop|dev|${current_branch})$" | xargs git branch -D
}

kill_port() {
  if [ -z "$1" ]; then
    echo "Usage: kill_port <port>"
    return 1
  fi

ywwwtseng

import { useState, useMemo } from 'react'

class ArrayUtil {
  static range(...T) {
    let start, end;

    if (T.length === 1) {
      start = 0;
      end = T[0];
    } else {