RxJS的另外四種實作方式（後記）——總結

github位址

https://github.com/langhuihui/rx4rx

源碼對應位置

幾種庫的實作對比總結(TS文法）

同時實作管道和鍊式程式設計原理

針對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隻是充當了橋梁作用，實際使用中，并不會影響性能。