前言
從大三（三年前了吧）開始學(xué)的前端，市面上各類視頻，收費(fèi)，免費(fèi)，正版，盜版的都看過，平臺(tái)看極客學(xué)院，慕課網(wǎng)，騰訊課堂。后來出國了，就看 YouTube，Udemy 啥的?？戳诉@么多的學(xué)習(xí)視頻也有點(diǎn)心得，今天又是被困在美國的一天，就總結(jié)一下吧。
學(xué)習(xí)過程
很多人其實(shí)很想通過看視頻去學(xué)習(xí)某個(gè)技術(shù)，但是看完就跟沒看一樣。好像自己學(xué)了一點(diǎn)東西，但是用起來又不會(huì)用，打擊感很大。那我們不妨說一說比較良性的學(xué)習(xí)過程，因?yàn)槟愕弥滥銥槭裁匆磳W(xué)習(xí)視頻，到底看了視頻要學(xué)哪些東西。
我總結(jié)自己的學(xué)習(xí)過程是這樣的
- 看視頻學(xué)最基本的概念，如 API 使用，語法（if-else, for, while, class），IDE 怎么用，（npm, node，React...）是什么。
- 熟悉語法，將上面學(xué)到的東西用一用。比如用 Pyhon/Java/Go/Ruby 寫寫 leetcode。
- 跟別人的視頻做第一個(gè)項(xiàng)目。比如寫個(gè)小商城，小記賬應(yīng)用。
- 模仿市面上的項(xiàng)目，見一個(gè)抄一個(gè)。前面覺得自己學(xué)得不錯(cuò)的可以抄網(wǎng)站，比如抄個(gè)知乎，抄個(gè)簡書，再不行抄個(gè)學(xué)校網(wǎng)頁總行吧。覺得還有很多不了解的，就抄組件，如登錄表單，表單驗(yàn)證，按鈕等。
- 深入技術(shù)，思考，總結(jié)。比如為什么要有XX，XX怎么來的，為什么用 XX不用YY。
- 創(chuàng)新，解決生活問題，寫輪子。
- 縱向/橫向發(fā)展，比如軟件工程，每個(gè)步驟了解一下。
- 自我感覺我還沒到這個(gè)層次。。。
呼，7個(gè)學(xué)習(xí)層次總算寫完了，是不是感覺很多？很難呢？沒錯(cuò)，學(xué)習(xí)就是這么的難。不要那么多浮躁，總想一步登天。
從上面的學(xué)習(xí)過程，也可以看出看視頻只是在前期占比較重要的位置，在后期個(gè)人發(fā)展占的地位并不多。所以看視頻僅僅是為了讓你去快速了解某個(gè)事物，并不能讓你提升很多，關(guān)鍵還是在于自己多練習(xí)和創(chuàng)新。
學(xué)習(xí)平臺(tái)
在分層去討論前想先說說學(xué)習(xí)平臺(tái)。對(duì)比一個(gè)國內(nèi)和國外的兩個(gè)平臺(tái)。
視頻
- 國外：一般都是很入門的，比較喜歡拉長每個(gè)知識(shí)點(diǎn)，你看的時(shí)候總把你當(dāng)三歲小孩，但是體驗(yàn)很好，聲音，視頻質(zhì)量都是很好的。
- 國內(nèi)：參差不齊，體驗(yàn)一般，看到還用 windows xp 系統(tǒng)講課的都吐了，命令行還是白底黑字的都是垃圾。但是畢竟說國語，至少讓你注意力比較集中，還有一個(gè)好處是，如果遇到比較操蛋，喜歡說騷話的老師，你的學(xué)習(xí)效率會(huì)直線上升，嘿嘿嘿。
博客
- StackOverflow: 一般查 problem
- Medium: 一般學(xué)一些基礎(chǔ)用法和概念
- 掘金: 小白東西比較多，但是闡述的概念會(huì)很全
- 簡書，知乎：解決問題為主，主要為了好看
- 博客園：垃圾
總結(jié)一下，兩邊的平臺(tái)都是有好資源的，不過國外的普遍好一點(diǎn)，國內(nèi)要是好的話就特別好。所以為什么中國工程師一定比國外牛逼呢？就是因?yàn)槲覀冇袃蓚€(gè)學(xué)習(xí)平臺(tái)呀。
下面就分層去討論吧。
1. 基本概念
這里可以看一些很基礎(chǔ)入門的視頻，標(biāo)題如《三天學(xué)會(huì) XXX》，《零基礎(chǔ)學(xué)XXX》，《XXX Tutorial》，《XXXX Beginner》。
關(guān)于這類視頻不要太要求質(zhì)量，因?yàn)橹v得都是很基礎(chǔ)的，學(xué)完不會(huì)的可以回家種田了?？赐昴阒恍枰?/strong>
1. 知道 XXXX 是什么
2. XXX 有哪些語法
3. 如果他有小實(shí)例那更好，你就是打字員，跟著敲就行了，別問那么多為什么，因?yàn)槟氵€是個(gè)菜鳥，問了你也不懂。不信可以從“如何學(xué)習(xí)前端”這個(gè)問題DFS下去，看看你能搜出多少名詞？
4. 視頻最好要短，短到一天我就了解了所有東西，因?yàn)槟愕臅r(shí)間應(yīng)該放在后面的項(xiàng)目上，而不是這些概念
這里可以稍微記一下筆記，但是不要寫得特別全，以截圖，代碼和一兩句話為主。我附一些我在這個(gè)階段學(xué)一些東西的筆記。
別總想記成高考那樣的筆記，密密麻麻的，沒啥用，筆記的目的是為了讓自己一看就知道那時(shí)發(fā)生了什么，不了會(huì)了供起來的。后面有的是時(shí)間讓你寫密密麻麻的博客。
2. 使用基本概念
這個(gè)階段可以和上面結(jié)合，一般視頻介紹基本概念也會(huì)讓你寫點(diǎn)簡單的 hello world 代碼。一般是夠用的。
如果你覺得不夠的話可以用新學(xué)的編程語言 去寫寫 leetcode，就寫最最最簡單的，比如這種
多寫幾次，基本語法啥的就會(huì)了，別去記，因?yàn)槟阌洸蛔 ?/strong>
3. 項(xiàng)目視頻
可能這個(gè)階段是最多人比較困惑的點(diǎn)，當(dāng)然我也曾經(jīng)這里的一員。處在這個(gè)階段，感覺自己懂了一點(diǎn)，就想秒天秒地秒宇宙了，覺得只要我看個(gè)項(xiàng)目視頻我就可以搞個(gè)類似的。要不是就是想看完這個(gè)視頻我就有東西寫在簡歷上了。所以在這個(gè)階段的人會(huì)去找一些大而全的視頻，比如《XXX商城》，《寫個(gè)Facebook》，《XXX+YYY+ZZZ+AA+BB 完成新浪》。
不要去選這種做大而全，復(fù)雜的項(xiàng)目視頻，下面是我的觀點(diǎn)：
- 那些你看起來的復(fù)雜項(xiàng)目，并不復(fù)雜，而是很無聊的項(xiàng)目。為什么？你想想復(fù)雜的定義是什么。那不就一個(gè)頁面寫成一千個(gè)頁面，一個(gè)組件寫一千個(gè)組件唄。那還不如寫好一個(gè)頁面，一個(gè)組件，慢慢 follow up。
- 上面已經(jīng)說了寫一個(gè)千個(gè)頁面其實(shí)很無聊，所以我敢保證你看完寫第二個(gè)頁面的時(shí)候，你就沒有看下去的欲望了。你會(huì)覺得不就是增，刪，改，查么。
- 就算你真的寫完整個(gè)項(xiàng)目，你會(huì)更迷茫：寫了個(gè)復(fù)雜的商城，別人讓你再寫一個(gè)感覺很虛。這里最大的問題就是你并不清楚學(xué)習(xí)重點(diǎn)是什么。JS的 class，async/await，原型鏈，React 的受控和非受控，redux 原理，你會(huì)了多少呢？
說了那么多，哪種項(xiàng)目比較適合你的第一個(gè)項(xiàng)目呢？我比較推薦 Todo App/記賬App。你可能會(huì)覺得驚訝，就這？？？？下面是我的觀點(diǎn)：
- 頁面不多，想都想得到：查看 todo 頁面，登錄，個(gè)人頁
- 資源不多，只有 todo，就是對(duì)基增，刪，改，查
- 有著大項(xiàng)目的特點(diǎn)：登錄，資源管理。你覺得簡單，那你下個(gè) split-wise，自己實(shí)現(xiàn)一下
- 可拓展：
4.1 登錄：JWT？refresh token？權(quán)限管理？郵箱注冊(cè)？密碼加密？OAuth？reCaptcha？驗(yàn)證碼？你都想到了多少？
4.2 資源：可參考 App Store 上的 App，添加分組, 圖片，圖表，notification, tag。資源的關(guān)系，單單統(tǒng)計(jì)這塊的 sql 就夠你想的了，想好了再做個(gè)可視化唄。
4.3 樣式：再參考 App Store 上的 App，做個(gè)一模一樣的。做完再做個(gè)響應(yīng)式的，mobile 和 PC 都適用的樣式，PWA 了解一下？
4.3 縱向：Sketch 設(shè)計(jì)？Figma？Webpack打包？Jest 單元測試？Cypress 集成測試？Travis CI？Coverallas？HTTPS？AWS部署？MySQL？Mock Server？Logger？SSR？你又想到了多少呢？
4.4 橫向：如果上面你都挑戰(zhàn)成功，那么試試 TODO MVC 吧：http://todomvc.com/，Vue，React，Angular 都實(shí)現(xiàn)一下？ - 省時(shí)間：有更多的時(shí)候去思考，比如，為什么要 Redux，Redux 到底怎么來的，為什么要前端去實(shí)現(xiàn) Router，后端實(shí)現(xiàn) Router 不行么？LocalStorage 和 cookie 存用戶信息？MySQL 要怎么設(shè)計(jì)？思考好了，寫篇博客吧。如果你寫商城，我相信你是只會(huì)疲于追趕課程的進(jìn)度，真的只是做個(gè)打字員，沒時(shí)間去思考，總結(jié)，寫博客。
當(dāng)然這個(gè)階段的目的是為了讓你起步第一個(gè)項(xiàng)目，而不是去完成我上面說的。這里只想說一個(gè)簡單項(xiàng)目已經(jīng)夠用了，盡量去減法。所以一個(gè) Todo App/記賬 App 絕對(duì)是夠你用已有的基礎(chǔ)去起步你的第一個(gè)項(xiàng)目的。
另一個(gè)目的是起步你的第一篇博客，當(dāng)你寫完一個(gè) todo list 相信是有很多體會(huì)的，此時(shí)可以寫一些很爛的博客，比如 JS class 怎么用，JS 閉包是什么。你別覺得自己不行，或者看不起這些很爛的博客，博客只有寫多了才會(huì)深入淺出，這個(gè)階段你還沒深入，所以只能淺入淺出。
這算是我第一個(gè)比較“成功”的項(xiàng)目了https://yanhaixiang.com/yan-xuan/#/home/recommend，樣式還可以，但是可以看出有特別多的問題，代碼寫的也很亂，沒有后端，只有前端的 Mock Data。
這是我很久之前寫的一篇博客http://m.itdecent.cn/p/e0941d5cc7ac，就是那么的小白，圖片，思路也不那么好。
4. 抄
這個(gè)階段就一個(gè)字——抄。抄知乎，抄簡書，抄 github。反正你看到什么就抄什么。抄到吐為止。我以前抄過簡書，有譜么，和嚴(yán)選。
有譜么：
https://haixiang6123.github.io/guitar-editor/#/
嚴(yán)選：
https://yanhaixiang.com/yan-xuan/#/home/recommend
簡書項(xiàng)目好像被我刪了。。。
如果抄不了網(wǎng)站就抄小組件，像這些
如果想練 Node.js，那么用 JS 去實(shí)現(xiàn) cp, ls, mv 這些命令吧。當(dāng)然我也寫了一個(gè)這樣的 repo，只是后面又被我刪了。。。不過我特別喜歡命令行工具，所以也有這個(gè)項(xiàng)目https://github.com/Haixiang6123/awesome-cli。
如果覺得自己很彳亍，那么打開 https://dribbble.com/，上面的設(shè)計(jì)都挺好看，也很炫，抄吧。
5. 總結(jié)你的知識(shí)
抄了那么多網(wǎng)站，也會(huì)學(xué)到很多小 tricks，如7種居中方法，如何拖拽組件，css 的定位等等。這個(gè)時(shí)候我覺得最好可以看一些比較宏觀，或者專精某個(gè)技術(shù)的視頻，如《XXX新特性》，《XXX最佳實(shí)踐》，《XXX發(fā)展史》。
此時(shí)你還會(huì)接觸到很多相似的工具或解決方案，如 Glup vs Grunt vs Webpack vs Parcel，Vue vs React vs Angular，this.$refs vs document.getElementById vs document.querySelector，text-align vs flex等等，所以，你還應(yīng)該要去對(duì)比這些東西，從根本去理解這些所謂的“技術(shù)”，“術(shù)語”。
這方面博客是比較多的，這里比較推薦 掘金 上面的博客比較小白，但是講某個(gè)技術(shù)是比較全的。英文的可以看 Medium。
YouTube 可以搜 《why XXX》，《XXX vs YYY》等。其實(shí)此時(shí)視頻對(duì)你來說幫助并不大，因?yàn)楹苌僖曨l會(huì)講很深入的。。。一般視頻還是偏向給小白看的。
當(dāng)然看視頻，博客只是學(xué)習(xí)手段，只有寫博客才能讓自己真正去掌握一門知識(shí)，所以，這時(shí)候就是你寫密密麻麻“筆記”的時(shí)候了，請(qǐng)開始你的表演。
6. 創(chuàng)新
曾經(jīng)很多人問我要去哪里找好項(xiàng)目做，我說去解決生活的問題呀，這就是創(chuàng)新。這里創(chuàng)新并不讓你搞一些“新”東西來，而是用代碼去解決生活上的問題，當(dāng)然新東西是錦上添花。
做創(chuàng)新項(xiàng)目的目的應(yīng)該是這樣，如果你的實(shí)力有 60 分就去做 70 分的創(chuàng)新項(xiàng)目，而做完這個(gè)創(chuàng)新的項(xiàng)目，你的學(xué)習(xí)能力應(yīng)該是達(dá)到 80 分的。。比如你學(xué)了爬蟲，那就爬一下學(xué)校的課表；學(xué)了 CSS 就用 CSS 畫個(gè)皮卡丘。不要總想著我學(xué)了 JS，直接寫刷票軟件，這是個(gè)好的創(chuàng)新，但是與你實(shí)力不符。
但是看到這里的你也知道創(chuàng)新這一步是多么的靠后，創(chuàng)新不僅僅需要技術(shù)的積累，也需要你對(duì)技術(shù)的熟練，熟練到一想到需求就有個(gè)大概框架的程度。實(shí)現(xiàn)項(xiàng)目不過是找資源和花時(shí)間去寫代碼。
當(dāng)然，在生活中也要多用編程的思維去想問題，不要覺得很 nerd，我覺得這是一件很 cool 的事。如果別人覺得很 nerd，那就問他只會(huì)寫 leetcode 除了面試有什么用。只要你用這種思路去想的話，遍地都是可以寫的項(xiàng)目。比如知乎這么多廣告，怎么一鍵去廣告？一畝三分地每次都登錄，怎么自己起服務(wù)器去自動(dòng)簽到？學(xué)校的課程這么亂，能不能自己實(shí)現(xiàn)一個(gè)國外版的超級(jí)課程表？
你看，這些都是你每天遇到的問題，但是你選擇了吐槽，而不是去解決它。
7. 縱向/橫向發(fā)展
縱向發(fā)展的話就是將你的小項(xiàng)目做大，比如個(gè)人網(wǎng)站，你的第一個(gè)項(xiàng)目，完完全全去跟著軟件工程（需求 -> 設(shè)計(jì) -> 代碼 -> 測試 -> 部署/發(fā)布）這一套搞下來。會(huì)再次發(fā)現(xiàn)自己的渺小，東西多得學(xué)不完。
當(dāng)然這里并不是先學(xué)再用，而是先用再學(xué)。要做的就是實(shí)現(xiàn)，不要管最佳實(shí)踐。如果非要去學(xué)的話，上面每個(gè)步驟可以再次參照我的 7 步學(xué)習(xí)思路，從第一步入門即可。
橫向發(fā)展暫時(shí)我還沒有時(shí)間開始，所以這里就不說了。
8. 未知
等你們?cè)谠u(píng)論里說吧。。。
最后總結(jié)
可以看到真正去學(xué)習(xí)一門技術(shù)是多么的費(fèi)時(shí)間和費(fèi)精力，絕對(duì)不是網(wǎng)上的3天入門，或者看個(gè)視頻就可以速成的。一定是經(jīng)過：入門 -> （重復(fù) -> 總結(jié) ）X3 -> 創(chuàng)新 -> 擴(kuò)展。
所以，當(dāng)你覺得學(xué)不下去都是很正常的，我也經(jīng)常會(huì)放棄。放棄了 Go，放棄了 ruby on rails，放棄了 Flutter，放棄了 angular，放棄了 Django，放棄了 Spring。。。但是，我對(duì)于前端還是一如既往的熱愛，會(huì)在這方面去深耕，和分享。
Anyway，如果你喜歡前端并堅(jiān)持下去的話，我會(huì)在路上等你??
