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

相关推荐
懒大王爱吃狼42 分钟前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風5 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫5 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦6 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子6 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山7 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享7 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf9 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨9 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL9 小时前
npm入门教程1:npm简介
前端·npm·node.js