軟體工程師職涯升級計畫啟動!立即預約職涯諮詢、履歷健檢或模擬面試👈,為您的加薪做好準備!
🔗 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 基礎到框架應用、系統設計與開發工具,每個環節都影響著面試表現。掌握這些核心概念,並搭配實際專案練習,你將更有信心應對前端開發挑戰!














