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

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

我们想事先声明——我们选择这些框架并不是因为我们认为它们是最好的，也不是因为我们以任何方式认可它们。我们只是认为它们在上述标准中得分很高。

• 概述：核心学习模块
• 下一页