目錄
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只是充當了橋樑作用,實際使用中,並不會影響性能。