RxJS的另外四种实现方式(后记)—— 同时实现管道和链式编程

Wesley13
• 阅读 718

目录

RxJS的另外四种实现方式(序)

RxJS的另外四种实现方式(一)——代码最小的库

RxJS的另外四种实现方式(二)——代码最小的库(续)

RxJS的另外四种实现方式(三)——性能最高的库

RxJS的另外四种实现方式(四)——性能最高的库(续)

RxJS的另外四种实现方式(五)——使用生成器实现

RxJS的另外四种实现方式(六)——使用Stream类实现

github地址

https://github.com/langhuihui/rx4rx

源码对应位置 |库|目录| |--|--| |极小库rx4rx-lite|/stdlib/ |最快库rx4rx-fast|/highlib/ |生成器库|/channel/ |基于Nodejs,Steam类|/nodelib/

几种库的实现对比总结(TS语法)

生产者

消费者

备注

RxJS

Observable

Observer

callbag

type callbag = (type:number,sink:callbag)=>void

callbag

type取值0,1,2

rx4rx-lite

(n:Next,c:Complete)=>Disposable

Next、Complete

type Next = (d:any)=>void;type Complete=(err?:Error)=>void;type Disposable=()=>void

rx4rx-fast

(sink:Sink)=>void

Sink

npm install fastrx

同时实现管道和链式编程原理

针对rx4rx-lite、rx4rx-fast 两个库,所有的生产者均为函数,操作符均为返回source:Observable => Observable的高阶函数。 故原生支持管道编程方式同callbag即pipe(ob,op1(……),op2(……),……,subscriber(……)) 如果用pipeline operatorb可以写成ob |> op1(……) |> op2(……) |> ……|>subscriber(……)

RxJS5或者更早的版本使用经典的链式编程即ob.op1(……).op2(……).subscribe(……)

那么如何使得两者兼得呢?这是就要让Proxy登场了,先看源码:

const rxProxy = {
    get: (target, prop) => (...args) => new Proxy(exports[prop](...args)(target), rxProxy)
}

exports.rx = new Proxy({}, {
    get: (target, prop) => (...args) => new Proxy(exports[prop](...args), rxProxy),
    set: (target, prop, value) => exports[prop] = value
})

我们导出了一个rx的Proxy对象,比如访问rx.of(1,2,3)。我们会得到什么呢? 首先我们会调用rx的get函数将“of”传入prop参数 得到一个函数

(...args)=>new Proxy(exports["of"](...args),rxProxy)

其中exports["of"]就是我们库里面定义的of生产者 然后将1,2,3传入这个函数得到

new Proxy(exports["of"](1,2,3),rxProxy)

其中exports["of"](1,2,3)就是相当于调用了原始库里面的of(1,2,3)

new Proxy(of(1,2,3),rxProxy)

这就是我们得到的新的Proxy 此时如果我们接着调用filter操作符:rx.of(1,2,3).filter(x=>x>1)

首先相当于调用了rxProxy里面的get方法,传入prop为“filter”,target为of(1,2,3) 得到

(...args) => new Proxy(exports["filter"](...args)(of(1,2,3)), rxProxy)

其中exports["filter"]就是原始库里面的filter操作符,然后传入x=>x>1这个参数,得到

new Proxy(filter(x=>x>1)(of(1,2,3)), rxProxy)

其中filter(x=>x>1)(of(1,2,3))就相当于pipe(of(1,2,3),filter(x=>x>1))

到这里读者应该已经看出来了,后面无论如何调用都会返回相同形式的Proxy对象,可以无限调用下去。 其中Proxy只是充当了桥梁作用,实际使用中,并不会影响性能。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Wesley13 Wesley13
3年前
RxJS的另外四种实现方式(五)——使用生成器实现
接上一篇RxJS的另外四种实现方式(四)——性能最高的库(续)(https://my.oschina.net/langhuihui/blog/2071675)js的生成器一般情况下使用场景很少,开发者接触的不是很多。不了解的可以先行查看js语法了解。这里把其中的执行顺序图解一下调用方
Wesley13 Wesley13
3年前
RxJS的另外四种实现方式(三)——性能最高的库
接上篇RxJS的另外四种实现方式(二)——代码最小的库(续)(https://my.oschina.net/langhuihui/blog/2052019)代码最小的库rx4rxlite虽然在性能测试中超过了callbag,但和most库较量的时候却落败了,于是我下载了most库,要解开most库性能高的原因。我们先上一组测试数据,这是
Wesley13 Wesley13
3年前
RxJS的另外四种实现方式(四)——性能最高的库(续)
接上一篇RxJS的另外四种实现方式(三)——性能最高的库(https://my.oschina.net/langhuihui/blog/2054887)上一篇文章我展示了这个最高性能库的实现方法。下面我介绍一下这个性能提升的秘密。首先,为了弄清楚Most库究竟为何如此快,我必须借助其他工具。比如chrome的devtools性能分析,刚开始
Stella981 Stella981
3年前
Angular2记录
对象转Observableimport'rxjs/add/observable/of'Observable.of(1,2,3)http请求后做处理import{map,catchError}from'rxjs/operators'
Stella981 Stella981
3年前
SpringBoot开发案例之整合Dubbo提供者(二)
!00.jpg(https://blog.52itstyle.com/usr/uploads/2017/07/1329278006.jpg)大家有没有注意到,上一篇中提供者,暴露接口的方式?混搭。springboot本身接口实现使用了注解的方式,而Dubbo暴露接口使用的是配置文件的实现方式,即如下:代码importorg.s
Stella981 Stella981
3年前
RxJS的另外四种实现方式(六)——使用Stream类实现
接上一篇RxJS的另外四种实现方式(五)——使用生成器实现(https://my.oschina.net/langhuihui/blog/2120113)该实现方式与之前几种不同的,该实现方式仅针对Nodejs环境。在Nodejs环境中,提供了Stream类,包括Readable、Transform、Writeable等子类都是可扩展的。从字面
Easter79 Easter79
3年前
SpringBoot开发案例之整合Dubbo提供者(二)
!00.jpg(https://blog.52itstyle.com/usr/uploads/2017/07/1329278006.jpg)大家有没有注意到,上一篇中提供者,暴露接口的方式?混搭。springboot本身接口实现使用了注解的方式,而Dubbo暴露接口使用的是配置文件的实现方式,即如下:代码importorg.s
Wesley13 Wesley13
3年前
Java实现操作系统中四种动态内存分配算法:BF+NF+WF+FF
1概述本文是利用Java实现操作系统中的四种动态内存分配方式,分别是:BFNFWFFF分两部分,第一部分是介绍四种分配方式的概念以及例子,第二部分是代码实现以及讲解。2四种分配方式2.1概念操作系统中有一个动态分区分配的概念,内