理解客戶端 JavaScript 框架

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

這樣做，您的程式碼將更加豐富和專業，並且如果您瞭解框架構建在其之上的基本 Web 平臺功能，您將能夠更加自信地排除故障。

1. 客戶端框架簡介

我們從對框架領域的總體概述開始，回顧 JavaScript 和框架的簡史，框架存在的原因及其提供的內容，如何開始思考選擇要學習的框架以及客戶端框架的替代方案。

2. 框架主要功能

每個主要的 JavaScript 框架都採用不同的方法來更新 DOM、處理瀏覽器事件並提供愉快的開發體驗。本文將探討“四大”框架的主要功能，從高級別瞭解框架的工作原理以及它們之間的差異。

1. React 入門

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

2. 開始我們的 React 待辦事項列表

假設我們已被分配在 React 中建立一個概念驗證——一個允許使用者新增、編輯和刪除他們想要處理的任務的應用，還可以將任務標記為已完成而無需刪除它們。本文將指導您完成設定基本 App 元件結構和樣式的過程，為以後新增的各個元件定義和互動做好準備。

3. 將我們的 React 應用元件化

此時，我們的應用是一個整體。在我們能夠使其執行操作之前，我們需要將其分解成可管理的、描述性的元件。React 沒有關於什麼是元件、什麼不是元件的硬性規定——這取決於您！在本文中，我們將向您展示一種將應用分解成元件的合理方法。

4. React 互動性：事件和狀態

在我們的元件計劃制定好後，現在是時候開始將我們的應用從一個完全靜態的 UI 更新為一個真正允許我們互動和更改事物的 UI 了。在本文中，我們將做到這一點，並在此過程中深入瞭解事件和狀態。

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

隨著我們接近 React 之旅的結束（至少目前如此），我們將為待辦事項列表應用中的主要功能區域新增最後的潤色。這包括允許您編輯現有任務並在所有、已完成和未完成任務之間過濾任務列表。我們將在過程中瞭解條件 UI 渲染。

6. React 中的可訪問性

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

7. React 資源

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

1. Ember 入門

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

2. Ember 應用結構和元件化

在本文中，我們將直接開始規劃 TodoMVC Ember 應用的結構，新增其 HTML，然後將該 HTML 結構分解成元件。

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

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

4. Ember 互動性：頁尾功能、條件渲染

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

5. Ember 中的路由

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

6. Ember 資源和故障排除

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

1. Vue 入門

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

2. 建立我們的第一個 Vue 元件

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

3. 渲染 Vue 元件列表

此時，我們已經擁有了一個完全工作的元件；現在我們準備向我們的應用新增多個 ToDoItem 元件。在本文中，我們將查看向 App.vue 元件新增一組待辦事項資料，然後我們將迴圈遍歷這些資料並在 ToDoItem 元件內部使用 v-for 指令顯示這些資料。

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

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

5. 使用 CSS 樣式化 Vue 元件

終於到了讓我們的應用看起來更漂亮的時候了。在本文中，我們將探討使用 CSS 樣式化 Vue 元件的不同方法。

6. 使用 Vue 計算屬性

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

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

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

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

我們快完成 Vue 了。最後要檢視的功能是焦點管理，或者換句話說，我們如何改進應用的鍵盤可訪問性。我們將瞭解如何使用 Vue refs 來處理此問題——一項高階功能，允許您直接訪問虛擬 DOM 下面的底層 DOM 節點，或從一個元件直接訪問子元件的內部 DOM 結構。

9. Vue 資源

現在，我們將透過提供一些資源列表來結束對 Vue 的學習，這些資源可以幫助你更深入地學習，以及一些其他有用的技巧。

1. Svelte 入門

在本文中，我們將快速介紹 Svelte 框架。我們將瞭解 Svelte 的工作原理以及它與我們迄今為止看到的其他框架和工具的不同之處。然後，我們將學習如何設定開發環境、建立示例應用程式、瞭解專案的結構，以及如何本地執行它以及構建生產版本。

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

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

3. Svelte 中的動態行為：使用變數和屬性

現在我們的標記和樣式已準備就緒，我們可以開始開發 Svelte 待辦事項列表應用程式所需的功能了。在本文中，我們將使用變數和屬性來使我們的應用程式動態化，從而允許我們新增和刪除待辦事項、將它們標記為已完成以及按狀態篩選它們。

4. 將我們的 Svelte 應用程式元件化

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

5. 高階 Svelte：反應性、生命週期、可訪問性

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

6. 使用 Svelte 儲存

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

7. Svelte 中的 TypeScript 支援

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

8. 部署和後續步驟

在本文的最後，我們將介紹如何部署你的應用程式並將其上線，以及分享一些你應該繼續學習 Svelte 的資源。

1. Angular 入門

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

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

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

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

現在我們已經設定了基本應用程式結構並開始顯示一些有用的內容，讓我們換個思路，專門用一篇文章來了解 Angular 如何處理應用程式的樣式。

4. 建立專案元件

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

5. 篩選我們的待辦事項

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

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

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

我們正在釋出我們的第一套文章，其中包含專注於五個框架的指南。其中四個非常流行且完善——React/ReactDOM、Ember、Vue 和 Angular——而 Svelte 則是一個相對較新的框架，它展現出巨大的潛力，並最近獲得了廣泛的關注。

這有多種原因

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

我們想預先說明——我們沒有選擇我們關注的框架是因為我們認為它們是最好的，或者因為我們以任何方式認可它們。我們只是認為它們在上述標準中得分很高。

請注意，我們希望在首次釋出時包含更多框架，但我們決定釋出內容，然後稍後新增更多框架指南，而不是延遲更長時間。如果你的最愛框架沒有包含在本內容中，並且你想幫助改變這種情況，請隨時與我們討論！