如何循序渐进、有效地学习JavaScript?

关注者
4093
被浏览
287186

我喜欢这个问题的问法,比问怎么”系统“学习的有意义多了。

如果让我现在重新学JS,我大概会这么学

  1. 首先我会把Chrome浏览器装好,在dev tools => console里直接练习熟悉基本语法,变量,数据类型,数学运算,字符串运算,条件,循环基本结构,简单函数定义和调用这些,之所以用chrome dev tools,是因为这时候我不想费劲折腾单独的编辑器,也不需要在开文件和文件夹,然后去配一些工具最终才接触到真正的JS编程,我想尽可能直接而少干扰就开始写JS,这是最重要的,我学JS,当然应该尽快写JS
  2. 熟悉了基本语法以后,我会在devtools => console 里编几个稍微有挑战点的小程序,比如实现fibonaci 数列这种简单的,比如打印一个99乘法表,你也可以自己给自己出几个题,或者网上随机找感兴趣的题目,别人写过没写过不是重点,重点是找点事情做,让自己写代码,别小看这些看起来无聊的程序,在你的熟练度达到可以开始第一个项目之前,这些没有的小程序是最适合练手的,因为它们不牵涉其他方面的知识(比如DOM),所以你不会受到过多干扰,只需要关注用正确的语法写出正确的程序,这个过程会让你更熟悉JS语言本身。
  3. 我觉得差不多的时候,就可以学习用JS来做web开发了,但是别急,这时候还没准备好新建一个项目,所以我还是会在devtools里,但是侧重是熟悉DOM,我会从简单的window.alert, window.prompt 开始,慢慢地去试验DOM的API如何使用,我会买一本DOM编程的书,放在案头,一章一章往下看,边看边试,慢慢地接触到DOM的常用操作,比如document.getElementById, document.getElementsByClassName, addEventListner, 等等,这些调用里有很重要的概念,比如什么是ID,什么是Class,什么是Event,它们有什么用,JS语言是如何通过API和它们交互的。我会选几个网站的页面,随便对页面的元素进行一些修改,比如用JS改变元素的字体,背景色,或者临时增加事件侦听等等。DOM API的行为产生的效果你能在网页上直接看出来,很直观,也比较有趣,比之前写纯JS程序这些更生动,能激发学习的好奇心,并且DOM是JS程序员的核心知识。
  4. 通常看完一本DOM编程的书以后,大概地了解了JS在web编程中的用处了。这时候我会给自己选一个项目,比如留言版这种,以HTML5 Boilerplate为模板,开始第一个web前端项目的开发。数据的存储可以直接存放在IndexDB里,所以这时候不需要关心后台操作。我会大概的考虑好要做什么功能,然后用之前学到的JS和DOM操作的知识,好好地实现这些功能。这个项目会花去我大量的时间,所以我告诉自己要保持耐心。碰到问题我就去用搜索引擎找答案,或者去书里找到相应的章节。
  5. 写完第一个项目以后,我会第一次觉得很有成就感,虽然项目很小,也不复杂。我会找一个老师帮我review一下,听听他的意见和建议,也可以准备一些问题,让他帮忙看接下去可以怎么迭代。这时候我会去学习git的基本操作,github的基本使用,然后把项目push上去,把需要的改动commit进git。
  6. 在这之前我写的都是原生JS,没有用到库,没有用到框架,这样的好处是我不需要过早地去纠结库和框架本身的概念,因为现在真正重要的是JS语言本身,其实我的编程领域比起最开始已经有了很大的拓展,你看我已经用JS,配合DOM,写出来一些很实际的功能,完成了一个前端项目。
  7. 这时候我的选择比较多,我可以:继续用原生JS完成一两个类似的项目,比如注册登陆,动态图片展示等等;也可以:尝试改进当前项目的程序设计,做一些代码的改进,这时候可以去看看JS模式这样的书,因为第一个项目的代码结构通常没有特别的程序设计,却章法,这样的书能告诉你更好的JS程序可以如何;我还可以乘势把手上的项目重构成基于jQuery的代码,这样就在对比中学会了jQuery的基础,理解了jQuery的好处;我甚至可以把当前项目代码重构成ES6语法,这样就能在对比中ES6语法的好处。
  8. 接下来我就会去写更复杂的项目,比如TODOLIST,自己从头到尾实现一个这样的应用,同样以原生JS(ES5)写第一个版本,然后选择是否重构到jQuery或者ES6,如果有兴趣,甚至是TypeScript。继续看JS程序设计方面的书,注意力应该是在程序“设计”,而不是语法细节,大多数时候语法的问题都是可以搜索到的。程序“设计”是分析应用的需求,什么功能,是否需要分模块,模块好不好分,不好分怎么渐进地找出架构的方案,什么样的模块化是比较自然的,如何处理错误,是否需要模板支持,复杂的用例是自己实现还是找第三方的库来集成,等等这些和实际开发零距离的问题。
  9. 这个项目我还是会放进github,写完以后我就找一个老师(免费付费都没关系),review一下我的实现,让他指出我理解错误的地方,这是宝贵的学习机会。和第一个项目一样,我还是会根据老师的反馈和自己的思考,决定是否继续迭代,以及如何继续改善。到这个时候,我也许会把市面上所有的Javascript的必读书都买来看,看第一书很慢,第二本书不快,但看到第四五本书的时候,就可以很快了,挑选其中自己不了解的章节专门阅读,然后把书里提到的知识,技巧,实践用到之前写过的项目中去。
  10. 我现在已经有了JS(ES5)比较全面的基础,也比较熟练了,至少碰到问题我大概知道方向是什么。我也接触了jQuery,甚至可能已经比较熟悉;ES6也是。我对语言的基本生态有了比较全面而深刻的映像。现在我想来学一个框架,我会去做一点功课,看看自己喜欢哪个框架,选定了以后,我就先做完官方的tutorial,同时清楚一些基本的概念问题。
  11. 然后我做的,就是把之前的项目(如TODOLIST),用框架重新写一遍,这时候我不会再有觉得很深涩的地方了,因为我有了JS的基础,已经有了一些自己找答案,debug的经验,哪怕框架本身有不清楚的地方,我都能自己通过搜索,或者研究,把答案找出来。哪怕找不出来,也至少有了基本的开发思维,虽然不知道答案,但也有大概的方向,如果我要问别人问题,也能问出更有回答价值的问题来,我已经走上了专业开发的路,不是因为我知道框架的这和那,而是我有了做开发的基本习惯和素养。
  12. 也许这时候我找到了第一份前端的工作,一段时间以后我发现自己对node后台开发和electron产生了兴趣,我阅读了基本的文档以后,发现其实并不需要怎么学习就可以用这些东西了。因为JS程序的架构,常见结构,模式,主要概念,我已经熟稔于胸,所以只要是在JS这个生态内,不管新出了什么技术,无论是库,框架还是模式,我都能在第一时间找到理解他们的路径,我已经学会了怎么学习,那些东西在JS程序里是重要的,概念是如何组合的,变迁的,所以对我来说,学JS和用JS已经没有什么区别了。
  13. 然后呢,通常真正循序渐进学过来,语言基础扎实的,到这时候已经不需要人来教了。

我认为有一些观念和操作是和循序渐进相悖的。

  1. 过早追求“系统”学习,好高骛远,眼高很容易手低,人的精力是有限的,要尊重学习规律,承认自己是普通人,告诫自己不要取巧,不要贪婪,慢慢来
  2. 觉得读源码是最“本质”的学习,结果是掉进细节的深坑不能自拔
  3. 过早埋头进“最新”技术,比如框架,在没有良好的语言基础之前学,事倍功半,”最新“技术和核心技术很多时候不是一回事,有了基础和核心,学新技术才是最有效率的,反过来却不成立
  4. 把编程学习等同于看书积累“知识”,但编程最终是一种技能,不动手什么也学不会,“知道”什么和“会”什么是两回事
  5. 具体的东西不学,却一开始就试图找到“最佳”学习路径,可能是最大的浪费了,有意义的目标是告诉自己明天干什么,而不是假设自己明天“应该”学会什么
  6. 过分堆砌学习资料,以为找到的资料越多,罗列越完整,自己学得越快越好,事实恰恰相反,越是罗列,噪声越大,心理压力和挫败感越强,越容易放弃,在一个阶段,一本书,配合少量网络资料足够了,”收藏“是一个不怎么好的习惯,学习的人应该追求知识的消化,而不是堆砌
  7. 想到了再补充吧 ...



精选书籍

jump.im/i6