Flux架构

前言 XIX
1 Flux是什么 1
Flux是一套模式 1
-- 数据入口 1
-- 状态管理 2
-- 保持同步更新 3
· · · · · · (更多)

前言 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
· · · · · · (收起)