如何循序漸進(jìn)、有效地學(xué)習(xí)JavaScript？

我喜歡這個(gè)問題的問法，比問怎么”系統(tǒng)“學(xué)習(xí)的有意義多了。

如果讓我現(xiàn)在重新學(xué)JS，我大概會(huì)這么學(xué)

1. 首先我會(huì)把Chrome瀏覽器裝好，在dev tools => console里直接練習(xí)熟悉基本語法，變量，數(shù)據(jù)類型，數(shù)學(xué)運(yùn)算，字符串運(yùn)算，條件，循環(huán)基本結(jié)構(gòu)，簡單函數(shù)定義和調(diào)用這些，之所以用chrome dev tools，是因?yàn)檫@時(shí)候我不想費(fèi)勁折騰單獨(dú)的編輯器，也不需要在開文件和文件夾，然后去配一些工具最終才接觸到真正的JS編程，我想盡可能直接而少干擾就開始寫JS，這是最重要的，我學(xué)JS，當(dāng)然應(yīng)該盡快寫JS
2. 熟悉了基本語法以后，我會(huì)在devtools => console 里編幾個(gè)稍微有挑戰(zhàn)點(diǎn)的小程序，比如實(shí)現(xiàn)fibonaci 數(shù)列這種簡單的，比如打印一個(gè)99乘法表，你也可以自己給自己出幾個(gè)題，或者網(wǎng)上隨機(jī)找感興趣的題目，別人寫過沒寫過不是重點(diǎn)，重點(diǎn)是找點(diǎn)事情做，讓自己寫代碼，別小看這些看起來無聊的程序，在你的熟練度達(dá)到可以開始第一個(gè)項(xiàng)目之前，這些沒有的小程序是最適合練手的，因?yàn)樗鼈儾粻可嫫渌矫娴闹R(shí)（比如DOM），所以你不會(huì)受到過多干擾，只需要關(guān)注用正確的語法寫出正確的程序，這個(gè)過程會(huì)讓你更熟悉JS語言本身。
3. 我覺得差不多的時(shí)候，就可以學(xué)習(xí)用JS來做web開發(fā)了，但是別急，這時(shí)候還沒準(zhǔn)備好新建一個(gè)項(xiàng)目，所以我還是會(huì)在devtools里，但是側(cè)重是熟悉DOM，我會(huì)從簡單的window.alert, window.prompt 開始，慢慢地去試驗(yàn)DOM的API如何使用，我會(huì)買一本DOM編程的書，放在案頭，一章一章往下看，邊看邊試，慢慢地接觸到DOM的常用操作，比如document.getElementById, document.getElementsByClassName, addEventListner, 等等，這些調(diào)用里有很重要的概念，比如什么是ID，什么是Class，什么是Event，它們有什么用，JS語言是如何通過API和它們交互的。我會(huì)選幾個(gè)網(wǎng)站的頁面，隨便對(duì)頁面的元素進(jìn)行一些修改，比如用JS改變?cè)氐淖煮w，背景色，或者臨時(shí)增加事件偵聽等等。DOM API的行為產(chǎn)生的效果你能在網(wǎng)頁上直接看出來，很直觀，也比較有趣，比之前寫純JS程序這些更生動(dòng)，能激發(fā)學(xué)習(xí)的好奇心，并且DOM是JS程序員的核心知識(shí)。
4. 通常看完一本DOM編程的書以后，大概地了解了JS在web編程中的用處了。這時(shí)候我會(huì)給自己選一個(gè)項(xiàng)目，比如留言版這種，以HTML5 Boilerplate為模板，開始第一個(gè)web前端項(xiàng)目的開發(fā)。數(shù)據(jù)的存儲(chǔ)可以直接存放在IndexDB里，所以這時(shí)候不需要關(guān)心后臺(tái)操作。我會(huì)大概的考慮好要做什么功能，然后用之前學(xué)到的JS和DOM操作的知識(shí)，好好地實(shí)現(xiàn)這些功能。這個(gè)項(xiàng)目會(huì)花去我大量的時(shí)間，所以我告訴自己要保持耐心。碰到問題我就去用搜索引擎找答案，或者去書里找到相應(yīng)的章節(jié)。
5. 寫完第一個(gè)項(xiàng)目以后，我會(huì)第一次覺得很有成就感，雖然項(xiàng)目很小，也不復(fù)雜。我會(huì)找一個(gè)老師幫我review一下，聽聽他的意見和建議，也可以準(zhǔn)備一些問題，讓他幫忙看接下去可以怎么迭代。這時(shí)候我會(huì)去學(xué)習(xí)git的基本操作，github的基本使用，然后把項(xiàng)目push上去，把需要的改動(dòng)commit進(jìn)git。
6. 在這之前我寫的都是原生JS，沒有用到庫，沒有用到框架，這樣的好處是我不需要過早地去糾結(jié)庫和框架本身的概念，因?yàn)楝F(xiàn)在真正重要的是JS語言本身，其實(shí)我的編程領(lǐng)域比起最開始已經(jīng)有了很大的拓展，你看我已經(jīng)用JS，配合DOM，寫出來一些很實(shí)際的功能，完成了一個(gè)前端項(xiàng)目。
7. 這時(shí)候我的選擇比較多，我可以：繼續(xù)用原生JS完成一兩個(gè)類似的項(xiàng)目，比如注冊(cè)登陸，動(dòng)態(tài)圖片展示等等；也可以：嘗試改進(jìn)當(dāng)前項(xiàng)目的程序設(shè)計(jì)，做一些代碼的改進(jìn)，這時(shí)候可以去看看JS模式這樣的書，因?yàn)榈谝粋€(gè)項(xiàng)目的代碼結(jié)構(gòu)通常沒有特別的程序設(shè)計(jì)，卻章法，這樣的書能告訴你更好的JS程序可以如何；我還可以乘勢(shì)把手上的項(xiàng)目重構(gòu)成基于jQuery的代碼，這樣就在對(duì)比中學(xué)會(huì)了jQuery的基礎(chǔ)，理解了jQuery的好處；我甚至可以把當(dāng)前項(xiàng)目代碼重構(gòu)成ES6語法，這樣就能在對(duì)比中ES6語法的好處。
8. 接下來我就會(huì)去寫更復(fù)雜的項(xiàng)目，比如TODOLIST，自己從頭到尾實(shí)現(xiàn)一個(gè)這樣的應(yīng)用，同樣以原生JS（ES5）寫第一個(gè)版本，然后選擇是否重構(gòu)到j(luò)Query或者ES6，如果有興趣，甚至是TypeScript。繼續(xù)看JS程序設(shè)計(jì)方面的書，注意力應(yīng)該是在程序“設(shè)計(jì)”，而不是語法細(xì)節(jié)，大多數(shù)時(shí)候語法的問題都是可以搜索到的。程序“設(shè)計(jì)”是分析應(yīng)用的需求，什么功能，是否需要分模塊，模塊好不好分，不好分怎么漸進(jìn)地找出架構(gòu)的方案，什么樣的模塊化是比較自然的，如何處理錯(cuò)誤，是否需要模板支持，復(fù)雜的用例是自己實(shí)現(xiàn)還是找第三方的庫來集成，等等這些和實(shí)際開發(fā)零距離的問題。
9. 這個(gè)項(xiàng)目我還是會(huì)放進(jìn)github，寫完以后我就找一個(gè)老師（免費(fèi)付費(fèi)都沒關(guān)系），review一下我的實(shí)現(xiàn)，讓他指出我理解錯(cuò)誤的地方，這是寶貴的學(xué)習(xí)機(jī)會(huì)。和第一個(gè)項(xiàng)目一樣，我還是會(huì)根據(jù)老師的反饋和自己的思考，決定是否繼續(xù)迭代，以及如何繼續(xù)改善。到這個(gè)時(shí)候，我也許會(huì)把市面上所有的Javascript的必讀書都買來看，看第一書很慢，第二本書不快，但看到第四五本書的時(shí)候，就可以很快了，挑選其中自己不了解的章節(jié)專門閱讀，然后把書里提到的知識(shí)，技巧，實(shí)踐用到之前寫過的項(xiàng)目中去。
10. 我現(xiàn)在已經(jīng)有了JS（ES5）比較全面的基礎(chǔ)，也比較熟練了，至少碰到問題我大概知道方向是什么。我也接觸了jQuery，甚至可能已經(jīng)比較熟悉；ES6也是。我對(duì)語言的基本生態(tài)有了比較全面而深刻的映像。現(xiàn)在我想來學(xué)一個(gè)框架，我會(huì)去做一點(diǎn)功課，看看自己喜歡哪個(gè)框架，選定了以后，我就先做完官方的tutorial，同時(shí)清楚一些基本的概念問題。
11. 然后我做的，就是把之前的項(xiàng)目（如TODOLIST），用框架重新寫一遍，這時(shí)候我不會(huì)再有覺得很深澀的地方了，因?yàn)槲矣辛薐S的基礎(chǔ)，已經(jīng)有了一些自己找答案，debug的經(jīng)驗(yàn)，哪怕框架本身有不清楚的地方，我都能自己通過搜索，或者研究，把答案找出來。哪怕找不出來，也至少有了基本的開發(fā)思維，雖然不知道答案，但也有大概的方向，如果我要問別人問題，也能問出更有回答價(jià)值的問題來，我已經(jīng)走上了專業(yè)開發(fā)的路，不是因?yàn)槲抑揽蚣艿倪@和那，而是我有了做開發(fā)的基本習(xí)慣和素養(yǎng)。
12. 也許這時(shí)候我找到了第一份前端的工作，一段時(shí)間以后我發(fā)現(xiàn)自己對(duì)node后臺(tái)開發(fā)和electron產(chǎn)生了興趣，我閱讀了基本的文檔以后，發(fā)現(xiàn)其實(shí)并不需要怎么學(xué)習(xí)就可以用這些東西了。因?yàn)镴S程序的架構(gòu)，常見結(jié)構(gòu)，模式，主要概念，我已經(jīng)熟稔于胸，所以只要是在JS這個(gè)生態(tài)內(nèi)，不管新出了什么技術(shù)，無論是庫，框架還是模式，我都能在第一時(shí)間找到理解他們的路徑，我已經(jīng)學(xué)會(huì)了怎么學(xué)習(xí)，那些東西在JS程序里是重要的，概念是如何組合的，變遷的，所以對(duì)我來說，學(xué)JS和用JS已經(jīng)沒有什么區(qū)別了。
13. 然后呢，通常真正循序漸進(jìn)學(xué)過來，語言基礎(chǔ)扎實(shí)的，到這時(shí)候已經(jīng)不需要人來教了。

我認(rèn)為有一些觀念和操作是和循序漸進(jìn)相悖的。

1. 過早追求“系統(tǒng)”學(xué)習(xí)，好高騖遠(yuǎn)，眼高很容易手低，人的精力是有限的，要尊重學(xué)習(xí)規(guī)律，承認(rèn)自己是普通人，告誡自己不要取巧，不要貪婪，慢慢來
2. 覺得讀源碼是最“本質(zhì)”的學(xué)習(xí)，結(jié)果是掉進(jìn)細(xì)節(jié)的深坑不能自拔
3. 過早埋頭進(jìn)“最新”技術(shù)，比如框架，在沒有良好的語言基礎(chǔ)之前學(xué)，事倍功半，”最新“技術(shù)和核心技術(shù)很多時(shí)候不是一回事，有了基礎(chǔ)和核心，學(xué)新技術(shù)才是最有效率的，反過來卻不成立
4. 把編程學(xué)習(xí)等同于看書積累“知識(shí)”，但編程最終是一種技能，不動(dòng)手什么也學(xué)不會(huì)，“知道”什么和“會(huì)”什么是兩回事
5. 具體的東西不學(xué)，卻一開始就試圖找到“最佳”學(xué)習(xí)路徑，可能是最大的浪費(fèi)了，有意義的目標(biāo)是告訴自己明天干什么，而不是假設(shè)自己明天“應(yīng)該”學(xué)會(huì)什么
6. 過分堆砌學(xué)習(xí)資料，以為找到的資料越多，羅列越完整，自己學(xué)得越快越好，事實(shí)恰恰相反，越是羅列，噪聲越大，心理壓力和挫敗感越強(qiáng)，越容易放棄，在一個(gè)階段，一本書，配合少量網(wǎng)絡(luò)資料足夠了，”收藏“是一個(gè)不怎么好的習(xí)慣，學(xué)習(xí)的人應(yīng)該追求知識(shí)的消化，而不是堆砌，Udemy上有優(yōu)質(zhì)JS前端課程。

.....

拯救你的注意力：