Angular18 RXJS - 爱码网

1 RX

　　全称是 Reactive Extensions，它是微软开发并维护的基于 Reactive Programming 范式实现的一套工具库集合；RX结合了观察者模式、迭代器模式、函数式编程来管理事件序列

　　RX官方文档：点击前往　　

2 RXJS

　　RXJS就是RX在JavaScript层面上的实现；RxJS 是一个库，它通过使用 observable 序列来编写异步和基于事件的程序。它提供了一个核心类型 Observable，附属类型 (Observer、 Schedulers、 Subjects) 和受 [Array#extras] 启发的操作符 (map、filter、reduce、every, 等等)，这些数组操作符可以把异步事件作为集合来处理。

　　RXJS官方文档：点击前往

3 RXJS中解决异步事件管理的一些基本概念

　　3.1 Observable

　　　　可观察对象：表示一个可调用的未来值或者事件的集合

　　　　官方文档：点击前往

　　3.2 Observer

　　　　观察者对象：一个回调函数集合，它知道怎么去监听被可观察对象Observable发送的值

　　　　官方文档：点击前往

　　3.3 Subscription

　　　　订阅：表示一个可观察对象Observable的执行，主要用于取消可观察对象Observable执行

　　　　官方文档：点击前往

　　3.4 Operators

　　　　操作符：就是一些义函数式编程来处理可观察对象Observable，使用像 map、filter、concat、flatMap 等这样的操作符来处理集合。

　　　　官方文档：点击前往

　　3.5 Subject

　　　　相当于 EventEmitter，并且是将值或事件多路推送给多个 Observer 的唯一方式。

　　　　官方文档：点击前往　　

　　3.6 Schedulers

　　　　用来控制并发并且是中央集权的调度员，允许我们在发生计算时进行协调，例如 setTimeout 或 requestAnimationFrame 或其他。

　　　　官方文档：点击前往

4 简单实例

　　技巧01：利用 jsbin 这个在线的JS编辑器作为测试编辑器，连接地址 -> 点击前往

　　技巧02：本博文使用JS版本都是ES6

　　4.1 单击按钮实例

　　　　4.1.1 在HTML中通过script标签引入RXJS库　

<script src="https://unpkg.com/@reactivex/rxjs@5.0.3/dist/global/Rx.js"></script>

　　　　4.1.2 在HTML中添加一个button标签　　　

<button id="btn" >单击查看效果</button>

　　　　4.1.2 通过JS实现RXJS编程　　　

const btn = document.getElementById('btn');
const btn$ = Rx
             .Observable
             .fromEvent(btn, 'click');
btn$.subscribe(value => console.log('你点击了按钮哟'));

　　　　代码解释：

　　　　　　第一行：获取ID为“btn”的DOM节点

　　　　　　第二行：将获取到的DOM节点的单机事件添加到一个可观察对象Observable的序列中

　　　　　　第三行：订阅可观察对象Observable，当对应DOM节点的单机事件被触发时就会执行相应的操作（本实例是打印出一些信息）

　　　　4.1.3 效果展示

　　　　　　 Angular18 RXJS

　　　　4.1.4 代码汇总

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <button id="btn" >单击查看效果</button>
 
  <script src="https://unpkg.com/@reactivex/rxjs@5.0.3/dist/global/Rx.js"></script>
</body>
</html>

HTML