前端架构: 脚手架工具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源码中的处理,这里不过多叙述

相关推荐
切糕师学AI7 分钟前
如何建立针对 .NET Core web 程序的线程池的长期监控
java·前端·.netcore
F2E_Zhangmo3 小时前
基于cornerstone3D的dicom影像浏览器 第三章 拖拽seriesItem至displayer上显示第一张dicom
前端·javascript·cornerstone·cornerstone3d·cornerstonejs
gnip8 小时前
Jst执行上下文栈和变量对象
前端·javascript
excel8 小时前
🐣 最简单的卷积与激活函数指南(带示例)
前端
醉方休9 小时前
npm/pnpm软链接的优点和使用场景
前端·npm·node.js
拉不动的猪9 小时前
简单回顾下Weakmap在vue中为何不能去作为循环数据源,以及替代方案
前端·javascript·vue.js
How_doyou_do9 小时前
数据传输优化-异步不阻塞处理增强首屏体验
开发语言·前端·javascript
奇舞精选9 小时前
超越Siri的耳朵:ASR与Whisper零代码部署实战指南
前端·人工智能·aigc
奇舞精选9 小时前
Nano Banana 如何为前端注入 AI 控制力
前端·aigc
一支鱼9 小时前
基于 Node.js 的短视频制作神器 ——FFCreator
前端·node.js·音视频开发