Rx.js

Rx.js官网： 可以用来处理非同步或事件的Javascript函式库

非同步：Ajax/XHRL(XMLHttpRequest) seTimeout/setInterval Promise

事件: 各种Dom事件(click,keyup,mousemove,...)

css动画(transition)

Rx.js核心

• observable:可观察的事件:代表一组未来即将产生的事件(被观察的事件)

• observer: 用来接收观察结果的一个事件一般是(function(){})有3个属性(next,error,complete)

• subscription：订阅 代表正在执行observer/observable的执行个体（用来取消订阅）

• operators： 用来处理事件的集合,常见包含(map,filter,concat...)

• subject: 主体物件 用来广播收到事件给多个observer,(一对多)

• schedulers: 控制器 用来集中管理调度多重事件之间的事件,控制事件并发的情况

code.png

取消订阅

 var sub = rxjs.interval(500)

      .pipe(rxjs.operators.take(4))
      
      .subscribe(console.log) 
 sub.unsubscribe() //取消订阅

es2015写法
解构赋值

const { interval } = rxjs;
const {take} = rxjs.operators;

interval(100)
   .pipe(take(5))
      
   .subscribe(console.log) 

ESM(ES Module)写法

···
import { interval } from 'rxjs';
import { take } from 'rxjs/operators'
interval(100)
.pipe(take(5))

.subscribe(console.log)
···
处理事件

      // 1.建立可观察的observable事件
       var clicks$  = rxjs.fromEvent(document,'click');
      //  2.建立观察者事件(observer)
       var observer = {next:(x) => console.log(x)};
      //  3.建立订阅事件(订阅observable事件,并传入observer观察者事件)
       var sub$ = click$.subscribe(observer);
       4.取消订阅subscription事件
       sub$.unsubscribe()
  //-------------------------简化版
       1.var clicks$  = rxjs.fromEvent(document,'click');

       3.var sub$ = clicks$.subscribe(x=>console.log(x));

       4.sub$.unsubscribe()

过滤事件

     // 1.建立可观察的observable事件
       var clicks$  = rxjs.fromEvent(document,'click');
     //  2.引入filter
       const {filter} rxjs.operators;
     // 3.建立订阅事件(订阅observable事件,并自动建立观察者事件)
       var sub$ = click$.subscribe((x)=>console.log(x));
     //  4.取消订阅subscription事件
       sub$.unsubscribe()

可视化工具 i 可视化工具 ii理解Rx.js各种方法