前端架构: 脚手架工具rxjs的快速上手应用

rxjs

• rxjs 是一个异步的库和Promise是非常的相似

• 文档：https://www.npmjs.com/package/rxjs

• Weekly Downloads 44,474,389 (动态数据)

• 说明这个库也是非常的流行

• 安装 $ npm i -S rxjs

• 使用

  import { range, filter, map } from 'rxjs';
  
  range(1, 200)
    .pipe(
      filter(x => x % 2 === 1),
      map(x => x + x)
    )
    .subscribe(x => console.log(x));
  

  • range 框定了 1 ~ 200 的范围
  • pipe 对这一系列数据进行处理
  • filter 把对2取余得到1的余数的数字挑选出来
  • map 把挑选后的数据再次加工，进行加倍处理
  • subscribe 函数监听x的每次变化

• 以上可以修改成

    import { range, filter, map } from 'rxjs';
  
    const pipe = range(1, 200)
      .pipe(
        filter(x => x % 2 === 1),
        map(x => x + x)
      );
    pipe.subscribe(x => console.log(x));
    // pipe.subscribe(x => console.log(x + 1));
  

  • 这样处理，把数据处理和最终展示彻底分离做了一个响应式
  • 这样可以基于一个数据源做多重的处理

• 这个库看起来并不复杂，但是会给我们带来很多方便

• 比如在inqury源码中的处理，这里不过多叙述