JavaScript拥有广阔的生态系统，有各种各样的前端框架，少量的模块捆绑程序和数千个实用库，更不用说可以在你的计算机或服务器上运行的所有Node.js模块了。那么我们应该从哪里开始进行学习？又应该在哪些模块上花费更多的时间呢？

我一直都在学习前端的路上但有些东西我从未使用过。考虑到我7年职业生涯中的经验教训，以下是我对如何学习JavaScript的建议。

1.熟悉异步JavaScript。

如果查看JavaScript（或一般而言的Web开发）的历史，就会发现异步JavaScript完全改变了游戏。它允许网站从仅具有客户端操作的静态页面到浏览器中功能全面的应用程序。实际上，发出HTTP请求并等待响应而无需重新加载页面的能力改变了万维网。

可以肯定地说，异步编程是Web开发的核心宗旨。那是你应该在早期学习JavaScript上投入大量时间的地方，因为它封装了其他核心原则，例如回调，promise，异步/等待和获取。

请花一些时间按顺序阅读我在下面列出的资源。他会告诉你应该如何学习异步编程。

推荐资源：

1、Okta开发人员博客中的异步JavaScript的历史（及未来）链接：https://developer.okta.com/blog/2019/01/16/history-and-future-of-async-javascript2、你不知道的JavaScript中卷（第二章）3、你不知道的JavaScript中卷（第三章）4、scotch.io的Async / Await教程   链接：https://scotch.io/tutorials/asynchronous-javascript-using-async-await

2.了解TypeScript的基础。

我纠结了一个小时是否要包含此内容，因为这是一篇有关学习JavaScript的文章，而TypeScript不是JavaScript。它是它的超集，需要使用构建步骤。

该建议与JavaScript的关系比与最佳编码实践的关系少。JavaScript是一种松散类型的动态编程语言。当你传递没有类型协定和不可变性的变量和数据对象时，编写容错率会大大提高。 TypeScript通过添加强类型输入和创建只读属性的能力（在许多其他的事物中）来减轻这些问题。

考虑到这一点，我建议你尽快学习TypeScript的基础。“基础知识”的意思是：如何在变量，类属性，函数参数和函数返回值中添加类型注释。TypeScript功能非常强大，除了简单的类型注释之外，还有很多东西要学习。

推荐资源

1、阅读官方TypeScript文档2、TypeScript在线编辑器，可方便你联系。链接：https://repl.it/languages/typescript3、[Paywalled] TypeScript 4小时研讨会，作者：Mike North。 链接：https://frontendmasters.com/courses/typescript-v2/

3.了解为什么存在JavaScript框架。

自从我在2012年末第一次涉足Web开发以来，JavaScript框架就已经存在。那时，AngularJS占据了上风，Backbone.js拥有可观的市场份额，而Ember则是炙手可热的新兴市场。即使它们已经成为过去（主要由React和Vue代替），这些前端框架解决的问题也没有太大变化。例如：

• 数据绑定视图到控制器。这是最重要的。保持UI视图与前端应用程序状态同步是所有前端框架的主要原因。无论框架是完全MVC，MVVM还是仅仅是视图层，它们都可以将某种状态绑定到视图并使它们保持同步。
• 可重用组件。这是AngularJS做对的最大事情。前端视图的基于组件的组成，以及JS将模板编译为HTML的功能，是React和Vue等现代框架的核心，但自AngularJS以来一直存在。如果不使用现有框架或创建自己的框架，则根本无法创建动态，可重用的组件，因为Web组件的API非常有限且无法处理数据绑定。

如果你了解Web开发的核心痛点（首先存在这些工具的原因），那么你将处在一个更好的位置，可以理解和正确使用任何现在，将来或旧的框架。

推荐资源

1、现代JavaScript框架存在的最深层次原因。链接：https://medium.com/dailyjs/the-deepest-reason-why-modern-javascript-frameworks-exist-933b86ebc445

4.同时学习两个相似的框架。

基于我关于框架解决的基本问题没有改变的观点，我现在建议你同时学习两个前端框架。例如，Vue和React。

当大量使用一个框架时，很容易开始觉得该框架的语法和模式是基础语言的一部分（在我们的例子中为JavaScript）。俗话说，如果你只有锤子，那么一切都会看起来像钉子。那句话，翻译成程序设计，意味着如果你只使用一个框架，那么你将固有地开始考虑该框架的解决方案，它将成为你的拐杖而不是你的力量。

一次学习或了解两个框架可以颠覆这种想法，并让你更多地了解框架实际为你服务的内容。就像学习外语实际上可以使你的母语变得更好一样。你会看到两者之间的异同，并且你会思考什么语言结构导致了这些异同。知道两个JavaScript框架可以提供相似的观点。通过了解同一解决方案的两条路径，你可以更好地了解它们正在解决的根本问题。

5.揭开构建过程的神秘面纱。

构建工具是我整个职业中变化最大的领域，因为这是性能和资产规模最大的地方。基于Web的公司和开放源代码社区一直在努力挤压他们在构建过程中可能无法做出的每一个小改进，从而导致工具和过程的不断变化。

我不得不承认，花了我一段时间才了解Webpack之类的工具是如何工作的。你设置了一个简单的配置，运行了一个命令，突然你有了一个包含优化最小化和浏览器兼容代码的文件。构建工具看起来像是不可思议的工具，因为它们都努力做到零配置或很少配置。这对于开始使用它们非常有用，但是当您实际需要进行一些自定义配置时，这会使他们望而却步。

了解这些工具正在为你做什么是非常重要的。尝试了解你的代码将经历哪些转换以及转换的顺序。尝试了解如何捆绑模块，以便更好地对其进行优化。尝试学习每个配置选项，因为这对性能和文件大小影响最大。

推荐资源

1、Webpack来自Nothing。强烈推荐！深入探讨webpack解决的问题.链接：https://what-problem-does-it-solve.com/webpack/intro.html2、Grunt和Gulp.js：任务运行器工具可简化前端开发。链接：https://www.upwork.com/hire/front-end-developers/

这篇文章到这里就结束了，我希望能给你带来可观的价值。正如我在介绍中所说的那样，JavaScript生态系统令人生畏。我已经从事专业工作7年了，但我仍然经常觉得自己几乎没有刮过表面。因此，不要尝试一次全部使用-专注于这五件事，你会顺利进行的。