在前端开发中，我们难免要使用到 RxJS 这一流行的响应式编程库。而 @dagrachev/rxjs 这个 npm 包则是针对性地扩展了一些常用的操作符以及提供了自定义的操作符和插件，使得 RxJS 更加易用和灵活。接下来，我们将会详细介绍如何使用这个 npm 包。
安装和引用
首先，使用 npm 安装 @dagrachev/rxjs：
npm install @dagrachev/rxjs --save
然后在你的项目中引入该包：
-- -------------------- ---- -------
------ - ------- --- - ---- ----------------------------
------ - -- - ---- -------
----- -- -- -- --
------
-------- -- - - - --- ---
----- -- - - --
-
-----------------------在以上示例代码中，我们使用了该库导出的 filter 和 map 操作符，像使用 RxJS 的其他操作符一样，只需要通过导入操作符所在的模块即可引入，无需再额外安装。
常用操作符
除了在 RxJS 中已经提供的操作符外，@dagrachev/rxjs 还提供了几个常用的操作符，使得我们可以更便捷地进行数据流处理。
debounceTimeUntil
debounceTimeUntil 操作符会过滤掉特定时间内的重复数据，并且可以根据一个回调函数来判断是否需要继续过滤，其使用方式如下：
-- -------------------- ---- -------
------ - ----------------- - ---- ----------------------------
-------------
------------------
-----
-- -- -
------ ----- -- ---- ---------------------
-
-
--distinctUntilKeyChanged
distinctUntilKeyChanged 会过滤掉重复的数据，只有当传入的属性发生变化时才会发出新的数据序列。使用方式如下：
import { distinctUntilKeyChanged } from '@dagrachev/rxjs/operators';
source$.pipe(distinctUntilKeyChanged('key');repeatUntil
repeatUntil 可以在满足条件的情况下重复执行 Observable 实例。使用方式如下：
import { repeatUntil } from '@dagrachev/rxjs/operators';
source$.pipe(repeatUntil(() => {
return true; // 如果返回 true，则停止重复执行 Observable 实例
})
);firstNotNull
firstNotNull 会从 Observable 实例中取出第一个非 null 的值，并回传给 Observer。如果全部都是 null 值，则会回传 undefined。使用方式如下：
import { firstNotNull } from '@dagrachev/rxjs/operators';
source$.pipe(firstNotNull());toJsonString
toJsonString 会将 Observable 实例序列化为字符串，方便进行传输。使用方式如下：
import { toJsonString } from '@dagrachev/rxjs/operators';
source$.pipe(toJsonString());自定义操作符
如果 @dagrachev/rxjs 中的操作符不能满足你的需求，你可以通过创建自定义操作符来扩展它的能力。自定义操作符相当于是 RxJS 中的一个插件，使得你可以将常用的操作封装在一起，方便后期使用。
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
export function myOperator() {
return function<T>(source: Observable<T>): Observable<T> {
return source.pipe(map((x: T) => x + ' from myOperator'));
};
}以上代码是一个简单的自定义操作符，它会将流中的所有元素都添加一个字符串，可以通过像使用 RxJS 中其他操作符一样进行调用。
总结
通过本次介绍，我们了解了如何使用 @dagrachev/rxjs 扩展 RxJS 的能力。与 RxJS 自带的操作符相比，@dagrachev/rxjs 提供的操作符更加方便和易用，并可以通过创建自定义操作符来扩展其能力。使用 @dagrachev/rxjs 可以大大提高我们在前端开发中的开发效率，快速搭建出高质量的数据流处理系统。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fd181e8991b448dd5ee