RxJS是JavaScript响应式编程主流库,以“数据流”为核心思维模型,将异步事件等视为随时间推送值的流,通过Observable、Observer、Subscription三大基石和管道式操作符实现声明式处理。

RxJS 是 JavaScript 响应式编程(Reactive Programming)最主流的实现库,它的基础不是语法糖或新语言,而是一套围绕“数据流”构建的思维模型和工具集。核心就一句话:把异步事件、用户操作、HTTP 请求、定时器等一切可变的东西,都看作一条随时间推送值的“流”,然后用声明式方式去创建、组合、转换和监听它。
响应式编程的本质是“以流的方式思考”
传统命令式代码中,变量赋值是一次性的:
let a = b + c; → 改变 b 或 c,a 不会自动更新。
响应式编程里,a 可以“绑定”到 b 和 c 的变化上,像电子表格一样自动重算。这种“变化传播”能力,正是处理现代 Web 应用中频繁更新的状态(比如搜索框实时过滤、多人协作光标同步、WebSocket 消息流)的关键优势。
RxJS 的三个基石概念
Observable(可观察对象):数据流的源头。它不主动执行,只定义“什么会来、何时来、怎么来”。可以是点击事件、API 响应、定时器、甚至数组或 Promise。
Observer(观察者):一个含 next()、error()、complete() 方法的对象,负责接收 Observable 推送的值并作出响应。
Subscription(订阅):调用 subscribe() 后返回的对象,代表一次监听关系,可随时 .unsubscribe() 来释放资源、避免内存泄漏。
技术上面应用了三层结构,AJAX框架,URL重写等基础的开发。并用了动软的代码生成器及数据访问类,加进了一些自己用到的小功能,算是整理了一些自己的操作类。系统设计上面说不出用什么模式,大体设计是后台分两级分类,设置好一级之后,再设置二级并选择栏目类型,如内容,列表,上传文件,新窗口等。这样就可以生成无限多个二级分类,也就是网站栏目。对于扩展性来说,如果有新的需求可以直接加一个栏目类型并新加功能操作
操作符(Operators)是真正让 RxJS 强大的地方
它们不是魔法函数,而是对数据流的“管道式处理”——类似数组的 map/filter/reduce,但作用在时间维度上:
• 创建类:of(1,2,3)、from([1,2,3])、fromEvent(btn, 'click')、interval(1000)
• 转换类:map(x => x * 2)、pluck('name')、scan((acc, cur) => acc + cur, 0)
• 过滤类:filter(x => x > 5)、take(3)、debounceTime(300)
• 组合类:merge(), concat(), switchMap(), combineLatest()
为什么不用 Promise 或 async/await 就要学 RxJS?
Promise 适合“一次性”的异步任务(如登录请求),但它无法:
• 取消正在运行的请求(fetch 本身支持 abort,但 Promise 不封装这个)
• 处理持续发生的事件(比如鼠标移动、输入框输入)
• 轻松合并多个异步源(比如“用户输入 + 本地缓存 + 远程 API”三者任一更新就刷新视图”)
• 防抖、节流、重试、超时控制等都需要手动写逻辑;RxJS 把这些封装成一行操作符,比如:
input$.pipe(debounceTime(250), distinctUntilChanged(), switchMap(search => api.search(search)))
基本上就这些。不复杂但容易忽略:RxJS 的门槛不在 API,而在放弃“按顺序执行”的直觉,转而相信“只要定义好流和规则,系统自会推送结果”。










