學前端，我如何一年內學到三年的知識

摘要： 這個大言不慚的標題源自我與我所認識的前端從業者的比較，也源自別人的評價。讀者也可以看我其它文章，評估我的專業能力。當然我不是在每個領域都能匹配別人三年的實踐經驗。我還有很多技術棧沒掌握，比如沒寫過小程式，沒用過 jQuery（這個也不想再學了，只是依然還有用人單位在要求）。也有很多坑沒踩過，比...

這個大言不慚的標題源自我與我所認識的前端從業者的比較，也源自別人的評價。讀者也可以看我其它文章，評估我的專業能力。當然我不是在每個領域都能匹配別人三年的實踐經驗。我還有很多技術棧沒掌握，比如沒寫過小程式，沒用過 jQuery（這個也不想再學了，只是依然還有用人單位在要求）。也有很多坑沒踩過，比如沒有做過瀏覽器相容（說實話也不太想相容 IE，浪費生命）。我想說的是我對 JS 這門語言以及 CS 這門學科掌握的深度，前端生態圈理解和熟悉的程度，以及知識遷移能力。

我不是想炫耀自己多牛，而是想幫助和我有相似背景的人。我在掘金髮了幾篇文章後，有幾個朋友在知道我零基礎學程式設計一年半就進步這麼快後，想知道我是怎麼學的。這篇文章就是對他們的詳細回答。

一，背景介紹

我本科學的是國際貿易，亂選的專業。畢業後做了半年外貿，實在不喜歡，然後去做英文編輯了。第二份工作也很無聊，就是寫英文軟文，發表在國外的行業期刊上，給公司做廣告。然後也做英文官網的內容。這是一個很沒創意的工作。每天在一堆不利資料裡找個別利好資料，包裝一下，忽悠人。最重要的是，這份職業裡我找不到持續精進的方向，做一年和做三年好像區別不大。

後來學前端也是誤打誤撞。因為我同時在做英文官網的內容和產品，會和前端打交道。當時公司的前端是學 UI 轉過來的，我觀察他的工作，以為就是 HTML 寫個頁面結構，然後 CSS 做個樣式，然後用 JS 做點效果就可以了。這個簡單啊，我也可以做。然後我就裸辭去學習前端開發了…… 後來發現我錯了，但是自己跳的坑，流著淚也要爬出來。接下來我經歷了人生中最難熬的一段時間，也經歷了人生中第一次大的轉變。

我從 2017 年年初開始高強度學習，去年十一假期之後開始我的第一份前端工作，到今天剛好工作一年時間。接下來我將我的學習路徑，學習方法，和學習資源整理分享出來，希望可以幫到更多人。

二，準備工作

學習不只是找到好的學習路徑，掌握好的學習方法就可以了的，要成為優秀的學習者，是要求很多素質和習慣的。我長期以來都是一個懶散的人，三分鐘熱度，自律很差。我相信大部分人都這樣。在意識到學習任務的艱鉅後，我想的是我不能再放棄了，我覺得我年輕試錯的階段已經過了，經不起再失敗了，於是我專門花了很長時間來調整自己的習慣和行為。這裡我分享一些對我幫助最大的資源：

1. 一本書

《習慣的力量》（ The Power of Habit ）。這本書讓我意識到自己的壞習慣是需要科學的方法來改變的，一味地自責和焦慮是沒用的。習慣的改變靠的不是主觀意志力，而是 cue （不知道怎麼翻譯，刺激物？）和日常流程（routine）來維持的，所以我把學習場所從家換到了星巴克。而 cue 分為情緒，時間，場所，上一個行為等，這些都需要自己去定位查詢。找到觸發你的壞習慣的 cue，改變它。另外，每天都要有計劃，計劃會觸發獎賞期待，讓你更不容易回到壞習慣。最重要的是，關鍵好習慣的養成，會讓你養成其它好習慣更容易。比如早起的習慣一旦養成，我又養成了早上學習最具挑戰知識的習慣。

2. 一門課程

Coursera 上有一門課叫 ofollow,noindex">Learning How To Learn , 目前是世界上參與人數最多的一門 MOOC 課程。這門課免費。講師 Dr. Barbara Oakley 是奧克蘭大學的工程學教授。她本來是學斯拉夫語言文學的，一直畏懼工科，數理學科成績也很差，直到快 30 歲時，她才決定挑戰自己去學工程學。聽她講學習過程是最有說服力的。另一位講師 Dr. Terrence Sejnowski 是頂尖的神經科學專家。他會從腦科學和神經科學的實證角度告訴你為什麼應該怎樣學。下面講下我對這門課程的一些理念的應用。

一，大腦的發散和集中工作模式

發散模式（diffuse mode）指的是注意力從工作物件處轉移開來，放松下來，讓靈感有機會出現。集中模式（focused mode）自然是指全部注意力放在工作物件上，高強度思考。學習時，我採用番茄工作法，每工作 25 分鐘休息 5 分鐘。然後每工作 2 到 3 個小時，出門散下步，或者在家時耍下壺鈴。這個習慣養成後，很多神奇的事情會發生。比如有一次我在寫 Rxjs 應用時，卡在一個地方，怎麼也想不出來解決方案，然後去洗了個澡，靈感就來了，換幾個操作符的組合就解決了。還有數不清有多少次在夢裡想出一個解決方案，起床就去試，結果真的行的通。

二，多運動

Dr. Terrence Sejnowski 講解了為什麼運動會促發大腦新的神經元的生長。高強度的腦力活動，你需要大腦保持最佳機能。我在開始學習之前就是個健身狂魔（見下圖），每週有至少四天要去健身房。找到工作前的學習期，我也保持著這個頻率鍛鍊。工作後，沒時間再去健身房了，我就買了個 Concept 2 划船機，早上在家鍛鍊。鍛鍊推薦 HIIT （高強度間歇訓練）方法，燃脂迅速，最短時間內達到鍛鍊效果。

硬拉訓練

三，刻意訓練

學生時代我經常忽略做題訓練，看懂了答案就以為自己掌握了。但其實懂答案和自己寫出來是兩回事。學習者很容易產生能力幻覺（Illusion of Competence），看懂了知識點，就以為自己掌握了。只有自己能獨立解釋清楚的，才算是自己掌握的。自己在網上找些小挑戰做（比如 100 days of code, 還有 JavaScript 30），多在 codewars 和 LeetCode 上刷題（我主要是在 codewars 上做題），可以鞏固剛學的知識。

四，間隔重複

一天花 6 個小時學一個主題，和用 6 天時間，一天花 1 小時來學習同一個主題相比，肯定是後者掌握的更好。當然重複不是簡單的重讀一遍。而是刻意回憶，測試自己還能不能想起來。大家可以試試 Studies 這個軟體，建立和管理知識卡片，方便複習。iOS 和 Mac 上都有。

還有很多，我就不全列了。強烈建議大家去學一遍課程，自己摸索出適合自己的方法。中文版在這裡

一個習慣

早起。每天早上 4 點準時起床。我知道這個聽起來挺瘋狂，但我堅持了一年半了。（也有例外，但最晚大多數時候不超過 5 點，極個別例外比如加班，也不會超過 6 點）。我以前的習慣是經常晚上玩手機到凌晨 2 點睡，還騙自己，以為自己是夜貓子型。轉變習慣用了一個月。下面是一些技巧。1. 吃補劑。我吃的是 Swiss Sleep，一種澳洲的草本保健品。我知道很多專家說保健品不靠譜，但我吃了這個真的睡的更香了，用 Sleep Cycle 監測到的深度睡眠增加了。2. 下午 2 點之後不喝咖啡，晚上 8 點之後不看電子螢幕。3. 睡前深呼吸，放慢呼吸頻率。四，我用 Yeelight 床頭燈，早上定時模擬日出。自然醒的感覺，不會像鬧鐘那樣討厭。早起後，早上至少有 3 個小時不會有人打擾你（我做的更極端，直接把微信解除安裝了，全天都沒人打擾）。而晚上睡的早，也不會漫無目的地玩手機聊天。從早上起床到中午 12 點，我可以完成 10 個番茄鬧鐘。中途還有充足的休息時間。

一個 APP

Headspace 是國外一個比較流行的冥想軟體。可能很多人對冥想的感覺就是太玄學，但它真的作用很大。對於我而言，主要是兩個作用，一個是集中注意力，另外一個是克服焦慮。一個人沒有其他幫助，學習一個全新的領域，也不知道能不能成功，壓力還是很大的。而這種壓力可能並不一定會轉化為動力，而是會積累著，成為拖累。冥想可以讓我暫時遠離這些擔憂，調整注意力。Headspace 的指導語速很慢，聽懂比較容易。

三，學習資源

前面的準備工作做好後，開始進入正題了。這部分我分享下對我幫助最大的一些學習資源。

1. Frontend Masters

正如Frontend Masters 這個網站名字所說明的，能在這裡講課的，都是大師級別。我挑幾門對我幫助最大的課程，並簡短說明如下：

1. The Good Parts of JavaScript and the Web

   老師是 Douglas Crockford，JS 教父級人物，《JavaScript 語言精髓》作者。這門課講了 JS 的歷史和一些重要的語言細節，並把重點放在函式上。Crockford 認為函式這是 JS 這門語言最重要的部分。後半部分講了瀏覽器和伺服器的工作原理，以及網路安全。

2. (1) Deep JavaScript Foundations (2) Rethinking Asynchronous JavaScript (3) Functional-Light JavaScript, v2 (4) ES6: The Right Parts (5) Organizing JavaScript Functionality (6) Coercion in JavaScript

   共 6 門課，老師都是 Kyle Simpson.《你不知道的 JS 》系列書作者，等下還會提到他。第一門課深入了 JS 的大部分重要細節，這是學好 JS 的第一步。其它幾門課分專題繼續深入，分別是非同步程式設計，ES6 的重要部分，組織 JS 功能模組（學了這個後，我從沒寫過麵條程式碼），輕量級函數語言程式設計（有配套書，個人覺得是 JS 開發必學），最後是 JS 中的強制型別轉換。

3. (1) Webpack 4 Fundamentals (2) Web Performance with Webpack (3) Webpack Plugins System

   共 3 門關於 Webpack 的課程，老師都是 Sean Larkin。微軟 Edge 團隊的 Technical Program Manager，Webpack 和 Angular 核心團隊成員，前不久剛來中國參加過前端圈的大會。這幾門課從基礎開始，一直到進階，呈現了 Webpack 的基本原理，操作技巧，以及外掛生態。

4. Hardcore Functional Programming in JavaScript

   老師是 Brian Lonsdorf，學函數語言程式設計的話，不知道他會多很多掙扎。等下還會提到他。課程從基本的函式組合開始，逐漸講到硬核函數語言程式設計（Functors, Applicatives 和 Monads 的應用等）

5. (1) Asynchronous Programming in JavaScript (with Rx.js Observables) (2) Advanced Asynchronous JavaScript

   共兩門課。老師是 Jafar Husain。Netflix UI 工程團隊 leader，響應式程式設計專家，TC39 成員。第一門課從零開始寫常用的 Rxjs 操作符，逐漸進階到 DOM 事件流處理，網路請求的處理等。第二門課是進階課，從零開始寫個 Observable，然後用 Observable 來解決一些棘手的動畫問題。最後會用課程知識寫個應用。

6. Advanced Vue.js Features from the Ground Up

   老師是尤雨溪，這位不用我介紹了吧。這門課裡面，尤雨溪會教你從零開始實現 Vue 的核心構成，如響應式系統，外掛，渲染函式，路由，狀態管理等。在我入職我目前所在公司的時候，我還沒寫過 Vue，入職後第一週學了這門課，然後帶著團隊重構 Vue 專案了。

還有很多優秀課程，全部列出來篇幅太大了。建議大家去探索尋寶。另外 Frontend Masters 是訂閱制，費用比較貴，按月付的話，接近 40 美元一個月，年付會便宜很多。黑五和開學季會有折扣。我是在開學季用折扣價訂了一年。

另外，Frontend Masters 每年都會出一個免費的前端學習手冊。今年的點選這裡。

2. Egghead

這個網站的風格是簡短精煉。每個視訊都很短，語速很快，適合有一定基礎，想用碎片時間充電的前端從業人員。很多庫的作者會在這裡講他們的作品，比如 Dan Abramov 會在這裡講 Redux，Michel Weststrate 會在這裡講 Mobx 和 Mobx State Tree 等，這些都是免費的。付費課程質量也大部分很高。你想學的某些主流技術，熱門的庫，大部分都在這裡找得到教程。比如 Ramda，它有 200 多個 API，而且與其它庫風格迥異，我是怎麼短時間內對這麼多 API 應用自如的？除了大量地訓練和擠地鐵時間檢視文件，還離不開 Egghead 上的實戰課程。這裡再挑幾門對我幫助最大的部分課程。剩下一些課程我會在本文後面再提。

1. (1) RxJS Beyond the Basics: Creating Observables from scratch (2) RxJS Subjects and Multicasting Operators (3) Save time avoiding common mistakes using RxJS (4)Use Higher Order Observables in RxJS Effectively

   全是 RxJS 的課程，老師是 André Staltz，我最崇拜的技術人之一，等下還會講到他。這些課程從 RxJS 的入門一直講到高階操作。這些課程和前面提到的 Jafar Husain 的課程會有重合，但我覺得從不同的老師那裡，從不同角度學習，可以掌握地更全。當然你不用每個主題都找兩個老師學……我只是發現我訂閱的兩個網站都有 RxJS 課程，所以全學了。

2. Automate Daily Development Tasks with Bash

   作為開發人員，你應該掌握一些自動化工作流，提升開發效率。這門課講了開發中常用的 Bash 操作技巧，不管是前端和後端，都適用。

3. Quickly Transform Data with Transducers

   我之前發表的消滅 for 迴圈的那篇文章，裡面用的 Transduce 寫法，就是在這門課裡學到的。

Egghead 還有很多高階 CSS 課程以及其它大前端的課程，比如單元測試，Serverless，等等。還有三門高階函數語言程式設計的課程，我放到後面部分講。

3. Udemy

Udemy 是個線上教育界的淘寶，什麼課程都有。你能在那裡學音樂，學繪畫，甚至還能學詠春拳…… 當然能學程式設計，而且有些熱門程式設計老師確實很厲害。Udemy 有個套路，標價 200 美元的課程，經常悄悄打折 9.9 美元賣。我所有課程都是最低價買的，前後一年半共買了 60 多門課，通常是在黑五聖誕等折扣季買，當然，Udemy 幾乎每個月都在促銷。我買的課程覆蓋前端後端，深度學習，區塊鏈開發等。我只把前端課程的 2 / 3 學了，其它的真學不動了，大多數屬於衝動消費……

我學習的課程部分截圖

這部分我就不詳細介紹課程了，只推薦三個老師。

一是 Stephen Grider，我買了他大部分課程。Stephen 擅長用很直觀的圖表來拆解工程概念，再難的東西他也能拆到用日常語言解釋。我一開始自學演算法時，感到很吃力。Stephen 的演算法課讓我通過 JS 掌握了基礎的計算機演算法。他還有 Node，React，MongoDB 以及 GraphQL 的課程，大部分涵蓋了入門和進階。

第二個是 Andrew Mead。他講課能力也很優秀，我第一次學 Node 是學的他的課程，收穫很大。另外他對學員的問題迴應非常及時和詳細。他的課程和 Stephen 的重複率挺高，不用兩個都買。

如果有興趣學 iOS 開發，強烈推薦 Angela Yu 的課。（我做了半年 React Native 開發，所以去學了原生開發。）Angela 講課幽默可愛，新人友好。她似乎是中國長大的，在英國學醫。本來是醫生，後來轉行做 iOS 開發和設計了。厲害的人生各有各的不同啊……

4.Wes Bos

Wes Bos 可能相當於北美阮一峰…… 當然這種類比是不恰當的。我的意思是，他的課程覆蓋了前端很廣領域，也廣受歡迎。如果你入門沒多久，可以學他的免費課程 JavaScript 30. 用一個月時間，每天用原生 JS 寫個網頁應用。Mozilla 還贊助他開了 CSS Grid 的課程，吸引開發者用 FireFox。你也可以免費學這門課。他還有付費的 Node 和 React 課程。最近他準備出一個高階 React 和 GraphQL 課程，我觀望中，可能會買。另外他還主持了一個播客節目叫 Syntax，主題是前端開發，我每期都會聽。擠地鐵時用兩倍語速聽，能吸收到很多新鮮知識。

5. YouTube

YouTube 是個很神奇的地方，每個知識和娛樂的領域都能在這裡找到精華。我在這裡列出幾個前端和泛程式設計的頻道。

1. Fun Fun Function

   主播名字太長了，粉絲都叫他 MPJ。MPJ 是瑞典人，之前一直在 Spotify 工作，最近辭職後全職做 Fun Fun Forum 論壇了。這個頻道覆蓋了很雜的 JS 和前端開發知識。我在這個頻道學到的都是在其它地方學過的，比如函數語言程式設計，設計模式等，但是在這裡學更像一種放鬆和實時看高手是怎樣寫程式碼和解決問題的。

2. Traversy Media

   主播非常勤奮，更新很頻繁。內容大多是初級和中級，非常適合新人學習。我現在偶爾也會看他新出的教程，用原生 JS 寫個動效，用 CSS 寫完成度 100% 的企業展示頁面等。

3. Coding Tech

   這個頻道會持續更新計算機行業最新的優質演講。前端和其它領域都有。

6. GitHub

GitHub 上參考別人的程式碼，能加快自己的理解。比如，Jason Miller（等下我還會介紹他） 的熱門 repo 我每個都會看。EventEmitter，狀態管理，非同步函式自動放到 web worker 的工具庫，Fetch API polyfill，等等聽起來挺複雜的東西，他五六行，十幾行程式碼就實現了，還發布到 NPM 成為完整的包。還有 You Don't Need jQuery, You Don't Need Lodash, 30 Seconds of Code 等 Repo，對提升原生 JS 解決問題的能力有非常大的幫助。碎片時間可以在手機上學習。

7. JavaScript Weekly

我覺得 JavaScript Weekly（免費 Newsletter） 是前端開發者必須訂閱的，但我發現好像身邊人都不知道。很少有人能不關心技術趨勢還能走在前面的。你應該關注同行最近又開發出了什麼酷的東西，你關注的技術又出了哪些新教程。不過，每天盯著技術熱點看也容易分心。一週關注一次，頻率剛剛好。

四，影響我的技術人

如果你瞭解過一萬小時天才理論，你可能知道一個好的 Mentor 在個人成長中的無法替代的作用。大多數人都沒有如此幸運，找到一個好的導師。我也是。對此我的一個並不完美的替代方案是關注行業裡的思考者和先行者，聽下他們的建議，瞭解他們是怎樣思考和工作的。下面是對我影響最大的技術人：

1. Kyle Simpson. 我的 JS 是他領入門的，也是他帶著走向進階的。我的整個學習路徑，都有他的影響。作為一個教育者，他會給學習者很多各方面的建議。我會關注他所有的演講和開源專案。Twitter: @getify

2. Eric Elliott. 我學函數語言程式設計是始於他。我比較幸運，一開始學程式設計的時候剛好碰到 Eric 開始在 Medium 上連載函數語言程式設計教程。我在學了三個月 JS 之後，就遇到了一個全新的程式設計正規化，並且被說服了。我推薦所有 JS 開發者都瞭解下這一系列文章Composing Software 你可以聽一個從 BASIC 時代就開始寫程式的前輩，是怎樣看待不同程式設計正規化的；瞭解為什麼組合比繼承更優，為什麼 JS 適合用來函數語言程式設計。Twitter: _ericelliott

3. André Staltz. 他是社群裡面的響應式程式設計專家。如果你想學響應式程式設計的話，一定要看他寫的這篇文章， The introduction to Reactive Programming you've been missing . 他還寫了一個函式響應式框架叫Cycle.js 除了技術，他最讓我佩服的還有他對技術與社會之間關係的思考。他對於目前 Facebook 和 Google 等網際網路巨頭控制使用者資料的現狀不滿，他的一個 mission 就是要創造去中心化的網際網路。（全球資訊網的創始人，Tim Berners-Lee 爵士，也在做這件事）他最近釋出了一款安卓手機應用叫 Manyverse，一個真正去中心化社交平臺。這款應用是用 React Native 寫的，開源。感興趣的話，你可以看下原始碼，看下他是怎麼組織程式碼的。Twitter: @andrestaltz

4. Sarah Drasner. Sarah 是個非常 nice 的姐姐，非常有親和力。她是 SVG 動畫專家，CSS 專家，微軟資深開發。還是 Vue 核心團隊成員。她在 Frontend Masters 上有 Vue.js，高階 SVG 動畫，UI 設計等課程。她在 Twitter 上也會發很多開發 Tips。Twitter: @sarah_edo

5. Wes Bos. 剛剛提到過這位。他除了在播客上給開發者提供很多建議外，還在 Twitter 上分享很多開發技巧，JS, CSS, Bash, VSCode 等技巧都有。我在開發中也用了很多他分享的技巧，省了很多時間。Twitter: @wesbos

6. Mathias Bynens. 谷歌 V8 引擎工程師，TC39 成員。他會從引擎實現的角度，告訴開發者怎麼寫程式碼。他也會分享一些 V8 的專案細節等。我之前寫了消滅 for 迴圈的文章，好多人反對，還有些人直接嘲諷我。其中有一個說法是高階函式沒有 for 迴圈效能好。作為一個新手，我哪來勇氣去對槓來自資深開發者的質疑的？因為引擎開發者都說了，那點微觀語言層面的效能差異，不會成為你整個應用的效能瓶頸。你應該把注意力放在編寫易理解和易維護的程式碼上。 Twitter: @mathias

7. Brian Lonsdorf. 網名 Dr. Boolean. 這傢伙就是個天才。他有些害羞，但是在講他最擅長的函數語言程式設計的時候，總能把滿腦子天馬行空的想法講地很清楚。如果想學硬核函數語言程式設計的話，推薦從關注他開始。他 Twitter 更新不頻繁，但是更新的時候一般都是值得你記筆記的時候。Twitter: @drboolean

8. Jason Miller. 剛有提到他。他是 Google Chrome 團隊工程師，還是 Preact 的作者。他寫了一堆平均只有十幾行程式碼的庫。研究他的程式碼不用一個檔案一個檔案地跳，因為就在一個檔案裡…… 他在 Twitter 上也很活躍。Twitter: @_developit

9. Bartosz Milewski. 這位真是位大神。我說我被他影響都有強行給自己貼金的嫌疑。他有量子物理博士學位，後來去做軟體開發了，成了 C++ 專家，出過 C++ 的專著。後來因受不了 C++ 糟糕的設計，去寫 Haskell 了，也成了專家。最近又把興趣轉向範疇論了，開始給程式設計師教範疇論。業餘還研究音樂理論（我看他 YouTube 點贊列表知道的……）。我最近幾個月每週都安排幾個早晨，去他的 YouTube 頻道聽他講範疇論（這個不需要高數基礎）。等下我會繼續談他的範疇論教程。Twitter: @BartoszMilewski

在聽 Bartosz Milewski 講範疇論

五，函數語言程式設計學習路線圖

如果你是新人，不要被這部分內容嚇到了。這只是我的個人技術偏好。你不用懂抽象代數和範疇論也可以走很遠，不過，輕量級的函數語言程式設計，比如高階函式，函式組合，閉包，柯里化，偏函式應用，遞迴，memoization，惰性求值等等，是必須要掌握的。我之所以把這部分加進來，除了有人問我函數語言程式設計學習資料之外，還因為對函數語言程式設計的興趣是推動我持續學習的強大動力。我從一個高數一半課程掛科的文科生，到現在成為一個可以理解 lambda 演算和邱齊編碼（Church Encoding）的程式設計師，這對於我是很有智力成就感的。這種成就感是以前從沒體會過的。

我建議大家都找到驅動自己成長的興趣點，不一定要和我一樣。你可以選擇資料視覺化，高階動畫，UI/UX 設計（同時懂程式碼和設計會讓你擁有獨特的競爭力）等等。對後面兩個部分感興趣的可以關注 Sarah Drasner 和Mary Lou 的作品。

系統教程

1. Functional-Light JavaScript ，Kyle Simpson 的作品，剛剛有提到。這本書和 Eric Elliott 的 Composing Software 是入門 JS 函數語言程式設計的最佳教程。這兩個教程所教的知識，能讓你輕鬆應付工作中對於函數語言程式設計的實際需求。一般情況下，你的專案中所允許出現的函式式程式碼，也只能在這個範圍內了，再硬核一點別人維護起來就困難了。

2. Professor Frisby's Mostly Adequate Guide to Functional Programming 作者是 Brian Lonsdorf。他寫程式碼時是 Dr. Boolean, 寫書時是 Professor Frisby... 學完這本書，你可以掌握函數語言程式設計應用 90% 以上知識。

3. Professor Frisby Introduces Composable Functional JavaScript 作者還是 Brian。Egghead 上的課程。雖然課程內容和上面那本書重複了，但還是值得看一下。Brian 用動畫方式講課，有些呆萌。

4. Learn You A Haskell for Great Good 學 Haskell 最佳資源之一。這個教程不同於其它教程之處在於它語言幽默風趣，會讓你讀著讀著笑出來。教程預設讀者沒有函數語言程式設計訓練，所以對新人來說學習難度曲線平緩些。

5. Category Theory for Programmers Bartosz Milewski 的範疇論教程。視訊教程地址。這一系列教程是面向程式設計師的，所以不用太擔心一開始就聽不懂，難以入門。不過，後期要學懂還是要花點精力多去找些材料讀的，畢竟範疇論是種高度抽象的知識。教程涉及到程式碼的部分會用 C++ 和 Haskell，讀者最好懂點 C++。

其它值得學習的

1. How to Deal with Dirty Side Effects in Your Pure Functional JavaScript 這篇文章是最近 JavaScript Weekly 推的。在我弄懂了一些 FP 概念之後，再回頭看這篇入門文章，也收穫了很多，更清楚了 FP 的每一步為什麼要那樣做。一個應用的實際意義就是要產生作用 (effects)，例如從伺服器請求到內容然後展示到瀏覽器上等，全是 effects，但是函數語言程式設計不允許副作用 (side effects)，即在計算過程中不許產生作用，那還怎麼寫程式？這篇文章一步一步嘗試解決如何消除程式中的副作用，只在計算全部完成再釋放作用。此文不會扔概念，而是用普通程式碼來解決問題，一步步地，你在不知不覺中就懂了 Functors, Applicative Functors 和 Monads。只要你懂普通 JS 你就能懂本文程式碼。

2. A Million Ways To Fold Brian Lonsdorf 的演講。在我發表《如何在 JS 程式碼中消滅 for 迴圈》的時候，反對的觀點之一是，我所展示的寫法不是很靈活，一個新需求下來，讓我乖乖改回 for 迴圈。我理解一些開發者忙於實際開發，學一些太基礎的東西似乎對開發沒什麼用處，所以不去學習積累。在這個例子裡，我明白了不懂 CS 基礎是會限制想象力的。在這個演講裡，Brian 介紹了範疇論裡面的 F-algebra 和 catamorphism。沒見過這些術語沒關係，只用知道，理解了這個演講，你就能明白， 能用 for 迴圈表達的計算，全部能用 reduce 函式表達 。還會有人說，reduce 底層也是用 for 迴圈實現的！ 這就好像我告訴你蓋房子要用磚頭而不要直接用沙子，你告訴我磚頭是用沙子製成的 。

3. State Monad in JavaScript 在用純函式寫應用時，處理狀態是件很麻煩的事。State 是函數語言程式設計中專用來解決狀態管理的一個代數資料型別（Algebraic Data Type）。這門課會用一個叫crocks 的庫，學了這門課程你可以繼續自己探索 crocks 的其它資料型別和工具函式。

4. Safer JavaScript with the Maybe Type 函數語言程式設計不會用 if else 來做空值處理，取而代之的是 Maybe 資料型別。Maybe 讓你在組合函式時不用擔心空值處理。

5. The Quantum Electrodynamics of Functional JavaScript 讀懂這篇文章，你就明白了 Combinatory Logic (組合子邏輯) 和 Church Encoding (邱齊編碼)。這篇文章只介紹了原理，有人根據這篇文章，寫了兩個庫： church ，用 JS 實現邱齊編碼。 combinators-js ，用 JS 實現所有的 Combinator（組合子）。懂這些東西對你實際寫程式碼並沒有幫助，就好像懂量子物理對建造橋樑也沒什麼用處。

6. Reginald Braithwaite 的部落格 上一篇文章也源自這個部落格。本打算把我看過的全部列出來的，但實在有些繁瑣了。大家可以自行翻閱。

六，犯過的錯誤

1. 嘗試著一次學太多東西。不管你再怎麼努力，人的時間和精力是有限的，一次能學的內容有限。我在找到開發工作之前的學習階段，還學了 Python 和 Django，花了較長時間，效果也不好。工作後看到機器學習挺有意思，也花了一段時間學。我數學基礎太差，就去 Khan Academy 學本科統計學和線性代數了。後來實在精力跟不上了，就擱置了。以後可能會再去挑戰這個，但還是要一步一步來。

2. 浪費時間學當前階段不適合學的東西。去年三月份學 Andrew Mead 的 Node 課程時，有一天收到他的郵件，說他新出了一個全棧課程，現在購買享受最低價。我一看簡介，一個 JS 框架同時解決了前端後端和資料庫，這個可以呀，學完我就能做全棧了。然後我就去花了一個月學 Meteor。那時候我 JS 基礎還不是很好，學這種高階的框架也只是記一堆 API，學完後一直沒用過，到現在已經忘光了。

3. 不顧人才市場的需求，盲目學暫時用不到的技術棧。在找到開發工作前，我的學習期是比較長的，主要原因是我一直覺得自己學的還不夠，好多東西還沒掌握。但是我那個時候學的一些技術，並不是大多數用人單位所要求的，比如 Rx.js 和 GraphQL。雖然我並不後悔學了這兩個技術，但我覺得我沒必要在還沒工作時就給自己那麼大壓力。我想很少有用人單位會要求一個沒有工作經驗的新人會寫 Rx.js 和 GraphQL，再說國內用這兩個技術的公司也很少。

七，接著學什麼

1. Haskell 和範疇論我還只學了冰山一角，接下來會繼續學習。學 Haskell 只是在看教程，寫程式碼很少，接下來試著用它寫些簡單應用。

2. 資料視覺化。我一直斷斷續續在 Frontend Masters 上學 D3 課程，但是還沒練過手。D3 也是 API 太多了，要掌握的話得多花點時間。

3. CS 基礎。今年四五月份時，我很認真想學一個線上 CS 學位，剛好我找到了 OSSU 。但是我比較沒耐心，我都通過 JS 學到比較高階了，在基礎課程裡面還要用 Racket 學基礎函式編寫，我試著跳過一些課程，但是有些知識是依賴之前課程的，跳過了就聽不懂了。後來我覺得進度實在太慢了就停下來了。但是 CS 基礎我還是得學的，包括網路，演算法，資料庫，底層語言等。正如我發現的，不懂基礎是會限制開發的想象力的。在合適的時機我會回去 OSSU 繼續學，爭取能學完課程。

後記

基於我這一年多的學習和工作經驗，我想給準備從事前端的朋友一些建議。

首先是不要覺得前端比後端簡單。我一開始是這樣認為的，後來發現自己錯了。前端要掌握的知識是很多的，前端工程複雜度也在提升。你可能經常聽到前端圈有人說 “學不動了”，國外也有個現象叫 JavaScript fatigue. 你需要基礎學很紮實，才能在技術飛速發展中不感到疲憊和迷失。我也不是勸你不要學前端，而是提醒你，做出決定前要有一個清楚的權衡考量。

要有持續學習的準備。現在是學習者的最好的時代，你真的能在網上學到任何你想學的東西（高精尖核武器製作和火箭技術可能學不了……）。Google 和 Stack Overflow 上能找到你大部分問題的答案。找不到還可以問，問了別人也答不上來的話，那你已經學到很前沿了。本科學 CS 當然會讓你起步更早，但是如果沒有 CS 學位，現在開始也不會太晚。不遠的將來，如果別人問我學歷，除了真實學歷，我還會很自信告訴對方，我的最高學歷是 OSSU (Open Source Society University, 開源社會大學)。

最後，廣告一下我的個人網站leihuang.me 釋出的內容是還沒在掘金髮表過的，將來也可能發表一些不適合發在掘金的內容，比如沒什麼 “用處” 的範疇論知識，以及其它一些務虛的內容等。

我還建立了一個釋出前端學習資源的 Telegram Channel，歡迎訂閱：t.me/jsespresso