path: root/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/index.html

---
title: 理解客户端JavaScript框架
slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks
tags:
  - JavaScript
  - 初学者
  - 前段框架
  - 学习
  - 客户端
translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks
---
<div>{{LearnSidebar}}</div>

<p class="summary">JavaScript框架是现代前端web开发的重要部分，为开发人员提供了构建可伸缩、交互式web应用程序的经过测试的工具。许多现代公司使用框架作为工具的标准部分，因此许多前端开发工作现在需要框架经验。</p>

<p class="summary">作为一个有抱负的前端开发人员,很难找出从哪里开始学习框架——有这么多不同的框架可供选择,新的问题出现,他们大多以类似的方式工作,但做一些不同的事情,还有一些具体的事情时要小心使用框架。</p>

<p class="summary">在这一系列文章中，我们旨在为您提供一个舒适的起点，帮助您开始学习框架。我们的目标不是详尽地教给你所有你需要知道的关于React/ReactDOM，或者Vue，或者其他一些特定的框架;框架团队自己的文档已经完成了这项工作。相反，我们想备份和首先回答更基本的问题，如:</p>

<ul>
 <li class="summary">为什么要使用框架?他们为我解决了什么问题?</li>
 <li class="summary">当我尝试选择一个框架时，我应该问什么问题?我甚至需要使用框架吗?</li>
 <li class="summary">框架有什么特性?它们一般是如何工作的?框架对这些特性的实现有何不同?</li>
 <li class="summary">它们与“普通的”JavaScript或HTML有什么关系?</li>
</ul>

<p class="summary">在此之后，我们将提供一些教程，介绍一些主要框架的基本内容，为您提供足够的上下文和熟悉感，以便您自己开始更深入地学习。我们希望你以一种实用的方式来学习框架，不要忘记web平台的基本最佳实践，比如可访问性。</p>

<p class="summary"><strong><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">通过“客户端框架介绍”即刻开始</a></strong></p>

<h2 id="前提条件">前提条件</h2>

<p>在尝试学习客户端框架(HTML、CSS，特别是JavaScript)之前，您应该首先真正学习核心web语言的基础知识。</p>

<p>如果你理解了框架底层的基础Web平台特性，你将能编写更加健壮和专业的代码，更容易地排除问题。</p>

<h2 id="说明指导">说明指导</h2>

<dl>
 <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">1. 客户端框架介绍</a></dt>
 <dd>我们首先从以下话题开始研究框架，框架领域的总览，JavaScript和框架历史的简介，为什么需要框架以及框架能带给我们什么，如何考虑选择一个框架开始学习，有什么其它的客户端框架可供选择。</dd>
 <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">2. 框架的主要特性</a></dt>
 <dd>每种JavaScript框架都有自己不同的方式更新DOM，处理浏览器事件，为开发者提供愉悦的使用体验，这篇文章将探索“四大”框架的主要特性，从高级角度探讨框架的工作方式以及它们之间的区别。</dd>
</dl>

<h2 id="React教程">React教程</h2>

<div class="blockIndicator note">
<p><strong>Note</strong>: React教程最后测试于2020年5月，基于React/ReactDOM 16.13.1和create-react-app 3.4.1.</p>

<p>如果你需要确认你的代码与我们的版本区别，你可以在我们的<a href="https://github.com/mdn/todo-react">todo-react repository</a>仓库找到React应用示例代码的完整版本。想要获取当前最新的版本，查看<a href="https://mdn.github.io/todo-react-build/">https://mdn.github.io/todo-react-build/</a>.</p>
</div>

<dl>
 <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">1. 开始使用React</a></dt>
 <dd>此章节我们将向React打招呼。我们将能发现有关React的背景和使用场景的一些细节，在我们的计算机上设置基本的React工具链，创建和运行简单的入门应用，学习React在这个过程是如何工作的。</dd>
 <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">2. 开始我们的React待办清单</a></dt>
 <dd>假设我们计划使用React创建proof-of-concept，一个允许用户添加，编辑和删除工作任务，不删除的情况标记任务完成的应用。此章节将带你完成基本的<code>App</code>组件结构和样式，为最后即将添加的独立组件定义和交互做好准备。</dd>
 <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">3. 组件化我们的React应用</a></dt>
 <dd>到这个阶段，我们的应用仍是一个单一结构。在让它工作之前，我们需要将它分解为可管理的描述性组件。React对于组件没有任何硬性规定--这完全取决于你！在此章节我们将向你展示一个合理的方式来将我们的应用分解成 组件。</dd>
 <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">4. React交互：事件和状态</a></dt>
 <dd>我们的组件化计划已经完成，现在是时候开始将我们的应用从一个完全静态的界面更新成允许交互和变更的界面。在这个章节我们将继续研究事件和状态，借此实现上述功能。</dd>
 <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">5. React交互：编辑，过滤，条件渲染</a></dt>
 <dd>我们已经接近React旅程的终点（至少目前是这样），我们将对我们的Todo列表应用的主要功能区域做最后的更改。这包括允许编辑现有的任务，在所有列表，已完成列表和未完成列表中过滤任务。在这个过程中我们将研究条件渲染。</dd>
 <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">6. React的可访问性支持</a></dt>
 <dd>在我们最后的教程章节，我们将重点介绍可访问性，包括React的焦点管理，这可以提高可用性，降低纯键盘用户和屏幕阅读器用户的困扰。</dd>
 <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">7. React资源</a></dt>
 <dd>我们的最后章节提供了一个React资源列表，供你用于进一步的学习。</dd>
</dl>

<h2 id="Ember教程">Ember教程</h2>

<div class="blockIndicator note">
<p><strong>Note</strong>: Ember教程最后测试于2020年5月，基于Ember/Ember CLI version 3.18.0.</p>

<p>如果你需要确认你的代码与我们的版本区别，你可以在<a href="https://github.com/NullVoxPopuli/ember-todomvc-tutorial/tree/master/steps/00-finished-todomvc/todomvc">ember-todomvc-tutorial repository</a>找到Ember应用示例代码的完整版本。想要获取当前最新的版本，查看<a href="https://nullvoxpopuli.github.io/ember-todomvc-tutorial/">https://nullvoxpopuli.github.io/ember-todomvc-tutorial/</a> （这还包含了本教程未覆盖到的一些额外的特性）。</p>
</div>

<dl>
 <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">1. 开始使用Ember</a></dt>
 <dd>在我们的Ember第一章节中我们将了解Ember的工作原理及其用途，本地安装Ember工具链，创建一个示例应用，然后做一些初始化设置以便开始开发。</dd>
 <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">2. Ember应用结构和组件化</a></dt>
 <dd>在此章节，我们将继续规划我们的TodoMVC Ember应用，为其添加HTML部分，随后将这些HTML分解为组件。</dd>
 <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">3. Ember交互：事件，类和状态</a></dt>
 <dd>至此，我们将添加一些交互行为到我们的应用，使其能够添加和显示新的待办事项。在此过程中，我们将研究如何在Ember中使用事件，创建包含JavaScript代码的组件类来控制交互功能，并且设置服务来跟踪我们的应用的数据状态。</dd>
 <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">4. Ember交互：页脚功能，条件渲染</a></dt>
 <dd>现在是时候开始在我们的应用中处理页脚功能了。这里我们将更新待办事项计数器以正确显示待完成待办事项的数量，并正确地为已完成事项应用样式（i.e. 对应列表项的复选框处于选中状态）。我们还将实装我们的“Clear completed”按钮。在这个过程中，我们将学习在我们的模板中使用条件渲染。</dd>
 <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">5. Ember路由</a></dt>
 <dd>在此章节我们学习路由，有时也称为URL-based过滤。我们将使用它来为三个待办视图------"All","Active"和"Completed"提供全局唯一的URL。</dd>
 <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">6. Ember资源和疑难解答</a></dt>
 <dd>我们的最后一个Ember章节提供了一个供你进一步学习的资源列表，还有一些有用的疑难解答和其他信息。</dd>
</dl>

<h2 id="Vue教程">Vue教程</h2>

<div class="blockIndicator note">
<p><strong>Note</strong>: Vue教程最后测试于2020年5月，基于Vue 2.6.11.</p>

<p>如果你需要确认你的代码与我们的版本区别，你可以在<a href="https://github.com/mdn/todo-vue">todo-vue repository</a>找到Vue应用示例代码的完整版本。想要获取当前当前最新的版本，查看<a href="https://mdn.github.io/todo-vue/dist/">https://mdn.github.io/todo-vue/dist/</a>.</p>
</div>

<dl>
 <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">1. 开始使用Vue</a></dt>
 <dd>现在让我们开始介绍Vue，我们的第三个框架。在此章节我们将简单了解Vue的背景，学习如何安装Vue以及如何创建一个新项目，学习整个项目的高级架构以及独立的组件，了解如何在本地运行这个项目，并准备开始构建我们的示例。</dd>
 <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">2. 创建我们的第一个Vue组件</a></dt>
 <dd>现在是时候深入Vue，创建我们自己的自定义组件了--我们将从创建一个用来展示待办列表项目的组件开始。在这个过程中，我们将学习一些重要的概念例如在一个组件中调用另一个组件，通过props传递数据给另一个组件并保存数据状态。</dd>
 <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">3. 渲染Vue组件列表</a></dt>
 <dd><span class="author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxwoxz78zz83zz84zz69z2z80zgwxsgnz83zfkt5e5tz70zz68zmsnjz122zz71z">至此我们已经得到了一个完全可用的组件，我们现在已经准备好添加多个<code>ToDoItem</code> 组件到我们的应用中了。在此章节我们将了解如何添加一组待办项数据到我们的<code>App.vue</code>组件，这组数据我们随后使用<code>v-for</code>指令将它们循环并显示到<code>ToDoItem</code>组件中。</span></dd>
 <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">4. 添加一个新的待办表单：Vue事件，方法和模型</a></dt>
 <dd>现在我们的应用已经有了示例数据和一个循环来将每条数据渲染到<code>ToDoItem</code>中。下一步我们要做的是让用户能够输入他们自己的待办事项到这个应用中。 为此我们需要一个文本输入框<code>&lt;input&gt;</code>，一个在数据提交时触发的事件，一个在数据提交时被触发来添加数据和渲染列表的方法和一个用来控制数据的模型。这就是这个章节我们将要介绍的内容。</dd>
 <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">5. 使用CSS美化Vue组件</a></dt>
 <dd>终于到了美化我们的应用的时间了。在此章节我们将探索用CSS美化Vue组件的不同方法。</dd>
 <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">6. 使用Vue计算属性</a></dt>
 <dd>在这个章节我们将添加一个显示已完成待办项目数量的计数器，使用Vue的一个叫做计算属性的特性。计算属性与方法相似，但是只有它的依赖内容变更时才会再次运作。</dd>
 <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">7. Vue条件渲染：编辑既有待办项</a></dt>
 <dd>现在是时候加入我们还未实现一个主要功能部分了------编辑既有待办项。为了实现这个功能，我们将利用Vue的条件渲染能力------<code>v-if</code>和<code>v-else</code>来使既有待办项目在查看状态和文本编辑状态之间切换。我们还将添加删除待办项的功能。</dd>
 <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">8. 使用Vue refs进行焦点管理</a></dt>
 <dd>我们快要完成Vue的使用了。最后要看的一个功能是焦点管理，换种说法，如何改善我们的应用的键盘可操作性。我们将解决这个问题，通过Vue refs------一个允许你直接操作虚拟DOM的底层DOM，或在组件中直接操作其子组件内部DOM结构的高级特性。</dd>
 <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">9. Vue资源</a></dt>
 <dd>我们将提供一个你可以用来进一步学习的资源列表来圆满结束我们的Vue学习教程，从这个列表中你也可以获取一些有用的技巧。</dd>
</dl>

<h2 id="我们应该选择哪个框架？">我们应该选择哪个框架？</h2>

<p>我们在这里发布专注于主要三大框架的系列说明文章------React/ReactDOM，Ember和Vue的一些原因如下：</p>

<ul>
 <li>它们在今后的一段时间内都将是最受欢迎的选择------就像使用任何软件工具一样，依附于一个处于活跃开发状态并且不太会突然停止开发的工具是一个明智的选择，并且它们会成为你寻找工作时所需的技能之一。</li>
 <li>它们拥有强大的社区和良好的文档支持。学习复杂的主题时得到帮助是很重要的，特别是你是刚开始学习时。</li>
 <li>我们没有资源能覆盖所有现代框架。维护所有现代框架的最新列表是非常困难的，因为总有新的框架在不断被创造出来。</li>
 <li>作为一个初学者，在大量的可选内容中选择关注哪部分是很难的，维持一个相对短的列表反而是有益的。</li>
</ul>

<p>我们想在前面说一下------我们<strong>没有</strong>因为我们认为它们是最好的或者我们赞同它们而选择这些我们正在关注的框架。我们只是认为它们在上面这些方面评价比较高。</p>

<p>值得一提的是我们也希望在我们的初版发布时能够包含更多框架的内容，但是我们最终决定先把初版内容发布出来随后在此基础上再慢慢添加更多框架内容，而不是延后更长的时间。如果你最喜欢的框架没有包含在这部分内容中而且你想帮助改善这个情况，请立即告诉我们！你可以通过<a href="https://wiki.mozilla.org/Matrix">Matrix</a>或<a href="https://discourse.mozilla.org/c/mdn">Discourse</a>联系我们或者发送邮件到我们的邮件列表<a href="mailto:mdn-admins@mozilla.org">mdn-admins list</a>。</p>