理解客户端 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 则是一个相对较新的框架，它展现出巨大的潜力，并最近获得了广泛的关注。

这有多种原因

• 它们是流行的选择，并且会存在一段时间——与任何软件工具一样，最好坚持使用积极开发的选择，这些选择不太可能在下周被停用，并且在找工作时会成为你技能组合中理想的补充。
• 它们拥有强大的社区和良好的文档。能够在学习复杂主题时获得帮助非常重要，尤其是在你刚开始学习时。
• 我们没有资源涵盖所有现代框架。无论如何，这个列表都很难保持最新，因为新的框架不断出现。
• 作为一个初学者，试图从大量可用的选择中选择要关注的内容是一个非常现实的问题。因此，保持列表简短非常有用。

我们想预先说明——我们没有选择我们关注的框架是因为我们认为它们是最好的，或者因为我们以任何方式认可它们。我们只是认为它们在上述标准中得分很高。

请注意，我们希望在首次发布时包含更多框架，但我们决定发布内容，然后稍后添加更多框架指南，而不是延迟更长时间。如果你的最爱框架没有包含在本内容中，并且你想帮助改变这种情况，请随时与我们讨论！