JavaScript 框架和庫

預備知識

在嘗試學習客戶端框架之前，您應該首先真正學習核心 Web 語言的基礎知識——HTML、CSS，尤其是 JavaScript。

您的程式碼將因此而變得更豐富、更專業，如果您瞭解框架所基於的基本 Web 平臺功能，您將能夠更自信地解決問題。

入門教程

客戶端框架介紹

我們首先對框架領域進行一般性概述，回顧 JavaScript 和框架的簡要歷史，框架為何存在以及它們為我們提供了什麼，如何開始考慮選擇一個框架來學習，以及客戶端框架有哪些替代方案。

框架主要功能

每個主要的 JavaScript 框架在更新 DOM、處理瀏覽器事件和提供愉快的開發體驗方面都有不同的方法。本文將探討“四大”框架的主要功能，從高層次上審視框架的運作方式以及它們之間的差異。

React 教程

React 入門

在本文中，我們將向 React 打個招呼。我們將瞭解一些關於其背景和用例的細節，在本地計算機上設定一個基本的 React 工具鏈，並建立一個簡單的入門應用程式並進行操作，在此過程中學習一些 React 的工作原理。

開始我們的 React 待辦事項應用程式

假設我們接到任務，要用 React 建立一個概念驗證應用程式——一個允許使用者新增、編輯和刪除他們想要處理的任務，以及標記任務為已完成而不刪除它們的應用程式。本文將引導您完成基本 App 元件結構和樣式的設定，為稍後新增的單個元件定義和互動性做好準備。

元件化我們的 React 應用程式

此時，我們的應用程式是一個整體。在讓它做事情之前，我們需要將其拆分為可管理、描述性的元件。React 對於什麼是一個元件並沒有嚴格的規定——這取決於您！在本文中，我們將向您展示一種合理的方式將我們的應用程式拆分為元件。

React 互動性：事件和狀態

在制定好元件計劃後，現在是時候開始將我們的應用程式從完全靜態的 UI 更新為實際允許我們互動和更改內容的應用程式了。在本文中，我們將完成此操作，並在此過程中深入研究事件和狀態。

React 互動性：編輯、過濾、條件渲染

當我們接近 React 之旅的尾聲時（至少目前如此），我們將為我們的待辦事項列表應用程式的主要功能區域新增最後的修飾。這包括允許您編輯現有任務，以及在所有任務、已完成任務和未完成任務之間過濾任務列表。在此過程中，我們將研究條件 UI 渲染。

React 中的可訪問性

在我們的最後一篇教程文章中，我們將重點關注（雙關語）可訪問性，包括 React 中的焦點管理，這可以提高僅使用鍵盤的使用者和螢幕閱讀器使用者的可用性並減少混淆。

React 資源

我們的最後一篇文章為您提供了一系列 React 資源，您可以使用這些資源進一步學習。

其他框架選擇

Ember 教程

Ember 入門

在我們的第一篇 Ember 文章中，我們將介紹 Ember 的工作原理和用途，在本地安裝 Ember 工具鏈，建立一個示例應用程式，然後進行一些初始設定以使其為開發做好準備。

Ember 應用程式結構和元件化

在本文中，我們將直接規劃我們的 TodoMVC Ember 應用程式的結構，新增 HTML，然後將該 HTML 結構拆分為元件。

Ember 互動性：事件、類和狀態

此時，我們將開始為我們的應用程式新增一些互動性，提供新增和顯示新待辦事項的功能。在此過程中，我們將瞭解如何在 Ember 中使用事件，建立元件類以包含 JavaScript 程式碼來控制互動功能，以及設定服務以跟蹤應用程式的資料狀態。

Ember 互動性：頁尾功能，條件渲染

現在是時候開始處理我們應用程式中的頁尾功能了。在這裡，我們將更新待辦事項計數器以顯示仍需完成的待辦事項的正確數量，並正確地將樣式應用於已完成的待辦事項（即，複選框已選中的待辦事項）。我們還將連線“清除已完成”按鈕。在此過程中，我們將學習如何在模板中使用條件渲染。

Ember 中的路由

在本文中，我們將學習路由或有時被稱為基於 URL 的過濾。我們將使用它為三個待辦事項檢視——“所有”、“活動”和“已完成”——提供唯一的 URL。

Ember 資源和故障排除

我們的最後一篇 Ember 文章為您提供了一系列資源，您可以使用這些資源進一步學習，以及一些有用的故障排除和其他資訊。

Vue 教程

Vue 入門

現在讓我們介紹 Vue，我們的第三個框架。在本文中，我們將簡要了解 Vue 的背景，學習如何安裝它並建立一個新專案，研究整個專案和單個元件的高階結構，瞭解如何在本地執行專案，並準備好開始構建我們的示例。

建立我們的第一個 Vue 元件

現在是時候深入研究 Vue，並建立我們自己的自定義元件了——我們將從建立一個元件開始，以表示待辦事項列表中的每個專案。在此過程中，我們將學習一些重要的概念，例如在其他元件中呼叫元件，透過 props 向它們傳遞資料以及儲存資料狀態。

渲染 Vue 元件列表

此時我們已經有一個完全正常的元件；現在我們準備嚮應用程式新增多個 ToDoItem 元件。在本文中，我們將研究向 App.vue 元件新增一組待辦事項資料，然後我們將透過迴圈並使用 v-for 指令在 ToDoItem 元件中顯示這些資料。

新增新的待辦事項表單：Vue 事件、方法和模型

我們現在已經有了示例資料和一個迴圈，該迴圈獲取每條資料並將其渲染到我們的應用程式中的 ToDoItem 中。接下來我們真正需要的是允許使用者在應用程式中輸入自己的待辦事項的能力，為此，我們需要一個文字 <input>，一個在資料提交時觸發的事件，一個在提交時觸發以新增資料並重新渲染列表的方法，以及一個控制資料的模型。這就是我們將在本文中涵蓋的內容。

使用 CSS 為 Vue 元件設定樣式

是時候讓我們的應用程式看起來更漂亮了。在本文中，我們將探討使用 CSS 為 Vue 元件設定樣式的不同方法。

使用 Vue 計算屬性

在本文中，我們將使用 Vue 的計算屬性功能新增一個計數器，顯示已完成的待辦事項的數量。計算屬性的工作方式類似於方法，但僅在其依賴項之一發生更改時才重新執行。

Vue 條件渲染：編輯現有待辦事項

現在是時候新增我們仍然缺少的主要功能之一了——編輯現有待辦事項的能力。為此，我們將利用 Vue 的條件渲染功能——即 v-if 和 v-else——允許我們在現有待辦事項檢視和可以更新待辦事項標籤的編輯檢視之間切換。我們還將研究新增刪除待辦事項的功能。

Vue refs 和生命週期方法用於焦點管理

我們快完成 Vue 的學習了。最後要看的功能是焦點管理，換句話說，我們如何提高應用程式的鍵盤可訪問性。我們將研究使用 Vue refs 來處理這個問題——這是一個高階功能，它允許您直接訪問虛擬 DOM 下方的底層 DOM 節點，或者從一個元件直接訪問子元件的內部 DOM 結構。

Vue 資源

現在，我們將透過為您提供一系列資源來結束我們的 Vue 學習，您可以使用這些資源進一步學習，以及一些其他有用的提示。

Svelte 教程

Svelte 入門

在本文中，我們將快速介紹 Svelte 框架。我們將瞭解 Svelte 的工作原理以及它與我們目前所見的其他框架和工具的區別。然後我們將學習如何設定開發環境，建立一個示例應用程式，理解專案結構，並瞭解如何在本地執行它並將其構建用於生產。

開始我們的 Svelte 待辦事項列表應用程式

現在我們已經對 Svelte 的工作原理有了基本的瞭解，我們可以開始構建我們的示例應用程式：一個待辦事項列表。在本文中，我們首先將瞭解應用程式所需的功能，然後我們將建立一個 Todos.svelte 元件並放置靜態標記和樣式，為開始開發我們的待辦事項列表應用程式功能做好一切準備，我們將在後續文章中繼續進行。

Svelte 中的動態行為：使用變數和 props

現在我們的標記和樣式都已準備就緒，我們可以開始為 Svelte 待辦事項列表應用程式開發所需的功能。在本文中，我們將使用變數和 props 使我們的應用程式具有動態性，允許我們新增和刪除待辦事項，將其標記為已完成，並按狀態過濾它們。

元件化我們的 Svelte 應用程式

本文的核心目標是探討如何將我們的應用程式拆分為可管理的元件並在它們之間共享資訊。我們將對我們的應用程式進行元件化，然後新增更多功能以允許使用者更新現有元件。

高階 Svelte：響應性、生命週期、可訪問性

在本文中，我們將新增應用程式的最終功能並進一步元件化我們的應用程式。我們將學習如何處理與更新物件和陣列相關的響應性問題。為了避免常見的陷阱，我們需要更深入地研究 Svelte 的響應性系統。我們還將研究解決一些可訪問性焦點問題，以及更多內容。

使用 Svelte stores

在本文中，我們將展示另一種處理 Svelte 中狀態管理的方法——Stores。Stores 是全域性資料倉庫，用於儲存值。元件可以訂閱 Stores 並在其值更改時接收通知。

Svelte 中的 TypeScript 支援

我們現在將學習如何在 Svelte 應用程式中使用 TypeScript。首先，我們將學習 TypeScript 是什麼以及它能給我們帶來什麼好處。然後我們將看到如何配置我們的專案以使用 TypeScript 檔案。最後，我們將回顧我們的應用程式，看看我們必須進行哪些修改才能充分利用 TypeScript 功能。

部署和後續步驟

在最後一篇文章中，我們將介紹如何部署您的應用程式並使其線上，並分享一些您應該繼續學習的資源，以繼續您的 Svelte 學習之旅。

Angular 教程

Angular 入門

在本文中，我們將瞭解 Angular 的功能，安裝先決條件並設定一個示例應用程式，並瞭解 Angular 的基本架構。

開始我們的 Angular 待辦事項列表應用程式

此時，我們已準備好開始使用 Angular 建立我們的待辦事項列表應用程式。完成的應用程式將顯示待辦事項列表，幷包括編輯、刪除和新增功能。在本文中，您將瞭解應用程式結構，並逐步顯示一個基本的待辦事項列表。

為我們的 Angular 應用程式設定樣式

現在我們已經設定了基本的應用程式結構並開始顯示一些有用的東西，讓我們切換一下，花一篇文章來看看 Angular 如何處理應用程式的樣式。

建立專案元件

元件提供了一種組織應用程式的方式。本文將引導您建立一個元件來處理列表中的單個專案，並新增檢查、編輯和刪除功能。本文介紹了 Angular 事件模型。

過濾我們的待辦事項

現在讓我們繼續新增功能，允許使用者過濾他們的待辦事項，以便他們可以檢視活動、已完成或所有專案。

構建 Angular 應用程式和更多資源

這篇最後的 Angular 文章介紹瞭如何構建一個可用於生產的應用程式，並提供了更多資源供您繼續學習。

我們選擇了哪些框架？

我們的教程涵蓋了五個框架——Angular、Ember、React/ReactDOM、Svelte 和 Vue

• 它們是流行的選擇，將存在一段時間——就像任何軟體工具一樣，最好選擇活躍開發且不太可能在下週停產的，並且在找工作時會成為您技能組合的理想補充。
• 它們擁有強大的社群和完善的文件。在學習複雜主題時，尤其是在剛開始時，能夠獲得幫助非常重要。
• 我們沒有資源來涵蓋 所有 現代框架。無論如何，這個列表很難保持最新，因為新的框架不斷湧現。
• 作為初學者，試圖從大量可用選擇中選擇重點是一個非常現實的問題。因此，保持列表簡短是有幫助的。

我們想事先宣告——我們選擇這些框架並不是因為我們認為它們是最好的，也不是因為我們以任何方式認可它們。我們只是認為它們在上述標準中得分很高。

• 概述：核心學習模組
• 下一頁