前端函数式演进

从前端角度讲解函数式编程核心知识，剖析热门前端工具应用的函数式理论和思想，结合具体场景给出大量案例

资深前端工程师，阿里本地生活企业订餐前端负责人，拥有10余年软件开发工作经验。

这是一部写给前端工程师的函数式编程实战指南，由阿里本地生活企业订餐前端负责人撰写。

作者结合自己在前端领域的大量工程实践经验，首先从前端开发者的角度介绍了函数式编程在前端领域的演进，以及前端必备的函数式编程知识；然后对React和RxJS等流行前端工具的函数式编程功能和思想进行了深入剖析，既可以帮助读者更好地理解和使用这些工具，又能给予读者技术选型方面的建议。此外，书中提供了平台级别的前端开发示例的多种实现，方便读者结合书中的理论进行印证和思考。

【通过阅读本书，你将】：

*理解函数式和它的编程实践；

*理解函数式对前端工具的影响；

*使用代码编写具备函数式风格的业务代码和工具方法；

*更好地理解前端领域框架和库产生的动机和原理；

*入门使用热门工具RxJS和React Hooks；

*从更多侧面思考前端的发展和核心诉求；

*编写平台型的前端项目。

【本书共9章，可从逻辑上分为3个部分】

*第①部分（第1～3章） 理论基础

首先盘点了命令式编程、声明式编程等各种常见的编程范式以及它们在前端领域的表现，然后介绍了前端函数式的基础概念和函数式思维，以及前端的各种常见特征。

*第②部分（第4～7章） 原理分析

首先介绍了经典的函数式模型Monadic，然后基于jQuery等工具梳理了在函数式编程的影响下前端工具形态的演进，最后基于热门框架RxJS和React Hooks分析了函数式思想对它们以及整个前端领域的影响。

*第③部分（第8、9章） 总结

首先总结了前端开发的核心复杂度和函数式思想的作用，并探讨了前端工程化相关的内容；然后梳理了全书的示例，帮助读者通过代码完成知识的落地。

邵丁丁
资深前端开发工程师，阿里本地生活（饿了么）企业订餐技术部前端负责人，对函数式编程以及函数式编程在前端领域的应用有深入的研究。
拥有10余年的传统软件和互联网软件开发经验，曾参与大型企业内部控制类软件（ERP系统、OA系统）、检测类工程软件以及饿了么外卖十多条业务线的Web前端项目的研发，对软件工程和软件架构有深刻的理解。

*函数式编程作为一种高阶编程范式，与面向对象的开发理念和思维模式截然不同，深入理解这种差异性，是程序员进阶的必经之路。本书由浅入深体系化地讲解了函数式编程在前端领域的应用，内容翔实、广开思路，强烈推荐。

——许红涛 阿里本地生活企业订餐研发部负责人

*近几年，函数式编程思想对前端的影响很大，React、Vue等热门框架一直在不断吸纳该思想来解决实际问题。本书作者是一位喜欢钻研且具备极强学习能力的优秀前端开发者，相信这本书可以帮助你对函数式编程有更全面的认知和更深入的理解。
——王超楠 大地量子前端专家

*函数式编程已经逐渐成为前端主流，并且在热门框架中得到了大规模应用。本书从函数式编程的概念开始，到函数式编程的技术演进，结合 React Hooks和RxJS等实际案例，以一种系统化的方式帮助读者学习函数式编程，深入浅出、易于理解，适合所有前端开发者。
——Bill 前端资深开发专家/原饿了么中后台多业务前端担当

第1章　编程范式和前端体现 1

1.1　编程范式 2

1.2　命令式编程 2

1.3　面向对象 3

1.4　元编程 4

1.5　声明式编程 5

1.6　逻辑式编程 6

1.7　函数式编程 8

1.8　案例和代码 9

1.8.1　案例总览 9

1.8.2　命令式编程示例 11

1.8.3　声明式编程示例 11

1.8.4　面向对象、元编程和函数式编程示例 13

1.9　本章小结 15

第2章　前端函数式基础概念 16

2.1　JavaScript多范式中的函数式 16

2.1.1　闭包 17

2.1.2　高阶函数 18

2.1.3　Lambda表达式 19

2.1.4　Array数组集合和函数组合子 20

2.2　持续补全 21

2.2.1　基于JavaScript高阶函数的编码优化 21

2.2.2　基于工具和标准的再加工 24

2.3　函数式的抽象单元 26

2.3.1　副作用 27

2.3.2　引用透明和纯函数 27

2.4　案例和代码 28

2.4.1　闭包和单例 28

2.4.2　数组方法和链式调用 31

2.4.3　惰性加载 32

2.5　本章小结 33

第3章　函数式思维和前端特征 35

3.1　状态和副作用 36

3.2　过程和高阶抽象 38

3.2.1　便捷地对过程反复包装 39

3.2.2　另一种编程世界观：流过系统的信息流 40

3.3　运行环境承担更多的职责 41

3.3.1　循环、映射和递归 42

3.3.2　函数式过程抽象忽略的细节操作 43

3.4　类型和数据结构 44

3.4.1　面向能力的数据结构 44

3.4.2　对场景下类型的作用进行替换 46

3.5　设计模式和语言特征 48

3.6　异常态 49

3.7　前端的其他特征 50

3.7.1　弱类型和动态类型 51

3.7.2　Array的组合运算 51

3.8　案例和代码 52

3.8.1　状态和副作用示例 52

3.8.2　过程和高阶抽象示例 55

3.8.3　循环和递归示例 56

3.8.4　类型检测和动态类型 60

3.8.5　异常态和容错处理 61

3.9　本章小结 63

第4章　Monadic编程和它的范畴理论 64

4.1　Monadic编程简介 64

4.2　函子和它的基础实例 65

4.3　应用函子 66

4.4　Maybe实现类 68

4.5　Either函子 71

4.6　幺半群 73

4.7　单子：自函子范畴上的幺半群 75

4.8　函数响应式编程 77

4.9　案例和代码 78

4.9.1　函子示例 78

4.9.2　响应式编程的简单示例 80

4.10　本章小结 81

第5章　函数式工具形态演进 82

5.1　jQuery和链式调用 82

5.2　管道和组合 84

5.3　Promise编码 87

5.4　Async/Await函数 89

5.5　MobX、RxJS和响应式编程 90

5.6　函数式的并发保障 92

5.7　案例和代码 94

5.7.1　链式调用和开发中调试 94

5.7.2　Pipeline和切面编程 95

5.7.3　Async/Await异步和异常 96

5.8　本章小结 97

第6章　从RxJS看事件流和函数响应式编程 99

6.1　RxJS的产生和事件流编程演进 99

6.1.1　RxJS的产生 100

6.1.2　事件流响应演变 100

6.2　核心类 103

6.3　“红包雨掉落”代码改造 106

6.4　事件流相关主要方法举例 110

6.5　案例和代码 114

6.6　本章小结 118

第7章　React Hooks和它的函数式考量 120

7.1　无状态组件和状态管理 120

7.1.1　现代前端框架和无状态组件 121

7.1.2　状态管理 125

7.2　React Hooks的原理和目的 128

7.3　React Hooks的实践和方向 130

7.4　案例和代码 133

7.5　本章小结 137

第8章　函数式和前端复杂度总结 138

8.1　前端开发的复杂度 138

8.1.1　前端开发者可以介入的时机 139

8.1.2　纯粹的运算复杂度 142

8.1.3　前端和相邻领域复杂度的区别 142

8.2　函数式在前端的积极作用 144

8.2.1　厘清运行时的状态变化 145

8.2.2　加强编程的工程指标 145

8.2.3　简化编码 146

8.3　编码之上的工作 146

8.3.1　软件完整度和现实的工作状态 146

8.3.2　前端迭代的呼应 147

8.3.3　编码外的更多规划 148

8.4　他山之石 148

8.4.1　前端即是客户端 148

8.4.2　更充分地利用前端能力 149

8.4.3　工程研发 149

8.5　案例和代码 151

8.5.1　前端开发复杂度 151

8.5.2　运行时监控和整体工程特性 155

8.6　本章小结 158

第9章　简易关卡引擎项目补充 159

9.1　需求清单 159

9.2　项目和文件结构 161

9.3　开发者和用户交互 162

9.4　整体服务和引擎生命周期 162

9.5　代码清单 163

9.5.1　主页需求实现 163

9.5.2　关卡页需求实现 167

9.5.3　统计分数等数据服务逻辑 176

9.5.4　体力模式等前端业务逻辑 178

9.5.5　自定义关卡详情页 181

9.5.6　广告页和活动页 183

9.6　更多扩展 186

9.7　本章小结 186

【为何写作本书】

本书的关键词是前端开发和函数式，重点阐述函数式在Web前端的重要作用和演进。

Web前端系统的核心逻辑已经从简单的静态展示和交互，演进为面向用户的多入口交互响应，以及随之产生的事件流。近代软件系统主流的命令式编程和信息数据管理模式，有时已不能满足当前场景的前端开发需求，而函数式非常契合这些需求，因而受到前端开发者的欢迎。

近年来，随着前端工程化发展逐渐成熟，前端开发领域的大部分工具和框架都引入了函数式的特性，并借鉴了其中的一些思想。这些框架和工具涵盖了早期工具库，如jQuery、Lodash，以及近几年互联网公司普遍使用的React、状态管理等，使得函数式成为Web开发领域重要的技术。

本书旨在和大家分享、探讨前端函数式的知识，尤其是结构化的前端函数式知识、前端受到函数式影响的内容以及背后一些相关领域的知识，希望能帮助大家系统地掌握前端函数式开发方法。

【本书主要内容】

本书从逻辑上分为三部分。

*第一部分（第1～3章）是全书的理论基础。

第1章介绍编程语言中的编程范式以及各种范式在前端的体现。第2章介绍函数式的常见概念。这两章的内容对于基础较好的读者来说可能是老生常谈，但是我加入了一些前端示例和个人理解，也算是老坛装新酒。

第3章介绍函数式思维的相关内容，帮助读者在使用函数式框架工具时从传统命令式编程的思考方式，向更契合函数式前端开发的思考方式转变，比如对循环的实现、数据结构的差别、对异常态和类型的处理等。

*第二部分（第4～7章）以实际的工具内容为主，分别介绍前端函数式的几种重要形态。

第4章介绍Monadic编程，这是函数式的一种经典工程实现，也在前端衍生了一些工具。在这一章我们将学习工程理论的几个基础单元，如函子、幺半群，并进行一些实用性的分析和推导。

第5章从jQuery出发，介绍函数式工具形态演进。很多研发工程师对前端的理解都停留在jQuery的经典时代，本章从函数式“形”的角度出发，介绍前端函数式工具。

第6章和第7章将介绍前端函数式的两个热门框架工具——RxJS和React Hooks，展示它们的基本原理以及演进过程。

*第三部分（第8章和第9章）是本书的总结部分。

第8章回归初心，探讨前端开发的核心复杂度，以及函数式在前端开发中的贡献。希望读者能像借鉴函数式思想一样，多借“他山之石”，在前端和其他研发领域成为更出色的工程师。

第9章梳理本书项目的整体情况，并展现一些核心代码，帮助读者通过代码完成知识的落地和沉淀。

【本书读者对象】

本书内容围绕前端开发领域，列举的实例多基于前端框架和工具等方面，所以更适合中高级前端开发者和对前端生态有所了解的程序员阅读。

【本书内容特色】

本书除了介绍前端和函数式的基本概念及工具，还配有较多示例，可以帮助读者理解这些理论内容和工具并应用到实践中。除此之外，我将个人对这些理论演进的理解融入本书，希望能对读者建立知识体系有一定的帮助。