如何零基础转行成为一个自信的前端达人

妖狐艹你老母 2022-09-14 00:20 236阅读 0赞

![f184acee409920c13f7c1b3cac02455a.png][]

## 一，背景介绍 ##

我本科学的是国际贸易，乱选的专业。毕业后做了半年外贸，实在不喜欢，然后去做英文编辑了。第二份工作也很无聊，就是写英文软文，发表在国外的行业期刊上，给公司做广告。然后也做英文官网的内容。这是一个很没创意的工作。每天写几篇我自己都没感觉的文章，不知道价值在哪。最重要的是，这份职业里我找不到持续精进的方向，做一年和做三年好像区别不大。

后来学前端也是误打误撞。因为我同时在做英文官网的内容和产品，会和前端打交道。当时公司的前端是学 UI 转过来的，我观察他的工作，以为就是 HTML 写个页面结构，然后 CSS 做个样式，然后用 JS 做点效果就可以了。这个简单啊，我也可以做。然后我就裸辞去学习前端开发了…… 后来发现我错了，但是自己跳的坑，流着泪也要爬出来。接下来我经历了人生中最难熬的一段时间，也经历了人生中第一次大的转变。

我从 2017 年年初开始高强度学习，去年十一假期之后开始我的第一份前端工作，到今天刚好工作一年时间。接下来我将我的学习路径，学习方法，和学习资源整理分享出来，希望可以帮到更多人。

## 二，准备工作 ##

学习不只是找到好的学习路径，掌握好的学习方法就可以了的，要成为优秀的学习者，是要求很多素质和习惯的。我长期以来都是一个懒散的人，三分钟热度，自律很差。我相信大部分人都这样。在意识到学习任务的艰巨后，我想的是我不能再放弃了，我觉得我年轻试错的阶段已经过了，经不起再失败了，于是我专门花了很长时间来调整自己的习惯和行为。这里我分享一些对我帮助最大的资源：

### 1. 一本书 ###

《习惯的力量》（*The Power of Habit*）。这本书让我意识到自己的坏习惯是需要科学的方法来改变的，一味地自责和焦虑是没用的。习惯的改变靠的不是主观意志力，而是 cue （不知道怎么翻译，刺激物？）和日常流程（routine）来维持的，所以我把学习场所从家换到了星巴克。而 cue 分为情绪，时间，场所，上一个行为等，这些都需要自己去定位查找。找到触发你的坏习惯的 cue，改变它。另外，每天都要有计划，计划会触发奖赏期待，让你更不容易回到坏习惯。最重要的是，关键好习惯的养成，会让你养成其它好习惯更容易。比如早起的习惯一旦养成，我又养成了早上学习最具挑战知识的习惯。

### 2. 一门课程 ###

Coursera 上有一门课叫 Learning How To Learn\[1\], 目前是世界上参与人数最多的一门 MOOC 课程。这门课免费。讲师 Dr. Barbara Oakley 是奥克兰大学的工程学教授。她本来是学斯拉夫语言文学的，一直畏惧工科，数理学科成绩也很差，直到快 30 岁时，她才决定挑战自己去学工程学。听她讲学习过程是最有说服力的。另一位讲师 Dr. Terrence Sejnowski 是顶尖的神经科学专家。他会从脑科学和神经科学的实证角度告诉你为什么应该怎样学。下面讲下我对这门课程的一些理念的应用。

**一，大脑的发散和集中工作模式**

发散模式（diffuse mode）指的是注意力从工作对象处转移开来，放松下来，让灵感有机会出现。集中模式（focused mode）自然是指全部注意力放在工作对象上，高强度思考。学习时，我采用番茄工作法，每工作 25 分钟休息 5 分钟。然后每工作 2 到 3 个小时，出门散下步，或者在家时耍下壶铃。这个习惯养成后，很多神奇的事情会发生。比如有一次我在写 Rxjs 应用时，卡在一个地方，怎么也想不出来解决方案，然后去洗了个澡，灵感就来了，换几个操作符的组合就解决了。还有数不清有多少次在梦里想出一个解决方案，起床就去试，结果真的行的通。

**二，多运动**

Dr. Terrence Sejnowski 讲解了为什么运动会促发大脑新的神经元的生长。高强度的脑力活动，你需要大脑保持最佳机能。我在开始学习之前就是个健身狂魔（见下图），每周有至少四天要去健身房。找到工作前的学习期，我也保持着这个频率锻炼。工作后，没时间再去健身房了，我就买了个 Concept 2 划船机，早上在家锻炼。锻炼推荐 HIIT （高强度间歇训练）方法，燃脂迅速，最短时间内达到锻炼效果。

![92094c76a7cb5f67f2f19999fe392b85.png][] deadlift

*硬拉训练*

**三，刻意训练**

学生时代我经常忽略做题训练，看懂了答案就以为自己掌握了。但其实懂答案和自己写出来是两回事。学习者很容易产生能力幻觉（Illusion of Competence），看懂了知识点，就以为自己掌握了。只有自己能独立解释清楚的，才算是自己掌握的。自己在网上找些小挑战做（比如 100 days of code, 还有 JavaScript 30），多在 codewars 和 LeetCode 上刷题（我主要是在 codewars 上做题），可以巩固刚学的知识。

**四，间隔重复**

一天花 6 个小时学一个主题，和用 6 天时间，一天花 1 小时来学习同一个主题相比，肯定是后者掌握的更好。当然重复不是简单的重读一遍。而是刻意回忆，测试自己还能不能想起来。大家可以试试 Studies 这个软件，创建和管理知识卡片，方便复习。iOS 和 Mac 上都有。

还有很多，我就不全列了。强烈建议大家去学一遍课程，自己摸索出适合自己的方法。中文版在这里\[2\]

### 一个习惯 ###

早起。每天早上 4 点准时起床。我知道这个听起来挺疯狂，但我坚持了一年半了。（也有例外，但最晚大多数时候不超过 5 点，极个别例外比如加班，也不会超过 6 点）。我以前的习惯是经常晚上玩手机到凌晨 2 点睡，还骗自己，以为自己是夜猫子型。转变习惯用了一个月。下面是一些技巧。1. 吃补剂。我吃的是 Swiss Sleep，一种澳洲的草本保健品。我知道很多专家说保健品不靠谱，但我吃了这个真的睡的更香了，用 Sleep Cycle 监测到的深度睡眠增加了。2. 下午 2 点之后不喝咖啡，晚上 8 点之后不看电子屏幕。（这是我脱产学习时候的状态。后来进阿里后我用的折中办法是电脑装 flux，屏幕看着就昏昏欲睡）3. 睡前深呼吸，放慢呼吸频率。四，我用 Yeelight 床头灯，早上定时模拟日出。自然醒的感觉，不会像闹钟那样讨厌。早起后，早上至少有 3 个小时不会有人打扰你（我做的更极端，直接把微信卸载了，全天都没人打扰）。而晚上睡的早，也不会漫无目的地玩手机聊天。从早上起床到中午 12 点，我可以完成 10 个番茄闹钟。中途还有充足的休息时间。

### 一个 APP ###

Headspace 是国外一个比较流行的冥想软件。可能很多人对冥想的感觉就是太玄学，但它真的作用很大。对于我而言，主要是两个作用，一个是集中注意力，另外一个是克服焦虑。一个人没有其他帮助，学习一个全新的领域，也不知道能不能成功，压力还是很大的。而这种压力可能并不一定会转化为动力，而是会积累着，成为拖累。冥想可以让我暂时远离这些担忧，调整注意力。Headspace 的指导语速很慢，听懂比较容易。

## 三，学习资源 ##

前面的准备工作做好后，开始进入正题了。这部分我分享下对我帮助最大的一些学习资源。

### 1. Frontend Masters ###

正如 Frontend Masters\[3\] 这个网站名字所说明的，能在这里讲课的，都是大师级别。我挑几门对我帮助最大的课程，并简短说明如下：

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 的核心构成，如响应式系统，插件，渲染函数，路由，状态管理等。

还有很多优秀课程，全部列出来篇幅太大了。建议大家去探索寻宝。另外 Frontend Masters 是订阅制，费用比较贵，按月付的话，接近 40 美元一个月，年付会便宜很多。黑五和开学季会有折扣。我是在开学季用折扣价订了一年。

另外，Frontend Masters 每年都会出一个免费的前端学习手册。今年的点击这里\[4\]。

### 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 学了，其它的真学不动了，大多数属于冲动消费……

![6331f1ad3f66425b59a942f82d134adf.png][] screenshot

*我学习的课程部分截图*

这部分我就不详细介绍课程了，只推荐三个老师。

一是 Stephen Grider，我买了他大部分课程。Stephen 擅长用很直观的图表来拆解工程概念，再难的东西他也能拆到用日常语言解释。我一开始自学算法时，感到很吃力。Stephen 的算法课让我通过 JS 掌握了基础的计算机算法。他还有 Node，React，MongoDB 以及 GraphQL 的课程，大部分涵盖了入门和进阶。

第二个是 Andrew Mead。他讲课能力也很优秀，我第一次学 Node 是学的他的课程，收获很大。另外他对学员的问题回应非常及时和详细。他的课程和 Stephen 的重复率挺高，不用两个都买。

如果有兴趣学 iOS 开发，强烈推荐 Angela Yu 的课。（我做了半年 React Native 开发，所以去学了原生开发。）Angela 讲课幽默可爱，新人友好。她似乎是中国长大的，在英国学医。本来是医生，后来转行做 iOS 开发和设计了。厉害的人生各有各的不同啊……

### 4. Wes Bos\[5\] ###

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\[6\] 你可以听一个从 BASIC 时代就开始写程序的前辈，是怎样看待不同编程范式的；了解为什么组合比继承更优，为什么 JS 适合用来函数式编程。Twitter: \_ericelliott
3.  André Staltz. 他是社区里面的响应式编程专家。如果你想学响应式编程的话，一定要看他写的这篇文章，The introduction to Reactive Programming you've been missing\[7\]. 他还写了一个函数响应式框架叫 Cycle.js\[8\] 除了技术，他最让我佩服的还有他对技术与社会之间关系的思考。他对于目前 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

## 五，函数式编程学习路线图 ##

如果你是新人，不要被这部分内容吓到了。这只是我的个人技术偏好。你不用懂抽象代数和范畴论也可以走很远，不过，轻量级的函数式编程，比如高阶函数，函数组合，闭包，柯里化，偏函数应用，递归，memoization，惰性求值等等，是必须要掌握的。我之所以把这部分加进来，除了有人问我函数式编程学习资料之外，还因为对函数式编程的兴趣是推动我持续学习的强大动力。我从一个高数一半课程挂科的文科生，到现在成为一个可以理解 lambda 演算和邱齐编码（Church Encoding）的程序员，这对于我是很有智力成就感的。这种成就感是以前从没体会过的。

我建议大家都找到驱动自己成长的兴趣点，不一定要和我一样。你可以选择数据可视化，高阶动画，UI/UX 设计（同时懂代码和设计会让你拥有独特的竞争力）等等。对后面两个部分感兴趣的可以关注 Sarah Drasner 和 Mary Lou\[9\] 的作品。

**系统教程**

1.  *Functional-Light JavaScript\[10\]* ，Kyle Simpson 的作品，刚刚有提到。这本书和 Eric Elliott 的 *Composing Software* 是入门 JS 函数式编程的最佳教程。这两个教程所教的知识，能让你轻松应付工作中对于函数式编程的实际需求。一般情况下，你的项目中所允许出现的函数式代码，也只能在这个范围内了，再硬核一点别人维护起来就困难了。
2.  *Professor Frisby's Mostly Adequate Guide to Functional Programming\[11\]* 作者是 Brian Lonsdorf。他写代码时是 Dr. Boolean, 写书时是 Professor Frisby... 学完这本书，你可以掌握函数式编程应用 90% 以上知识。
3.  Professor Frisby Introduces Composable Functional JavaScript\[12\] 作者还是 Brian。Egghead 上的课程。虽然课程内容和上面那本书重复了，但还是值得看一下。Brian 用动画方式讲课，有些呆萌。
4.  Learn You A Haskell for Great Good\[13\] 学 Haskell 最佳资源之一。这个教程不同于其它教程之处在于它语言幽默风趣，会让你读着读着笑出来。教程默认读者没有函数式编程训练，所以对新人来说学习难度曲线平缓些。
5.  *Category Theory for Programmers\[14\]* Bartosz Milewski 的范畴论教程。视频教程地址\[15\]。这一系列教程是面向程序员的，所以不用太担心一开始就听不懂，难以入门。不过，后期要学懂还是要花点精力多去找些材料读的，毕竟范畴论是种高度抽象的知识。教程涉及到代码的部分会用 C++ 和 Haskell，读者最好懂点 C++。

**其它值得学习的**

1.  How to Deal with Dirty Side Effects in Your Pure Functional JavaScript\[16\] 这篇文章是最近 JavaScript Weekly 推的。在我弄懂了一些 FP 概念之后，再回头看这篇入门文章，也收获了很多，更清楚了 FP 的每一步为什么要那样做。一个应用的实际意义就是要产生作用 (effects)，例如从服务器请求到内容然后展示到浏览器上等，全是 effects，但是函数式编程不允许副作用 (side effects)，即在计算过程中不许产生作用，那还怎么写程序？这篇文章一步一步尝试解决如何消除程序中的副作用，只在计算全部完成再释放作用。此文不会扔概念，而是用普通代码来解决问题，一步步地，你在不知不觉中就懂了 Functors, Applicative Functors 和 Monads。只要你懂普通 JS 你就能懂本文代码。
2.  A Million Ways To Fold\[17\] Brian Lonsdorf 的演讲。在我发表《如何在 JS 代码中消灭 for 循环》的时候，反对的观点之一是，我所展示的写法不是很灵活，一个新需求下来，让我乖乖改回 for 循环。我理解一些开发者忙于实际开发，学一些太基础的东西似乎对开发没什么用处，所以不去学习积累。在这个例子里，我明白了不懂 CS 基础是会限制想象力的。在这个演讲里，Brian 介绍了范畴论里面的 F-algebra 和 catamorphism。没见过这些术语没关系，只用知道，理解了这个演讲，你就能明白，**能用 for 循环表达的计算，全部能用 reduce 函数表达**。还会有人说，reduce 底层也是用 for 循环实现的！**这就好像我告诉你盖房子要用砖头而不要直接用沙子，你告诉我砖头是用沙子制成的**。
3.  State Monad in JavaScript\[18\] 在用纯函数写应用时，处理状态是件很麻烦的事。State 是函数式编程中专用来解决状态管理的一个代数数据类型（Algebraic Data Type）。这门课会用一个叫 crocks\[19\] 的库，学了这门课程你可以继续自己探索 crocks 的其它数据类型和工具函数。
4.  Safer JavaScript with the Maybe Type\[20\] 函数式编程不会用 if else 来做空值处理，取而代之的是 Maybe 数据类型。Maybe 让你在组合函数时不用担心空值处理。
5.  The Quantum Electrodynamics of Functional JavaScript\[21\] 读懂这篇文章，你就明白了 Combinatory Logic (组合子逻辑) 和 Church Encoding (邱齐编码)。这篇文章只介绍了原理，有人根据这篇文章，写了两个库：church\[22\]，用 JS 实现邱齐编码。combinators-js\[23\]，用 JS 实现所有的 Combinator（组合子）。懂这些东西对你实际写代码并没有帮助，就好像懂量子物理对建造桥梁也没什么用处。
6.  Reginald Braithwaite 的博客\[24\] 上一篇文章也源自这个博客。本打算把我看过的全部列出来的，但实在有些繁琐了。大家可以自行翻阅。

## 六，犯过的错误 ##

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\[25\]。但是我比较没耐心，我都通过 JS 学到比较高阶了，在基础课程里面还要用 Racket 学基础函数编写，我试着跳过一些课程，但是有些知识是依赖之前课程的，跳过了就听不懂了。后来我觉得进度实在太慢了就停下来了。但是 CS 基础我还是得学的，包括网络，算法，数据库，底层语言等。正如我发现的，不懂基础是会限制开发的想象力的。在合适的时机我会回去 OSSU 继续学，争取能学完课程。

## 后记 ##

基于我这一年多的学习和工作经验，我想给准备从事前端的朋友一些建议。

首先是不要觉得前端比后端简单。我一开始是这样认为的，后来发现自己错了。前端要掌握的知识是很多的，前端工程复杂度也在提升。你可能经常听到前端圈有人说 “学不动了”，国外也有个现象叫 JavaScript fatigue. 你需要基础学很扎实，才能在技术飞速发展中不感到疲惫和迷失。我也不是劝你不要学前端，而是提醒你，做出决定前要有一个清楚的权衡考量。

要有持续学习的准备。现在是学习者的最好的时代，你真的能在网上学到任何你想学的东西（高精尖核武器制作和火箭技术可能学不了……）。Google 和 Stack Overflow 上能找到你大部分问题的答案。找不到还可以问，问了别人也答不上来的话，那你已经学到很前沿了。本科学 CS 当然会让你起步更早，但是如果没有 CS 学位，现在开始也不会太晚。不远的将来，如果别人问我学历，除了真实学历，我还会很自信告诉对方，我的最高学历是 OSSU (Open Source Society University, 开源社会大学)。

--------------------

## 第二次发表的后后记 ##

现在我做不到每天早上四点起床了。一般周二到周五六点到六点半起床，周六到周一可以四点到四点半起床。

现在依然在学习，只是感到信息过载学不过来。以前经常看很多的资源，现在都不看了。甚至订阅了一年的 Frontend Masters 也有几个月没看了。不过我觉得我才起步，先学 CS 基础的。应用类的教程，跟着学就是无底洞，特别是前端。

### 参考资料 ###

\[1\]

https://www.coursera.org/learn/learning-how-to-learn: https://link.juejin.cn?target=https%3A%2F%2Fwww.coursera.org%2Flearn%2Flearning-how-to-learn

\[2\]

https://www.coursera.org/learn/ruhe-xuexi: https://link.juejin.cn?target=https%3A%2F%2Fwww.coursera.org%2Flearn%2Fruhe-xuexi

\[3\]

https://frontendmasters.com/: https://link.juejin.cn?target=https%3A%2F%2Ffrontendmasters.com%2F

\[4\]

https://frontendmasters.com/books/front-end-handbook/2018/2018.html: https://link.juejin.cn?target=https%3A%2F%2Ffrontendmasters.com%2Fbooks%2Ffront-end-handbook%2F2018%2F2018.html

\[5\]

https://wesbos.com/: https://link.juejin.cn?target=https%3A%2F%2Fwesbos.com%2F

\[6\]

https://medium.com/javascript-scene/composing-software-an-introduction-27b72500d6ea: https://link.juejin.cn?target=https%3A%2F%2Fmedium.com%2Fjavascript-scene%2Fcomposing-software-an-introduction-27b72500d6ea

\[7\]

https://gist.github.com/staltz/868e7e9bc2a7b8c1f754: https://link.juejin.cn?target=https%3A%2F%2Fgist.github.com%2Fstaltz%2F868e7e9bc2a7b8c1f754

\[8\]

https://cycle.js.org/: https://link.juejin.cn?target=https%3A%2F%2Fcycle.js.org%2F

\[9\]

https://tympanus.net/codrops/author/crnacura/: https://link.juejin.cn?target=https%3A%2F%2Ftympanus.net%2Fcodrops%2Fauthor%2Fcrnacura%2F

\[10\]

https://github.com/getify/Functional-Light-JS: https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fgetify%2FFunctional-Light-JS

\[11\]

https://mostly-adequate.gitbooks.io/mostly-adequate-guide/: https://link.juejin.cn?target=https%3A%2F%2Fmostly-adequate.gitbooks.io%2Fmostly-adequate-guide%2F

\[12\]

https://egghead.io/courses/professor-frisby-introduces-composable-functional-javascript: https://link.juejin.cn?target=https%3A%2F%2Fegghead.io%2Fcourses%2Fprofessor-frisby-introduces-composable-functional-javascript

\[13\]

http://learnyouahaskell.com/: https://link.juejin.cn?target=http%3A%2F%2Flearnyouahaskell.com%2F

\[14\]

https://github.com/hmemcpy/milewski-ctfp-pdf: https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fhmemcpy%2Fmilewski-ctfp-pdf

\[15\]

https://www.youtube.com/watch?v=I8LbkfSSR58&list=PLbgaMIhjbmEnaH\_LTkxLI7FMa2HsnawM\_: https://link.juejin.cn?target=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DI8LbkfSSR58%26list%3DPLbgaMIhjbmEnaH\_LTkxLI7FMa2HsnawM\_

\[16\]

https://jrsinclair.com/articles/2018/how-to-deal-with-dirty-side-effects-in-your-pure-functional-javascript/: https://link.juejin.cn?target=https%3A%2F%2Fjrsinclair.com%2Farticles%2F2018%2Fhow-to-deal-with-dirty-side-effects-in-your-pure-functional-javascript%2F

\[17\]

https://www.youtube.com/watch?v=JZSoPZUoR58: https://link.juejin.cn?target=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DJZSoPZUoR58

\[18\]

https://egghead.io/courses/state-monad-in-javascript: https://link.juejin.cn?target=https%3A%2F%2Fegghead.io%2Fcourses%2Fstate-monad-in-javascript

\[19\]

https://www.npmjs.com/package/crocks: https://link.juejin.cn?target=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fcrocks

\[20\]

https://egghead.io/courses/safer-javascript-with-the-maybe-type: https://link.juejin.cn?target=https%3A%2F%2Fegghead.io%2Fcourses%2Fsafer-javascript-with-the-maybe-type

\[21\]

http://raganwald.com/2015/02/13/functional-quantum-electrodynamics.html: https://link.juejin.cn?target=http%3A%2F%2Fraganwald.com%2F2015%2F02%2F13%2Ffunctional-quantum-electrodynamics.html

\[22\]

https://github.com/benji6/church: https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fbenji6%2Fchurch

\[23\]

https://github.com/benji6/combinators-js: https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fbenji6%2Fcombinators-js

\[24\]

http://raganwald.com/: https://link.juejin.cn?target=http%3A%2F%2Fraganwald.com%2F

\[25\]

https://github.com/ossu/computer-science: https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fossu%2Fcomputer-science

> 作者：serialcoder
> 
> https://zhuanlan.zhihu.com/p/46401520

[f184acee409920c13f7c1b3cac02455a.png]: /images/20220828/5fbd1e1a1d1d4701808bc1b91c772b71.png
[92094c76a7cb5f67f2f19999fe392b85.png]: /images/20220828/d99a729b122841059d836dbf47221f4a.png
[6331f1ad3f66425b59a942f82d134adf.png]: /images/20220828/3d87a91d00414d3e9001ec5ba3e572ef.png