7. JavaScript 框架

工具

擴充套件模組

JavaScript 框架常被公司用來構建 Web 應用程式。因此，瞭解流行的框架及其用例（如下所列）將有助於提升就業前景。

注意:

符合這些標準並不意味著要成為某個特定框架的大師並掌握其所有功能。這樣做可能會受限——某個框架現在可能是最受歡迎的選擇，但在五年後一切都可能改變。

相反，我們希望鼓勵學生們對構建框架所依賴的 JavaScript 基礎知識（參見JavaScript 基礎知識）有紮實的理解，並學習框架使用的常見功能和模式。這種方法更具靈活性，也更能適應未來。

強烈建議學生們開始使用 2-3 個流行的框架來構建應用程式，這樣他們就能理解它們通常的實現方式，同時也能瞭解它們之間的區別。

高階功能和/或特定於框架的功能可以在學生持續學習的過程中進行學習。

學習成果

瞭解如何開始使用框架
- 連結到相關的 JavaScript 檔案，可以是本地檔案，也可以是在CDN上（通常不推薦）。
- 使用 npm 等依賴管理器將其新增到你的專案中。
- 安裝一個 CLI 工具，如Vite，並使用它來生成一個你可以修改的、基於框架的骨架應用程式。這是最簡單的入門方式。
典型框架的基礎知識。整體架構會有所不同，但大多數框架都以某種形式包含以下內容，你應該瞭解它們：
- 元件系統
  - Props（屬性）。
  - 資料繫結。
  - 事件處理程式。
  - 依賴注入。
  - 元件生命週期系統。
- 模板語言
  - 通常是特定領域語言（DSL），如 JSX 或 handlebars。
  - 包含過濾和條件渲染等功能。
- 渲染系統（例如，虛擬 DOM 或增量 DOM）。
- 狀態管理。
- 路由。
- 樣式系統，用於將 CSS 應用於你的元件。
- 依賴管理。
- 擴充套件系統。
瞭解使用框架的實際操作。大多數與框架相關的 CLI 或開發環境包括：
- 一個本地測試伺服器，在檔案儲存時自動重新整理。
- 一組適用於流行程式碼編輯器（例如 VSCode）的有用的擴充套件，提供諸如框架特定程式碼的 linting 和程式碼補全等功能。
- 用於編寫測試的整合系統（另請參閱擴充套件 6 測試）。
- 便於部署到遠端伺服器（大多數部署工具，如Netlify和Vercel，都集成了與 GitHub 和流行框架協同工作的工具/功能）。

資源

上一篇：6. 測試下一篇：8. CSS 工具