编者注:本文由我们的编辑团队于2023年1月23日更新. 它已被修改，以包括最近的来源，并与我们目前的编辑标准保持一致.

JavaScript世界是一个丰富的环境，有许多工具、库和框架. 但选择多了，困惑也多了. 这种情况真的是一把双刃剑.虽然你可能有大量的创造力和实验空间, 您经常无法确定要选择的最佳前端框架. 从长远来看，选择正确的前端框架可以成就或破坏您的项目.

在本文中, 我们将介绍一些最流行的前端JavaScript框架，以及它们之间的对比. 我们将研究这些框架的五个不同方面，以简化决定下一个JavaScript框架的过程.

您是否正在从这些流行的前端JavaScript框架中进行选择, 或者更深奥的东西, 你应该把这些方面都考虑进去.

Key No. 1到前端JS框架:学习资源的可用性

这一点很明显，但经常被忽视. 而一些框架的华丽主页和文档可能会吸引您的眼球, 你还需要额外的课程, books, tutorials, 和文章开始.

创建一个健壮的框架是一回事，传达其背后的核心思想是另一回事. 事实上，有许多专业开发人员专门从事指导工作. 一个精心制作的学习资源会极大地缩短你的学习曲线. 从你以前接触过的值得信赖的作者那里寻找资源——最终会值得你花时间. 如果你正在努力寻找有用的东西, 要小心:您尝试学习的框架可能是新的, 或者还没有被社区很好地采用.

虽然我提到了单靠文档是不够的，但也有例外. Ember.例如，Js就有 伟大的文档. 核心特性和用例在这里和那里用通用示例进行了很好的描述. 不幸的是，除了文档之外，我们几乎没有其他东西了.

另一方面，有丰富的资源 Angular and React. 几乎所有面向前端的教育网站都会有一些关于它们的文章, 如果没有完整的视频课程或书籍.

Vue处于中间:它有很好的文档，并且有一些有用的课程可供选择. Aurelia has almost no resources; your only hope is documentation—and luck.

即使你读了一本合适的书或参加了一个有用的课程, 通过接触不同的资源，你会学到新的东西. 如果你对这个主题很熟悉，那就略读并找出那些还不太清楚的主题.

不幸的是, 如果你的选择有限，这个策略就行不通了, 这就引出了下一个问题.

Key No. 2到前端JS框架:流行

你可能会为学习一些异国情调而感到自豪, 但如果你从商业的角度来看, 它并不总是有用的. 您的公司或客户可能更喜欢使用经过实战测试的工具集，这有几个原因. 如果一个框架不那么流行，这意味着很少有专门研究它的开发人员. 如果你放弃了这个项目或者找了一份新工作怎么办? 你的雇主最终会寻找一个了解你使用的利基框架的开发人员.

这种情况可能会成为公司的真正负担. 即使你坚持这个项目，它也会成长. 现在用人单位需要更专业的开发人员来加快开发.

选择流行的、广泛使用的框架还有其他原因. 如果你发现自己被一个问题困住了，而且没有一个社区可以帮助你，会发生什么呢? 由于您需要自己处理文档，因此很可能会浪费大量时间.

除此之外，你要考虑未来，在你的职业生涯中更有吸引力的机会. 如果你擅长某件受欢迎的事情，并且真的很擅长, 会有很多项目等着你.

最受欢迎的是Angular、React和Vue. 大多数与前端相关的工作列表都要求其中之一. 他们得到了谷歌和Facebook的支持, 分别, 因此，雇主选择他们是安全的.

Sometimes, the choice of framework for your company or client is not up to you; maybe it was made by a previous employee or some other person on the team. 很有可能是Angular或React. 现在还有其他选择，比如烬.js和Vue，但你必须有意识地寻找使用它们的公司.

您可以通过查看项目在GitHub和其他地方的表现来大致确定框架的受欢迎程度. 以下是一些统计数据:

尽管这些框架已经存在了足够长的时间，证明它们是受欢迎的选择, 如果你在尝试新的东西, 类似的统计数据可能会帮助你做出选择.

在你的职业生涯中，只学习Angular或React只能走这么远. 当然，您将有很多机会，但是存在其他框架是有原因的. 试着在业余时间了解它们，偶尔做一些实验. 即使你从未在实际项目中使用它们, 您将获得对您日常开发工作有帮助的有价值的见解.

Key No. 3到前端JS框架:核心特性

在开始编码之前，您需要对框架的核心特性进行简要概述，以获得充分的预期. 浏览文档. 您需要对这个框架有一个大致的了解. 它是一个视图层，完全成熟，还是介于两者之间?

如果您有丰富的其他框架的经验，这个过程是简单和快速的. 在文档中查找以下主题:模板, 状态管理, HTTP通信, 表单处理和验证, and routing. 这些都是开发者每天要做的事情. 并非所有这些都可以在核心框架中呈现, 或者可能有一些不同的方法来解决一个特定的问题.

让我们简单介绍一下流行的选项.

我们从 React and Vue. They are not really frameworks; they only represent the view layer of your application. 这意味着所有其他部分——http通信、表单处理和验证等.-由你决定.

正如我刚才提到的，形势可能是一把双刃剑. 最终，您将构建自己的定制框架.

React和Vue都有自己的库生态系统，可以为最常见的问题提供解决方案, 但总体结构因项目而异. React的JSX总是让我畏缩——我必须习惯它. 然而，Vue的模板真的很好，特别是如果你来自Angular.

另一方面，烬.Js几乎什么都有. 令人惊讶的是，烬的核心.js does not provide advanced form processing; it has some input helpers and that’s it. 它非常固执己见，甚至有自己的数据层. 如果你有其他框架或JavaScript的背景, 你可能会感到沮丧，因为烬.js uses its 自己的对象模型. 正如文档所述，标准ES6类并没有被广泛使用. 你可能会发现自己直接给属性和Ember赋值.我在抱怨. 每件事都必须完成，烬.js way.”

Ember Data 是另一种方式烬.Js与其他框架有很大的不同. 它是Ember的数据层.js应用程序. 你可以把它想象成前端的某种ORM. 您创建模型并映射它们之间的关系.

如果您的服务器使用 JSON API (一种实现JSON api的规范)，你在Ember上处于一个很好的位置.Js，但不幸的是，大多数服务器不使用它. 因此，您必须编写自定义适配器和序列化器. 然而，如果你做的事情烬.以我的方式，尽管学习曲线陡峭，但它可能真的很有成效.

Angular是一个功能丰富的框架. 它附带了很多像Ember这样的模块.Js，所以你有很多现成的工具供你使用. 然而，由于Angular是为大型应用设计的，所以它 促进打印稿，这可能会在你尝试之前引发一些抵制.

另一个值得注意的方面是大量使用Rx库中的可观察对象——这是一个很好的特性. 你几乎可以将任何东西表示为一个可观察对象，并应用高级操作，比如map, filter, etc. 如果您使用过Lodash或Underscore，那么Rx就像一个增压的表兄.

以下是本文讨论的四个框架的核心特性总结:

However, 如果您需要加班工作才能有效地使用它们，那么我们讨论的所有功能都是毫无价值的——下一点.

Key No. 4 .前端JS框架:可用性

如果在这一点上，您仍然对您选择的框架有热情, 下一步就是亲自动手.

也许因为你的背景，这个框架很适合你. 也许它有点不同，在某些方面对你有挑战. 你还不知道, 在你自己尝试之前，再多的阅读或观看教程也无济于事.

了解框架的最好方法是在一些小型项目中使用它. 这为您提供了一个使用给定框架解决日常问题的机会.

当你在做一个项目的时候，花点时间思考一下你的工作效率是否很高. 达到预期的结果有多容易? 你必须寻找外部库吗? 也许你需要一些来自社区的插件. 在该框架的上下文中是否存在任何常规结构或指导方针? 也许有一个CLI来加速开发过程. 在这一步, 您正在收集基本信息，以便您可以想象如果将此框架用于即将到来的项目或甚至过渡到现有项目将会是什么样子.

Ember.Js被认为是一个非常高效的框架，至少对它的核心用户来说是这样. 它有一个 CLI，这真的很有帮助. 你可以生成路由, controllers, components, 并且模型具有自己的测试套件(手动完成所有这些是一项乏味的任务). 生成一个新项目也是可能的. 它将创建基本的文件夹结构, 安装必要的软件包, build tools, 测试环境, etc. 如果您从未如此广泛地使用过CLI，那么您将非常满意. 但是，正如我之前提到的，Ember.js is very opinionated; despite all of its usefulness, 你可能会发现自己在试图完成普通任务时感到沮丧.

React和Vue都有cli， create-react-app and vue-cli. 除了生成带有一些选项的初始项目之外, 他们提供的东西没有烬那么多.js或Angular. 这是可以理解的，因为它们都代表一个视图层. 如果你喜欢自定义工作流, 实验, 或者在项目到项目的基础上不同的结构, 那么你在React和Vue方面就处于一个很好的位置. 对于一些开发人员来说，灵活性是关键，并且在使用React或Vue时是固有的.

Angular有一个 CLI 就像灰烬一样.js does. 你可以生成组件、指令、服务等等. 它还生成应用程序的初始结构, 所以你只需要考虑乘积. 测试环境实际上被组织为, 应用程序的每个生成部分, 测试套件就在它附近(字面上). 除此之外，TypeScript可以提供 真正的生产力提升. Here’s why:

你遇到过多少次这样的代码……

doSomething(someData) {
    //做某事
}

想知道到底是什么 someData 它应该有什么属性，它应该提供什么功能，它们的行为是什么? 使用TypeScript，你定义类型并期望得到适当的数据. 如果你使用一些支持TypeScript的IDE，你可以走得更远. 探索应用程序的不同部分是轻而易举的.

我们还没有涉及ide，但是, 对于大多数最好的前端框架, 有一些插件使开发变得非常容易. WebStorm例如，它内置了对Angular、React和Vue的支持.

Key No. 5到前端JS框架:易于与其他库集成

易于集成可以被认为是可用性的一部分, 但它是如此重要，值得它单独的一节.

不管你选择的框架功能有多丰富, 您可能会遇到需要额外工具的问题. 有一些很棒的库只关注一个问题(DOM操作), 数据处理, 时间格式, 富文本编辑, etc.), 但是如果你试着积分其中的一个并且每次都要花上几个小时, 这可能不是最佳选择.

测试这一点非常容易. 您可以很快想出一个需要某个库的假想场景. 看看你过去的项目:你使用了什么工具，在什么情况下? 很有可能你会再次遇到同样的情况，你需要为此做好准备, 或者至少有一个期望.

使用Vue和React, 你几乎要对一切负责, 其他库的使用也不例外. 如果您正在使用Webpack或类似的构建工具, 你可以直接引用使用NPM安装的库. (我发现使用Vue的社区插件有点麻烦, 特别是当它们也包含用户界面逻辑时.)

Ember.js has EmberObserver，一个社区插件网站. 每一个都有一个从0到10的分数. 这是一个能找到你需要的东西的好地方. 如果您键入您喜爱的库的名称, like Lodash, RxJS, or Ramda, 从简单的包装器到完整的重写，您将找到相关的插件. 当然有 可怕的反应 and Awesome Vue, 收集相关资源的存储库, 包括库, 但我发现余烬观察者特别有用.

提交到前端JavaScript框架

选择正确的JavaScript框架是使web项目成功的最重要的步骤之一. 无论你是在做一个小项目还是大项目, 单独或团队工作, 在确定项目的最佳前端框架时，这五个关键点中的每一个都起着至关重要的作用.

至于核心功能和可用性, 我已经列出了会在不同程度上影响开发人员生产力的要点. 可用性尤其棘手，因为它在很大程度上取决于你的经验和背景, 以及你的特定公司或组织及其需求.

Over time, 我们在本文中讨论的框架可能会发展, 他们的受欢迎程度可能会改变, 而且它们适合的项目可能会发生变化, 但是本文应该让您对这些框架在何时何地发挥最佳作用有一个总体的了解.