Flux架构

作　者：	Adam Boduch 段金辰
出版社：	电子工业出版社
丛编项：
版权说明：	本书为公共版权或经版权方授权，请支持正版图书
标　签：	计算机?网络软件工程及软件方法学

ISBN	出版时间	包装	开本	页数	字数
未知	暂无	暂无	未知	0	暂无

作者简介

　　AdamBoduch从事大规模JavaScript开发已经将近10年。在转行前端之前，他曾使用Python和Linux编写过几个大规模的云计算产品。Adam对复杂度有一些了解，在真实世界的软件系统和应对其扩展上的挑战方面具有实际经验。　他写过几本JavaScript的书，包括《JavaScript并发》（JavaScriptConcurrency），他在研究用户体验创新和高性能方面充满热情。　本书由段金辰、马雪琴、李胜、马飞、孙辉翻译。　段金辰从事软件开发大约10年，曾供职于微软、阿里巴巴等世界知名公司，参与或主持过多项大型软件系统的架构和开发，涉及基础类库、云、Web前端、On-premises服务、App等众多方向，精通包括JavaScript在内的多种编程语言。　马雪琴，研究生就读于华中科技大学通信工程专业，其间有幸接触到前端、数据可视化等方向，并且对这些技术感到相见恨晚。现就职于阿里巴巴集团客户体验事业群前端开发团队。平时喜欢宅着看书，学着画画，更喜欢去外面走走看看，安静而不安分。　李胜，前端开发工程师。就职于阿里巴巴集团客户体验事业群前端开发团队，曾在饿了么大前端部门参与实习，热衷于追寻前沿技术。除前端相关技术以外，对游戏开发，Go以及其他后端技术也有一定了解。平时的爱好有动漫和科幻。　马飞，阿里巴巴前端工程师，半路出家进入了互联网行业，热衷于Web技术，同时对工业控制，ARM嵌入式开发有一定的研究，喜欢旅行、电子游戏、运动以及摄影。其微博为@*亚伦。　孙辉，现为阿里巴巴的一只“前端攻城狮”，有多年的物联网及Web前端开发经验。爱美食、爱摄影，热爱一切富有创造性的事物。

内容简介

Flux 是一套架构模型，将Web 应用的各个主要功能以组件的形式进行划分，并进一步划分子组件。而各组件又以动作、存储器和视图来进行架构分层。整体采用单向数据流的形式进行事件的响应，各组件间也强制按照单向数据流进行相互影响，直至数据流结束。在本书中，先向大家介绍了Flux 是什么，以及简单展示了其基本构建模式。然后从动作、存储器、视图、分发器等核心概念，更为详细地阐述了Flux的架构模式。最后，介绍了Flux 库、测试工具和其对其他相关技术栈的影响。本书适用于前端开发者，以及希望对Flux 架构有深入了解的人群。

图书目录

前言．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． XIX

1 Flux是什么．．．．．．．．．．．．．．．．．．．． 1

Flux是一套模式．．．．．．．．．．．．．．．．．．．．．．．．． 1

数据入口．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 1

状态管理．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 2

保持同步更新．．．．．．．．．．．．．．．．．．．．． 3

信息架构．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 4

Flux并不是一个框架．．．．．．．．．．．．．．．．． 4

Flux的设计思路问题解决方案． 5

数据流向．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 5

可回溯性．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 7

通知的一致性．．．．．．．．．．．．．．．．．．．．． 8

简捷的架构分层．．．．．．．．．．．．．．．．． 9

低耦合渲染．．．．．．．．．．．．．．．．．．．．．．．．． 9

Flux组件．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 10

动作．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 10

分发器．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 11

存储器．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 12

视图．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 12

安装 Flux软件包．．．．．．．．．．．．．．．．．．．．．． 14

小结．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 16

2 Flux的原则．．．．．．．．．．．．．．．．．． 17

MV*所面临的挑战．．．．．．．．．．．．．．．．．．． 17

关注点分离．．．．．．．．．．．．．．．．．．．．．．． 18

级联更新．．．．．．．．．．．．．．．．．．．．．．．．．．． 19

模型更新的职责．．．．．．．．．．．．．．． 20

单向数据．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 21

从开始到结束．．．．．．．．．．．．．．．．．．． 22

无毒无害．．．．．．．．．．．．．．．．．．．．．．．．．．． 23

显式优于隐式．．．．．．．．．．．．．．．．．．．．．．．．．．． 23

暗藏隐患的更新．．．．．．．．．．．．．．． 24

集中修改状态的地方．．．．．．． 26

太多动作？．．．．．．．．．．．．．．．．．．．．．．． 26

分层优于嵌套．．．．．．．．．．．．．．．．．．．．．．．．．．． 27

多组件嵌套．．．．．．．．．．．．．．．．．．．．．．． 27

嵌套深度与副作用．．．．．．．．．．． 28

数据流和分层．．．．．．．．．．．．．．．．．．． 28

应用数据和界面状态．．．．．．．．．．．．．．． 29

两个相同的东西．．．．．．．．．．．．．．． 29

强耦合转换．．．．．．．．．．．．．．．．．．．．．．． 30

功能中心化．．．．．．．．．．．．．．．．．．．．．．． 31

小结．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 31

3 搭建骨架架构．．．．．．．．．．．．．．． 32

总体组织．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 32

目录结构．．．．．．．．．．．．．．．．．．．．．．．．．．． 33

依赖管理．．．．．．．．．．．．．．．．．．．．．．．．．．． 33

信息设计．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 34

用户不需要了解模型．．．．．．． 34

存储器映射用户看到的内容．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 35

和哪些东西协同工作．．．．．．． 36

在动作中注入存储器．．．．．．．．．．．．．．． 36

获取 API数据．．．．．．．．．．．．．．．．．．． 36

改变 API资源状态．．．．．．．．．．． 42

本地动作．．．．．．．．．．．．．．．．．．．．．．．．．．． 47

存储器和功能域．．．．．．．．．．．．．．．．．．．．．．． 50

梳理顶层功能．．．．．．．．．．．．．．．．．．． 50

无关紧要的 API数据．．．．．．． 51

构造存储器数据．．．．．．．．．．．．．．． 53

模拟视图．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 53

找寻失去的数据．．．．．．．．．．．．．．． 53

定位动作．．．．．．．．．．．．．．．．．．．．．．．．．．． 54

端到端场景．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 56

动作清单．．．．．．．．．．．．．．．．．．．．．．．．．．． 56

存储器清单．．．．．．．．．．．．．．．．．．．．．．． 56

视图清单．．．．．．．．．．．．．．．．．．．．．．．．．．． 57

小结．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 57

4 创建动作．．．．．．．．．．．．．．．．．．．．．． 58

动作的名称和常量．．．．．．．．．．．．．．．．．．． 58

动作命名约定．．．．．．．．．．．．．．．．．．． 58

静态动作数据．．．．．．．．．．．．．．．．．．． 59

组织动作常量．．．．．．．．．．．．．．．．．．． 62

特性动作生成器．．．．．．．．．．．．．．．．．．．．．．． 63

什么时候需要模块化．．．．．．． 63

模块化架构．．．．．．．．．．．．．．．．．．．．．．． 64

模拟数据．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 65

模拟已存在的接口．．．．．．．．．．． 65

模拟新接口．．．．．．．．．．．．．．．．．．．．．．． 66

替换动作生成器．．．．．．．．．．．．．．． 70

状态动作生成器．．．．．．．．．．．．．．．．．．．．．．． 71

整合其他系统．．．．．．．．．．．．．．．．．．． 72

web socket连接．．．．．．．．．．．．．．．． 73

参数化动作生成器．．．．．．．．．．．．．．．．．．． 76

删除多余的动作．．．．．．．．．．．．．．． 76

保持动作的通用性．．．．．．．．．．． 77

创建衍生动作．．．．．．．．．．．．．．．．．．． 80

小结．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 81

5 异步动作．．．．．．．．．．．．．．．．．．．．．． 83

保持 Flux同步．．．．．．．．．．．．．．．．．．．．．．．．．． 83

为什么要同步．．．．．．．．．．．．．．．．．．． 83

压缩异步行为．．．．．．．．．．．．．．．．．．． 84

异步动作语义．．．．．．．．．．．．．．．．．．． 85

创建 API调用．．．．．．．．．．．．．．．．．．．．．．．．．．． 87

API是常见的情况．．．．．．．．．．．． 87

API调用和用户交互．．．．．．．． 88

结合 API调用．．．．．．．．．．．．．．．．．．．．．．．．．．． 92

复杂的动作生成器．．．．．．．．．．． 93

组合动作生成器．．．．．．．．．．．．．．． 96

返回 promise ．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 97

不含 promise的同步．．．．．．．． 98

组织异步行为．．．．．．．．．．．．．．．．．．． 99

错误处理．．．．．．．．．．．．．．．．．．．．．．．．． 101

小结．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 103

6 改变 Flux存储器的状态．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．105

适应不断变化的信息．．．．．．．．．．．．． 105

变化的 API数据．．．．．．．．．．．．． 105

变化的功能．．．．．．．．．．．．．．．．．．．．． 106

受影响的组件．．．．．．．．．．．．．．．．． 107

减少重复的存储器数据．．．．．．．．． 107

通用存储器数据．．．．．．．．．．．．． 107

注册通用存储器．．．．．．．．．．．．． 108

结合通用和专用数据．．．．． 112

处理存储器的依赖关系．．．．．．．．． 116

等待存储器．．．．．．．．．．．．．．．．．．．．． 116

数据依赖．．．．．．．．．．．．．．．．．．．．．．．．． 118

UI依赖．．．．．．．．．．．．．．．．．．．．．．．．．．．． 119

视图的更新顺序．．．．．．．．．．．．．．．．．．．．． 125

存储器的注册顺序．．．．．．．．． 125

视图渲染的优先级排序． 125

处理存储器复杂度．．．．．．．．．．．．．．．．． 126

存储器太多．．．．．．．．．．．．．．．．．．．．． 126

反思功能域．．．．．．．．．．．．．．．．．．．．． 126

小结．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 127

7 视图信息．．．．．．．．．．．．．．．．．．．．．128

传递视图数据．．．．．．．．．．．．．．．．．．．．．．．．． 128

change事件中的数据．．．．． 128

视图决定何时渲染．．．．．．．．． 132

保持视图无状态．．．．．．．．．．．．．．．．．．．．． 135

UI状态属于存储器．．．．．．．． 135

不用查询 DOM ．．．．．．．．．．．．．．． 135

视图的职责．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 136

渲染存储器数据．．．．．．．．．．．．． 136

子视图结构．．．．．．．．．．．．．．．．．．．．． 137

用户交互．．．．．．．．．．．．．．．．．．．．．．．．． 138

在 Flux中使用 ReactJS ．．．．．．．．．． 138

设置视图状态．．．．．．．．．．．．．．．．． 139

组成视图．．．．．．．．．．．．．．．．．．．．．．．．． 143

响应事件．．．．．．．．．．．．．．．．．．．．．．．．． 146

路由和动作．．．．．．．．．．．．．．．．．．．．． 149

小结．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 154

8 信息的生命周期．．．．．．．．．．．155

组件生命周期难题．．．．．．．．．．．．．．．．． 155

回收不再使用的资源．．．．． 156

隐藏依赖．．．．．．．．．．．．．．．．．．．．．．．．． 157

内存泄漏．．．．．．．．．．．．．．．．．．．．．．．．． 157

Flux结构是静态的．．．．．．．．．．．．．．．．． 158

单例模式．．．．．．．．．．．．．．．．．．．．．．．．． 158

与模型进行比较．．．．．．．．．．．．． 161

静态视图．．．．．．．．．．．．．．．．．．．．．．．．． 161

扩展信息．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 165

如何很好地扩展．．．．．．．．．．．．． 165

昀小化所需信息．．．．．．．．．．．．． 169

扩展的动作．．．．．．．．．．．．．．．．．．．．． 169

闲置的存储器．．．．．．．．．．．．．．．．．．．．．．．．． 170

删除存储器数据．．．．．．．．．．．．． 170

优化闲置的存储器．．．．．．．．． 173

保持存储器数据．．．．．．．．．．．．． 174

小结．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 182

9 不可变的存储器．．．．．．．．．．．183

放弃隐藏的更新．．．．．．．．．．．．．．．．．．．．． 183

如何破坏 Flux架构．．．．．．．． 184

获取存储器数据．．．．．．．．．．．．． 186

一切皆不可变．．．．．．．．．．．．．．．．． 187

强制执行单向数据流．．．．．．．．．．．．． 187

纵横交错的单向数据流． 188

过多的存储器？．．．．．．．．．．．．． 189

没有足够的动作．．．．．．．．．．．．． 189

强制不可变性．．．．．．．．．．．．．．．．． 190

不可变数据的成本．．．．．．．．．．．．．．．．． 195

垃圾回收是昂贵的．．．．．．．．． 196

批量转换．．．．．．．．．．．．．．．．．．．．．．．．． 196

抵消成本．．．．．．．．．．．．．．．．．．．．．．．．． 197

使用 Immutable．js ．．．．．．．．．．．．．．．．．．． 197

不可变列表和映射．．．．．．．．． 198

不可变的转换．．．．．．．．．．．．．．．．． 201

变化检测．．．．．．．．．．．．．．．．．．．．．．．．． 204

小结．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 208

10 实现分发器．．．．．．．．．．．．．．．．209

抽象分发器接口．．．．．．．．．．．．．．．．．．．．． 209

存储器的注册地．．．．．．．．．．．．． 209

分发负载．．．．．．．．．．．．．．．．．．．．．．．．． 210

依赖关系的处理．．．．．．．．．．．．． 211

分发器所面临的挑战．．．．．．．．．．．．． 212

教育的目的．．．．．．．．．．．．．．．．．．．．． 212

单例模式的分发器．．．．．．．．． 212

手动注册存储器．．．．．．．．．．．．． 213

容易出错的依赖管理．．．．． 213

构建分发器模块．．．．．．．．．．．．．．．．．．．．． 214

封装存储器的引用．．．．．．．．． 214

处理依赖．．．．．．．．．．．．．．．．．．．．．．．．． 215

分发动作．．．．．．．．．．．．．．．．．．．．．．．．． 217

优化存储器的注册．．．．．．．．．．．．．．．．． 220

基础存储器类．．．．．．．．．．．．．．．．． 221

一个动作方法．．．．．．．．．．．．．．．．． 222

小结．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 226

11 可替代的视图组件．．．．．227

ReactJS是适合 Flux的．．．．．．．．．． 227

ReactJS是单向的．．．．．．．．．．． 227

重新渲染数据很简单．．．．． 229

短小精悍的代码．．．．．．．．．．．．． 229

ReactJS的缺点．．．．．．．．．．．．．．．．．．．．．．． 230

虚拟 DOM和内存．．．．．．．．．． 230

JSX和标记语言．．．．．．．．．．．．．． 231

库锁定．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 232

使用 jQuery和 Handlebars ．．．．． 232

为什么是 jQuery和 Handlebars ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 232

渲染模板．．．．．．．．．．．．．．．．．．．．．．．．． 233

组合视图．．．．．．．．．．．．．．．．．．．．．．．．． 236

事件处理．．．．．．．．．．．．．．．．．．．．．．．．． 238

使用 VanillaJS ．．．．．．．．．．．．．．．．．．．．．．．．． 244

对可选择性保持开放．．．．． 244

迁移到 React ．．．．．．．．．．．．．．．．．．． 244

新的技术热点．．．．．．．．．．．．．．．．． 245

小结．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 245

12 使用 Flux库．．．．．．．．．．．．．．247

实现核心 Flux组件．．．．．．．．．．．．．．．． 247

自定义分发器．．．．．．．．．．．．．．．．． 247

实现一个基本的存储器． 248

创建动作．．．．．．．．．．．．．．．．．．．．．．．．． 248

实现中遇到的痛点．．．．．．．．．．．．．．．．． 249

分发异步动作．．．．．．．．．．．．．．．．． 249

划分存储器．．．．．．．．．．．．．．．．．．．．． 249

使用 Alt ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 250

核心理念．．．．．．．．．．．．．．．．．．．．．．．．． 250

创建存储器．．．．．．．．．．．．．．．．．．．．． 251

声明动作生成器．．．．．．．．．．．．． 253

监听状态变化．．．．．．．．．．．．．．．．． 254

视图渲染以及分发动作． 255

使用 Redux ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 258

核心思想．．．．．．．．．．．．．．．．．．．．．．．．． 258

状态转换器和存储器．．．．． 259

Redux动作．．．．．．．．．．．．．．．．．．．．．． 262

渲染组件和分发动作．．．．． 264

小结．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 269

13 测试和性能．．．．．．．．．．．．．．．．270

你好，Jest ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 270

测试动作生成器．．．．．．．．．．．．．．．．．．．．． 272

同步函数．．．．．．．．．．．．．．．．．．．．．．．．． 273

异步函数．．．．．．．．．．．．．．．．．．．．．．．．． 274

测试存储器．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 277

测试存储器监听器．．．．．．．．． 277

测试初始状态．．．．．．．．．．．．．．．．． 280

性能目标．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 283

用户感知的性能．．．．．．．．．．．．． 283

测量的性能．．．．．．．．．．．．．．．．．．．．． 284

性能需求．．．．．．．．．．．．．．．．．．．．．．．．． 284

分析工具．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 285

异步动作．．．．．．．．．．．．．．．．．．．．．．．．． 285

存储器内存．．．．．．．．．．．．．．．．．．．．． 285

CPU占用．．．．．．．．．．．．．．．．．．．．．．．． 286

基准测试工具．．．．．．．．．．．．．．．．．．．．．．．．． 286

代码的基准测试．．．．．．．．．．．．． 286

状态转换．．．．．．．．．．．．．．．．．．．．．．．．． 287

小结．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 290

14 Flux和软件开发的生命周期．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．291

Flux的开放性解释．．．．．．．．．．．．．．．．． 291

实现选项一：只是模式． 292

实现选项二：使用 Flux库．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 292

实现并使用自己的 Flux ． 292

开发方法论．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 293

在 Flux初期要考虑的事情．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 293

成熟的 Flux应用．．．．．．．．．．．． 294

从 Flux中获得的启示．．．．．．．．．．．． 294

单向数据流．．．．．．．．．．．．．．．．．．．．． 295

信息设计为王．．．．．．．．．．．．．．．．． 295

打包 Flux组件．．．．．．．．．．．．．．．．．．．．．．．． 295

完整独立的 Flux ．．．．．．．．．．．．． 296

可安装的软件包．．．．．．．．．．．．． 296

可安装的 Flux组件．．．．．．．． 296

小结．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 304