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

rxjs

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

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

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

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

  • 安装 $ npm i -S rxjs

  • 使用

    js 复制代码
    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的每次变化
  • 以上可以修改成

    js 复制代码
      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源码中的处理,这里不过多叙述

相关推荐
iOS阿玮1 分钟前
别等了,今天是Xcode15时代的最后一天。
前端·app·apple
沙尘暴炒饭7 分钟前
vuex持久化vuex-persistedstate,存储的数据刷新页面后导致数据丢失
开发语言·前端·javascript
2401_8370885010 分钟前
CSS清楚默认样式
前端·javascript·css
zwjapple21 分钟前
React 的 useEffect 清理函数详解
前端·react.js·前端框架
Jewel10531 分钟前
如何配置Telegram Mini-App?
前端·vue.js·app
s11show_1631 小时前
hz修改后台新增keyword功能
android·java·前端
二个半engineer1 小时前
Web常见攻击方式及防御措施
前端
co松柏1 小时前
程序员必备——AI 画技术图技巧
前端·后端·ai编程
前端大白话2 小时前
前端人速码!10个TypeScript神仙技巧,看完直接拿捏项目实战
前端·javascript·typescript
五号厂房2 小时前
React 异步回调中产生的闭包问题剖析及解决
前端