天天看点

在2016年如何学习JavaScript?

在2016年如何学习JavaScript?

作者:​​Vincent O​​

译者:相信有不少人已经读过​​在 2016 年学 JavaScript 是一种什么样的体验?​​这篇神文,那么假如你真的要在2016年开始学习JavaScript,你应该怎么办呢?

下面介绍的是我这一年来学习JavaScript的经历。我当初给自己定下的目标是通过学习能够找到一份以JS开发为主的工作。

首先我得承认我自己的经历并不像我接下来描述的这么一帆风顺,之所以这么写只是为了让你少走一些弯路。最近被好多人要求了分享成长经验,我才写下了这篇文章。(我现在是一名在 英国天空广播公司供职的JS开发者)

在我刚入门的时候要是能有一份指南为我指明相关的信息和资料就再好不过了。而最难的部分其实是徘徊在中等水平的时候。JS相关的高级和入门的资料都特别多,而中级的资料却很难找到,在文章里我会把我当时的解决办法介绍给大家。

在正文开始之前我还是要强调一下,我并不是什么大神,我自己也处于学习的阶段。在编程这个领域没有人是最棒的,假若你真的爱它,就应该保持不断地学习和进步。

1.

在开始学习JS之前,一定不要带着先入为主的观念,也不要打算沿用你在其他编程语言上习得的经验。

我自己并没有很丰富的编程经验。在这之前我很长一段时间都是只会用WordPress做网站的码农。所以我只了解一点点PHP/CSS/HTML5的知识。但有些打算学习JavaScript的同学可能经验比较丰富,他们总会试着把对其他编程语言的理解套用在JS上。而这么做就很难利用起JS真正强大擅长的地方。

2.

现在来开始学习点基础知识吧,我们采用交互式学习的方法。(当然如果你经验丰富也可以直接跳过,读读​​JavaScript语言精粹​​​,不过这对于刚刚上手的人来说确实不太友好)。我当时也尝试了一些在线的交互式课程:​​Codecademy​​

在2016年如何学习JavaScript?

在线交互式课程就是允许你在浏览器里打开一个代码编辑器,通过完成一个个的小任务来到达下一关。

你可以在这儿学到很多的基础知识,不过更重要的是你可以直接上手实践编写代码并运行查看结果。学习编程正是“纸上得来终觉浅,绝知此事要躬行”。(阅读书籍和教程当然是必不可少的,但真正想要掌握编程必须动手实践)

另外值得一提的是很多人向我推荐的​​Freecodecamp​​。这也是在线交互式学习的典范,并且它也有学习社区,对我的帮助很大。

3.

​​Kyle Simpson​​​ 撰写的《你不知道的JS》系列对学习了解JS的作用真的非常大。整套书你都可以在​​Github​​上免费看到。开源这套书让社区能够参与其中。目前为止已经有了102名贡献者,253个解决的issues,本书的内容质量也越来越有保障。

因为我经常会读它所以购买了本书的​​纸质版​​。也谨表我对Kyle的支持。

在2016年如何学习JavaScript?

你最好从​​Up & Going​​开始阅读这个系列。这本书最棒的一点就是里面提到的所有内容都会有详细的解释。而不是简单粗暴地告诉你该怎么写怎么做。每个主题都有非常深入的讲解。读完之后也能给你一种透彻掌握知识的自信。

整套书会介绍JS的变量/类型,对象,数组,函数,内置方法,强制多态,Truthy & Falsy(JS逻辑值)等等……

《你不知道的JS》也有更复杂的部分,让你深入理解JS的全部,尤其是“The Tough Parts”部分的内容。

4.

之后你可以再读读《你不知道的JS》中的​​作用域&闭包​​部分。

就像我之前强调过的,在读书的同时,上手实践也非常重要,作者也在书中给了许多实践的例子。

我当时使用了​​JsBin​​这个在线写代码的网站。网站界面分为HTML, CSS, JavaScript, Console and Output五个面板。我给出的链接可以只打开JS和控制台面板。

这样你就能直接在浏览器里编码并查看运行的结果。

在2016年如何学习JavaScript?

5.

现在你已经掌握了很多知识,也有了些实践经验。我当时自己试着开始参与到JavaScript的社区中。注册了​​Twitter​​​和​​Github​​.

我在Twitter上关注了一些比较有影响力的JS开发者,博客,新闻站点: ​​@getify​​​, ​​@BrendanEich​​​, ​​@holtbt​​​, ​​@jhusain​​​, ​​@andrestaltz​​​, ​​@drboolean​​​ 当然你要是愿意也可以关注我 ​​@cmdv​​

Github是阅览代码示例、拥有无数天才创造的工具/框架/类库的绝佳所在。你同样也可以在上面分享你的项目或与他人合作。不管你是用什么什么语言,开源对整个编程圈都意义非凡。有些人可能不这么想,但我十分乐意分享我的知识,与他人合作做出一些贡献。

6.

到了这里我大概就达到了我在文章开头提到的中级阶段了。我有一种已经掌握了基础但就此止步不前的感觉。

这也正是各式各样的框架层出不穷的时候,各种炒作,说他们的框架有多好用多强大。那个时候Angular看起来很不错,也有很强大的社区支持。通过运用这些框架我也真的能开发出来点东西了,我当时也尝试过​​Ampersand.js​​(Ampersand.js是一个所谓去框架化的框架,其实就是把框架的各个功能拆分成独立模块,在使用的时候你可以只载入自己需要的部分)

选择学习框架是我对生命的严重浪费。并不是说这些框架烂,而是因为JS的框架日新月异,层出不穷,你很难选到对的那个。然后我才意识到,我的目标应该是学习理解这些框架背后到底是怎么运作的。据我所知,从长远来讲,学习掌握深入的原生JS要比你把所有精力都投入到框架里更有前途。

这段时间里我有很深的挫败感,变得焦躁不安,达不到我想要的目标。我开始看一些有关失败的心灵鸡汤。在你学习JS这种充满无限可能的语言时,你就要做好面对无数选择的准备。眼光放长远一些,一定不要放弃。(我知道这是说起来容易,做起来难)

7.

你需要记住这个阶段,现在你已经通过阅读《你不知道的JS》掌握了一些技巧,也有了一些实践经验。接下来学什么呢?我自己当时开始看一些视频教程。

《你不知道的JS》的作者Kyle Simpson同样也在​​Frontendmasters.com​​​上提供了很多JS相关的教程。尤其推荐​​Advanced JavaScript​​​,你也可以在Pluralsight找到​​这个教程​​。

在2016年如何学习JavaScript?

当然你也可以找到一些免费的学习资料,比如继续阅读《你不知道的JS》系列,但是看一个人对你讲授并带你过一遍代码对消化知识确实很有帮助。Frontendmasters的视频教程比较棒的一点是它鼓励你在观看同时也自己动手写一些代码。要是中途遇到困难也可以倒回反复观看。

你需要明确的一点是那些有丰富经验和知识的人教授这些课程制作视频都需要相当的付出。为这些知识和劳动付费也是理所应当的。

​​Advanced JavaScript​​​这一套视频教程涵盖了《你不知道的JS》之前提到的两本以及​​This & Object Prototypes​​​的内容。看视频的同时你也可以翻翻书。This & Object Prototypes这本书提供的内容非常实用。例如对象连接模式OLOO(objects linking to other objects).这就是我之前提到的JS所独有的特性,而不是像其他语言中使用Class。当然,这里也有一篇关于​​ES6 Class​​的介绍。不过要知道人们对Class的应用也一直争论不休,这并不是唯一的方法,全看个人选择。

8.

Eric Elliott 在Github有一个很棒的收集列表​​Essential JavaScript Links​​.我推荐你去看看,因为里面收集的内容确实非常棒。这里面同样包括新闻站点、Twitter、视频等内容,我从这里面摘出了一些符合你现阶段所需了解的内容:

  • ​​The Two Pillars of JavaScript Part 1: Prototypal OO​​
  • ​​The Two Pillars of JavaScript Part 2: Functional Programming​​

现在我们开始结合在线视频学习了解更深入的内容,这也正是我度过中级阶段的方法。

​​Eric Elliott​​总是提供相当多非常棒的内容,包括原创和分享他人的。(译者之前也翻译过Eric Elliott的文章)

这个阶段的我对函数式编程特别感兴趣,而事实上我都没意识到自己当时学的就是函数式编程。函数式编程听起来可能有些太深奥了,可随着你的深入了解,你会发现它其实是非常实用的。不过你要是真的不感兴趣,也有别的学习方向可以选择。

来自Jafar Husain在​​http://egghead.io​​​上的教程​​Asynchronous Programming: The End of The Loop​​是对函数式编程更底层的一个介绍。不过首先还是让我们了解些别的内容再回来深入这个主题吧。

9.

也许你还不了解,或者你可能多少注意到了。大多数的JS类库、插件、框架都在一个叫做NPM的包管理软件上(译者:是是是,我知道最近有一个叫​​Yarn​​的包管理器火了,不过还是不展开讲以免混淆视听),这就好像Ruby有Gems,PHP有Composer一样。想要使用NPM你必须先安装一个叫做NodeJS的东西:

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。Node.js 的包管理器 npm,是全球最大的开源库生态系统。——Node.js中文网

通过Node你可以在服务器端运行JS,这又给了JS无限的可能。

如果你想进一步了解Node,这里有两个不错的付费教程: ​​Plurasight​​​ + ​​Frontendmasters​​.

  • ​​Node.js 教程​​
  • ​​NodeSchool​​

10.

这个阶段你应该已经可以很熟练的运用原生JS开发应用了。我之前确实说过我刻意避开了框架,但并不代表框架不是一种好的东西。所以我开始试着了解有关框架的知识。

我随后了解到​​React​​成为了最火的框架,它并不是一个功能全面的框架,只是解决了应用视图的部分。

在2016年如何学习JavaScript?

它提供了很多有价值的解决方案,例如模块化组件如何处理状态(大概讲就是用一个全局的state通过props传入应用)。你并不局限于只用React,你可以用任何方式处理你的数据层、后端、API……

同样的你也可以通过一些很棒的视频教程来学习React:

最开始我在​​ReactWeek​​​参加了一个为期5天的课程。但其间遇到了很多问题和困难。Ryan在​​FrontendMasters​​提供了一个更简明的教程。

  • ​​React 入门实例教程​​
  • ​​React 教程​​

11.

现在开始你可以选择继续巩固或者学习新的知识了。我本人对函数式编程比较感兴趣,所以学习了一个由​​Matt Podwysocki​​​开发叫做​​RxJS​​的Reactive编程的解决方案。

我之前也参加了一个​​Rx.js的教程​​​,另外在​​Egghead.io​​上也有许多RxJS的相关教程。

同样你也可以在​​gitter​​上参与RxJS的讨论,直接用Github账号登录就可以。

  • ​​使用 RxJS 实现 JavaScript 的 Reactive 编程​​
  • ​​RxJs 介绍​​
  • ​​RxJS入门​​

12.

这篇文章到这里差不多就要结束了。因为在这个阶段你已经可以自由选择自己想要发展的方向了。

在这里推荐一本非常棒的讲解函数式编程的书​​Mostly Adequate Guide​​​,作者是​​Brian Lonsdorf​​​,他同样​​在这里​​提供了相关的教程。

在2016年如何学习JavaScript?

函数式编程是一个非常有趣的主题,我想我肯定要在这个上面花费相当一段时间,而且可能永远都学不完。

André Staltz 创建了一个很有趣的叫做​​Cycle.js​​的项目,它结合了函数式编程和RxJS。虽然我对它的了解还不深,但假如你喜欢React的话,学习它也是相当不错的一个选择。

继续阅读