在现代 JavaScript 巨大的生态系统中遨游可谓是一项十分艰巨的任务。且不提众多能在你的机器或服务器上运行起来的 Node.js 模块，如今大堆的前端框架、各种模块打包工具以及成千上万的工具库早已令人眼花缭乱。如何才能确定我要从哪里开始学起？以及把时间花费在哪些主题上才能避免做无用功？
就我个人而言，学过但是最终却从未用过的知识不可胜数，但是又有一些东西是我想要投入更多时间在上面的。我想用我 7 年职业生涯中得来的深刻教训，来建议大家应该如何学习 JavaScript。
1. 拥抱 JavaScript 异步编程
纵观 JavaScript 发展史(也可以说成 web 开发的发展史)，你会发现异步 JavaScript 彻底改变了这场游戏。网站从原来的仅仅在客户端做静态页面展示发展到现在运行在你浏览器中的完整应用程序。毫不夸张的说，浏览器发起 HTTP 请求，在不用刷新整个页面的情况下等待服务器的响应这一行为改变了整个万维网。
可以这么说，异步编程已成为 web 开发的根基。这也是你应尽早在 JavaScript 上投入大量时间的一处核心知识点，这其中包含 callbacks、promises、async/await和 fetch 等重要概念。
2. 掌握 TypeScript 基础
关于要不要把这条建议写出来，我纠结了差不多有一个小时！因为这是一篇有关如何学习 JavaScript 的博文，而 TypeScript 并不是 JavaScript，它是 JavaScript 的一个超集，在使用之前还需要一个 build 的步骤，然而我对 TypeScript 的强烈信仰让我下决心必须要把它写在这儿。
这条建议准确的来说更像是一个最佳编程实践。JavaScript 是一种松散的、动态的编程语言。在没有类型约束和不可变性原则的情况下，你在传递变量和数据对象时很容易写出具有副作用的脆弱的代码。TypeScript 通过增加强类型特性和创建只读属性的能力(还有很多其他好用的特性)来减少这一问题的发生。
记住上面说到的，我建议你尽快掌握 TypeScript 基础，我说的「基础」是指：如何为你的变量添加类型注解(type annotations)、类属性、函数参数、函数返回值。TypeScript 的强大绝不仅仅是学这点儿就够了，但是这第一步能防止你经常绊自己的脚。每当 TypeScript 编译器捕获到我的某个起初没注意到的错误都会令我为之着迷。
是的，编译器会经常找你的茬。这是可以接受的，它是你的朋友，想让你成为更棒的程序员。花点时间去思考一下 TypeScript 给出的错误信息，我保证你的代码质量能得到显著提升。
3. 理解 JavaScript 框架存在的意义
JavaScript 框架从我 2012 年末进入 web 开发这行就一直存在了。回到那时候，AngularJS 还处于霸主地位，Backbone.js 在业界的地位也很高，Ember 是当时的后起之秀。有趣的是，尽管它们在当今已成为过去时(几乎被 React 和 Vue取代)，这些前端框架所解决的问题并没有太大区别。比如说：
- view 和controller的数据绑定。 这是最为重要的一点。各种前端框架保持 UI 视图与前端应用状态的同步仍是首要任务。无论这些框架的设计是基于 MVC、MVVM 还是仅仅设计视图层，它们都有自己绑定状态到视图层并保持同步的方式。
- 可复用的组件。 这也是 AngularJS 最突出的一项贡献。前端视图基于组件的组合，使用 JS 把模板编译成 HTML 同样是 React、Vue 等现代框架的核心理念，都是从 AngularJS 开始兴起的。如果没有现存的前端框架或者说你自己创建一个框架的话，创建动态的、可复用组件基本上不太可能，因为 web 组件的 API 十分有限，且不能处理数据绑定。
如果你仔细看看这些花里胡哨的扳手，螺丝刀和其他工具的本质，其螺母和螺栓都是相同的。你看到的是工具的变革和技术的发展，但是如果你理解了 web 开发的核心痛点(为啥这些工具位居榜首)，你就会站在一个更好的角度去理解和正确的使用任何现存的、未来的或者那些已成为历史的框架。
4. 同时学习两个相似的框架
就比如 React 和 Vue。
在重度使用某个框架时，我们很容易会把框架的语法和模式当成底层语言的一部分(在这里可以说成是 JavaScript 的一部分)。老话儿说的好：「手里有把锤子，看啥都像钉子」。意思就是说，如果你一直使用某个框架，你就会基于你使用的那个框架固化的去思考你的解决方案，这样框架就成了你的拐棍而不是前进的动力。
同时掌握或了解两个框架可以扭转你的这种思维方式，同时能给与你对该框架助你解决问题的更深层次的理解。这就像是学习一门外语能帮你更了解你的母语一样。你能看到两者的异同，去思考到底是什么样的语言结构产生了这样的差异。掌握两种框架的使用也能达到同样的效果。同一问题的两种解决方式有助于追溯到问题的根源。
5. 去揭秘构建过程
最后一条涉及学习原生 JS。不管你喜不喜欢这种方式，写现代 JavaScript 时可选的工具有太多工具和框架，而将它们紧密连接在一起的就是「构建过程」。
在我的职业生涯中，构建工具是变化最大的一个方向。而最大的收获在于性能的提高以及资源体积的减少。基于 Web 的公司和开源社区都在不断的尝试从构建过程中榨取每一个微小的进展，这也造就了日新月异的一系列工具和程序。
我不得不承认，理解 Webpack 这种工具着实花费了我很长时间。只需简单的设置一个配置项，运行一条命令，然后你就有了一个结构优化过、体积压缩过且适用于浏览器运行的代码文件。构建工具可以被视作黑魔法，因为所有的类似工具都在力争向零配置或极少配置方向努力。这对于初学者来说当然是个好事儿，可一旦你想要进行一些自定义配置的时候就会变的非常难。
理解这些工具为你做了什么是非常重要的一件事。试着去理解你的代码以怎样的顺序经历了怎样的改变。试着去理解你的模块是如何被打包的，由此你才能更好的优化它们。试着去理解每一个配置项，因为这对你的代码性能和文件体积有很大的影响。
