如何循序渐进、有效地学习JavaScript？-技术圈

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

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

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

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

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

.....

拯救你的注意力：