RxJS 是一款非常强大的 JavaScript 库，它提供了一套丰富的操作符，使得数据处理变得更加易于操作。但是，如果你需要使用特定的操作符来处理数据，每次都需要写重复的代码就显得非常笨重。针对这种情况，我们可以通过创建可复用的 RxJS 操作符来优化我们的代码。
为什么需要可复用的操作符？
在我们常见的前端应用中，我们需要使用不同的数据流进行处理。不同的数据流可能需要使用不同的操作符，那么在每次使用相同的操作符时都重复的写代码无疑是一种浪费时间和精力的行为。通过创建可复用的操作符，我们可以将一些常见的操作符进行封装，这样我们只需要在需要时导入这些操作符，就能够方便地复用它们。
创建可复用的操作符
创建可复用的操作符需要我们利用 RxJS 的 Observable.create() 方法来创建一个新的操作符。下面是一个简单的可复用操作符的例子，可以将一个数据流中的元素进行平方处理：
// javascriptcn.com 代码示例
import { Observable } from 'rxjs';
export const square = () => {
return (source) => {
return new Observable(observer => {
return source.subscribe({
next(x) { observer.next(x * x); },
error(err) { observer.error(err); },
complete() { observer.complete(); }
});
});
};
};在这个例子中，我们首先导入了 RxJS 的 Observable。然后，我们定义了一个 square() 方法，这个方法返回一个函数，这个函数就是我们的操作符。
在 square() 方法中，我们创建了一个新的 Observable，这个 Observable 接受到源 Observable 中的元素 source，调用 next() 方法时将元素进行平方，并将平方后的元素传给观察者。
最后，我们将这个操作符导出，这样其他的文件就可以轻松地引用我们的这个操作符，并将其用在所需要的地方。
如何使用创建的操作符？
当我们需要应用刚刚创建的 square() 操作符时，我们只需要在相应的文件中导入它：
// javascriptcn.com 代码示例
import { of } from 'rxjs';
import { square } from './operators';
const source$ = of(1, 2, 3);
const squaredSource$ = source$.pipe(
square()
);
squaredSource$.subscribe(console.log);在这个例子中，我们首先导入了 RxJS 中的 of() 方法以创建一个新的 Observable，然后导入了我们刚刚创建的 square() 操作符。我们通过 pipe() 方法，将 square() 操作符应用到了源 Observable source$ 中，创建了一个新的 Observable squaredSource$。
最后，我们通过 subscribe() 方法，订阅了这个新的 Observable，将结果打印到控制台中。
总结
上述代码提供了一种对 RxJS 操作符进行封装的方法，使得它们能够被复用。通过创建可复用的操作符，我们不仅可以提高代码的可读性和可维护性，还能提高代码的重用性，减少代码冗余。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6534f6367d4982a6ebaabfc6