为什么 Web 开发人员需要学习一个 JavaScript 框架？

Posted 2021-09-04 JerryWang_汪子熙

原文链接

可能当我们结束本文时，一个新的 javascript 框架已经在某处启动了。但这确实不在我们的控制范围内。因此，我们应该简单地继续我们所拥有的。至少，由于免责声明，我们可以确定我们不是在发明新框架。

曾几何时，编写有效的前端代码意味着您必须很好地理解 html、CSS 和 JavaScript 如何融合在一起来创建网页。好吧，幸运的是，即使在今天，这也几乎是正确的。然而，在过去的十年中，Javascript 领域出现了爆炸式增长。由于这个原因，开发人员一直在挠头，只是弄清楚他们应该知道什么才能构建有效的 Web 应用程序。

在这篇文章中，我们将尝试解开现代 Javascript 景观的一些方面。如果您想成为一名专业的前端开发人员，我们还将研究您可能应该学习的内容。但在我们这样做之前，让我们从头开始。

JavaScript 是如何工作的？

当客户端或浏览器访问 HTML 页面时，服务器会发回 HTML 标记。 浏览器接收它并解释标记以构造 DOM 或文档对象模型。 JavaScript 具有与 DOM 交互、修改和使其具有交互性的能力。 通常，JavaScript 使用脚本标签包含在您的 DOM 中。

现在，问题是 JavaScript 执行阻塞了 DOM。 这意味着用户无法与网页进行太多交互。 换句话说，JavaScript 执行的时间越长，您的 Web 应用程序的响应速度就越慢。 这就是 AJAX 或异步 JavaScript 和 XML 的用武之地。大多数闪亮的新 JavaScript 框架也用它来。

为什么要使用框架？

完全可以在不使用任何框架的情况下构建 Web 应用程序。但现代 JavaScript 版图发展如此之快并非没有原因。在过去的十年中，很明显，使用纯 JavaScript 编写复杂的应用程序极其复杂。

现代 JavaScript 框架的目标是减少构建交互式和用户友好的 Web 应用程序所需的繁琐和重复工作量。可以说，无论语言如何，大多数框架都试图做同样的事情。但是，其他编程语言可能没有那么多框架。另一方面，现代 JavaScript 领域实际上有数百个框架和库。这些库或框架中的每一个都试图解决一组特定的问题。

然而，大多数主要框架都试图解决一个常见的用例：如何构建能够支持复杂用户交互并在前端或客户端管理应用程序状态和业务逻辑的单页 Web 应用程序。

简而言之，单页应用程序或 SPA 是可以在客户端上运行而无需不断重新加载页面的 Web 应用程序。

Steps to Conquer the Modern JavaScript Landscape

让我们假设您是一个完整的新手。 你想开始学习前端开发并有一天成为一名专业人士。

你必须学习很多！ 没有其他方法可以表达它。 当然，这是一段漫长而曲折的旅程。

但是，为了简单起见，我将旅程分为几个阶段。 这些阶段可以帮助您掌握现代 JavaScript 环境。

第一阶段

学习 HTML

无论您使用什么框架，HTML 和 CSS 几乎总是存在。 所以不要试图绕过它们。 您应该学习如何创建 HTML 页面，现在将页面划分为多个部分。 专注于适当的结构，暂时不要担心页面美化部分。

学习 CSS

CSS 或层叠样式表为丑陋的 HTML 页面增添了美感。 尽可能多地学习。 它很大，有很多选择，你总能找到新的东西。 如果你想要一个列表，那么学习 CSS 网格布局、Flexbox、媒体查询和响应式 CSS。 这些东西将帮助您进行认真的 Web 开发。 另外，我建议至少学习一个 CSS 框架。 如果您不确定要选择什么，我会推荐 Bootstrap。 它将帮助您使用较少的 CSS 和一些好的设计模式构建专业的 Web 应用程序。

学习 JavaScript 基础

考虑到一旦开始使用框架就不会编写普通的 JavaScript，这听起来可能有悖常理。 但是，学习基础知识将使您以后受益匪浅。 此时，您可能会遇到一种叫做 jQuery 的东西。

但是冒着疏远社区中某些开发人员的风险，我建议您只有在有大量时间的情况下才学习它。 jQuery（一个使 DOM 操作更容易的库）曾经统治着 JavaScript 世界。 但是，现在它在新项目中的使用率并不高，对于您的时间来说可能没有那么多的附加值。

现在，无论您将来做什么，第 1 阶段都将相同。 如果你走到这一步，你应该为成功而拍拍自己的背，并反省你是否想继续。

第二阶段

学习 git 基础

现在，虽然这不是学习 JavaScript 的强制性要求，但这将帮助您向其他开发人员和 GitHub 等网站上可用的社区学习。 您还可以将您的源代码放在 GitHub 上供所有人查看并围绕您自己的工作建立一个社区。

学习一个包管理器

任何严肃的现代 JavaScript 框架都至少需要了解一些包管理器。 包管理器只是管理应用程序将使用的各种依赖项的一种方式。 不幸的是，普通的 JavaScript 并没有很多库，但是由于开发人员发布了各种库和包，整个生态系统得到了极大的发展。 包管理器帮助我们利用所有这些代码，这样我们就不必编写已经存在的东西。

如果你只有时间学习一个，我会推荐 npm 或节点包管理器。 npm 是最大和使用最广泛的包管理器； 你可以在这里探索。

另一种选择是 Yarn——如果你了解一个包管理器，你就不会发现学习其他包管理器非常困难。

做出选择 - 学习哪一个 JavaScript 框架？

有很多，但为了便于讨论，我将列出三个主​​要的。没有特定的顺序，它们是 React、Angular 和 Vue。

React 是 Facebook 构建的 JavaScript 库。该库可用于创建交互式 UI。简单地基于数字，React 是当今开发人员中最受欢迎的，因为 React 非常容易学习。但是，如果您开始将 Redux 之类的高级东西混入其中，则很难掌握。

Angular 是一个 JavaScript 框架（或平台），可用于构建 Web 应用程序。如果将 Angular 与 React 进行比较，就可以说它是一只 1000 磅的大猩猩。对于新手来说，这可能会让人不知所措，但是一旦您通过了最初的学习曲线，您就会发现自己处于平流层中，感到头晕目眩。顺便说一下，Angular 是由 Google 构建和维护的，因此您可以判断其质量。

Vue 是另一个流行的框架，它显然试图在 React 和 Angular 之间找到中间线。除非您有一个只能通过 Vue 解决的非常具体的需求，否则我建议您使用 Angular 或 React。

话虽如此，我通常不喜欢支持一个框架而不是另一个。一名优秀的开发人员可以根据问题选择框架或工具集。 React 和 Angular 都可以做任何事情，但它们在某些事情上做得比其他事情好。例如，Angular 中的表单处理非常出色，对于在填写内容方面具有大量用户交互的企业应用程序来说非常有用。另一方面，如果你有一个非常动态的 DOM 并且想要基于用户交互进行大量操作，React 是非常棒的。

在我看来，我建议如果您有时间，您应该尝试同时学习两者。它会打开你的视野，让你成为更好的前端开发人员。

第三阶段

如果你已经达到了这一点，你就已经走得很远了。你应该为自己感到自豪。

然而，旅程并没有结束。

正如我们之前谈到的，现代 JavaScript 环境正在迅速发展。如果 Web 开发人员想保持相关性，他们也应该这样做。甚至框架也在迅速发展。谷歌每年发布两次具有新功能的新 Angular 版本。 React 生态系统正在迅速扩展。还有其他框架正在出现，谁知道其中一些是否会变得更加流行。

所以应该继续学习。您可以查看的一些内容是：

• 渐进式 Web 应用程序使 Web 应用程序像原生移动应用程序一样工作。
• 工具框架，如 Webpack 和 Babel。
• ES6、ES7 语法
• 各种测试框架，如 Jest、Karma 和 Mocha。
• 如果您对使用 JavaScript 构建移动应用程序感兴趣，您可以研究 React Native、Flutter 等。
• 使用 SPA 框架的服务器端渲染。

祝您学习愉快!