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

相关推荐
前端小巷子11 分钟前
Webpack 5模块联邦
前端·javascript·面试
前端双越老师12 分钟前
为何前端圈现在不关注源码了?
面试·前端框架·源码
玲小珑14 分钟前
Next.js 教程系列(十九)图像优化:next/image 与高级技巧
前端·next.js
晓得迷路了15 分钟前
栗子前端技术周刊第 91 期 - 新版 React Compiler 文档、2025 HTML 状态调查、Bun v1.2.19...
前端·javascript·react.js
江城开朗的豌豆21 分钟前
Vue和React中的key:为什么列表渲染必须加这玩意儿?
前端·vue.js·面试
江城开朗的豌豆27 分钟前
前端路由傻傻分不清?route和router的区别,看完这篇别再搞混了!
前端·javascript·vue.js
pengzhuofan30 分钟前
Web开发系列-第0章 Web介绍
前端
小鱼人爱编程39 分钟前
Java基石--反射让你直捣黄龙
前端·spring boot·后端
JosieBook2 小时前
【web应用】如何进行前后端调试Debug? + 前端JavaScript调试Debug?
前端·chrome·debug
LBJ辉2 小时前
2. Webpack 高级配置
前端·javascript·webpack