🚀 JavaScript 與前端開發完整指南：從基礎到進階，面試必備 📌

James Harrison on Unsplash

🔗 JavaScript 基礎概念

Closure（閉包）

閉包是 JavaScript 中一個強大的概念，允許函式在外部函式執行完畢後仍能存取其變數。這是因為內部函式仍然保有對外部函式作用域的引用。

IIFE（立即執行函式表達式）

IIFE (Immediately Invoked Function Expression) 允許函式在定義後立即執行，避免變數污染全域命名空間。

JavaScript 的作用域（Scope）與範圍鏈（Scope Chain）

JavaScript 的變數查找是由內向外進行的，這稱為範圍鏈 (Scope Chain)。這樣的機制確保內部函式能夠存取外部函式的變數。

Prototype（原型）

在 JavaScript 中，每個物件都有一個內建的 prototype，允許物件繼承屬性與方法，這是物件導向編程 (OOP) 的核心之一。

Event Loop（事件循環）

事件循環是 JavaScript 處理非同步操作的核心機制。透過 Call Stack（呼叫堆疊）與 Event Queue（事件佇列），JavaScript 可以有效管理異步任務。

Falsy 值

Falsy 值包括 false, 0, "", null, undefined, NaN，在條件判斷中都會被視為 false。

this 關鍵字

this 代表當前執行環境的對象，取決於函式的調用方式。箭頭函式不會綁定 this，而是繼承自外部作用域。

🤝 JavaScript 進階概念

Promise 與 Async/Await

Promise 允許我們以更清晰的方式處理非同步操作，而 async/await 是對 Promise 的語法糖，使非同步代碼更具可讀性。

setTimeout 與 setInterval

setTimeout 延遲執行一段程式碼，而 setInterval 會以固定間隔重複執行。

WebSocket

WebSocket 允許前後端建立雙向、持久的連接，相較於傳統的 HTTP 請求，能有效降低延遲。

🏗️ 前端開發基礎

HTTP 狀態碼

了解 HTTP 狀態碼如 200 OK、404 Not Found、500 Internal Server Error，對於除錯與 API 開發至關重要。

Cookie、LocalStorage、SessionStorage

這三者都是瀏覽器提供的存儲方式，Cookie 用於小型數據存儲與身份驗證，LocalStorage 適合長期存儲，SessionStorage 則適用於單次瀏覽會話。

Same Origin Policy（同源政策）與 CORS（跨來源資源共享）

同源政策限制了不同來源之間的請求，而 CORS（Cross-Origin Resource Sharing）允許透過適當的伺服器設定來放寬這些限制。

🌐 前端框架與工具

React Hooks

Hooks 讓函式組件也能擁有狀態與生命週期，常見的 Hooks 包括 useState、useEffect、useRef、useContext 等。

useEffect 觸發時機

useEffect 會根據依賴陣列決定何時執行，若未提供依賴，則會在每次重新渲染時觸發。

React Query

React Query 幫助開發者輕鬆處理資料請求與快取，減少 API 請求的重複並提升效能。

Redux 應用程式架構

Redux 是一種狀態管理工具，適合大型應用，通常結合 useSelector 取得狀態，useDispatch 發送 action 來更新狀態。

🔍 系統設計與架構

Stateless vs Stateful

Stateless 指的是無狀態服務，每次請求都是獨立的；Stateful 則保留請求之間的狀態，適用於即時通訊或多人遊戲。

Immutable vs Mutable Data

Immutable 資料不可變更，適合於 Redux 等狀態管理場景，而 Mutable 資料可被直接修改，適用於一般應用開發。

Declarative vs Imperative

Declarative（宣告式）開發強調「做什麼」，如 React，Imperative（命令式）則強調「如何做」，如 jQuery。

大型網站架構演進

現代大型網站架構從傳統的單體應用（Monolithic）演進到微服務（Microservices），再到無伺服器（Serverless），提升可擴展性與維護性。

⏳ 開發工具與實作

Docker Hub 上傳與部署

Docker 允許開發者打包應用並部署至 Docker Hub，提高可攜性與一致性。

Nginx 基礎設定

Nginx 可作為反向代理伺服器，提供負載均衡與靜態文件服務，提升網站效能。

Sass/SCSS

Sass/SCSS 是 CSS 預處理器，提供變數、巢狀結構與混入（Mixin），讓樣式管理更靈活。

CSS 選擇器

熟悉 CSS 選擇器如 nth-child、not()、attribute selector，可幫助提高樣式表的靈活性與可維護性。

⚡ 結語

前端開發涵蓋多個領域，從 JavaScript 基礎到框架應用、系統設計與開發工具，每個環節都影響著面試表現。掌握這些核心概念，並搭配實際專案練習，你將更有信心應對前端開發挑戰！