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

相关推荐
星语卿28 分钟前
Vuetify:构建优雅Vue应用的Material Design组件库
前端·javascript·vue.js
roman_日积跬步-终至千里1 小时前
【系统架构设计(25)】Web应用服务器与现代架构
前端·架构·系统架构
yshhuang1 小时前
在Windows上搭建开发环境
前端·后端
littleplayer1 小时前
Redux在iOS中的使用
前端
跟橙姐学代码1 小时前
Python里的“管家婆”:带你玩转os库的所有神操作
前端·python·ipython
jingling5551 小时前
uniapp | 快速上手ThorUI组件
前端·笔记·前端框架·uni-app
UrbanJazzerati1 小时前
可拖拽的进度条组件实战:实现思路与Demo
前端·面试
Cache技术分享1 小时前
188. Java 异常 - Java 异常处理规范
前端·后端
不一样的少年_1 小时前
Vue3 后台分页写腻了?我用 1 个 Hook 删掉 90% 重复代码(附源码)
前端·vue.js·设计模式