《深入浅出rxjs》阅读

最新推荐文章于 2021-07-19 15:43:33 发布

weixin_34291004

最新推荐文章于 2021-07-19 15:43:33 发布

阅读量423

点赞数

原文链接：https://juejin.im/post/5cd4de95e51d454757162520

版权

1.观察者模式

将逻辑分为发布者（负责产⽣事件并通知所有注册挂上号的观察者）和观察者（被注册上某个发布者，只管接收到事件之后就处理）

在rxjs中：

如何产⽣事件，这是发布者的责任，在RxJS中是Observable对象的⼯作。
如何响应事件，这是观察者的责任，在RxJS中由subscribe的参数来决定。
什么样的发布者关联什么样的观察者，也就是何时调⽤subscribe

2.迭代器模式

提供⼀个通⽤的接口，让使⽤者完全不⽤关⼼这个数据集合的具体实现⽅式。

通常都应该包含这样⼏个函数：

·getCurrent，获取当前被游标所指向的元素。
·moveToNext，将游标移动到下⼀个元素，调⽤这个函数之后， getCurrent获得的元素就会不同。
·isDone，判断是否已经遍历完所有的元素。

在rxjs中应用：subscribr之后不断进行推送。

3.Observable

var theObserver = { //观察者响应事件
next: item => console.log(item), //表达现在要推送的数据
complete: () => console.log('No More Data'),//推送完结，一般不写
error: () => {console.log('wrong')}//出错
}
var onSubscribe = observer => { //发布者发布事件
	var number = 1;
	var handle = setInterval(() => {
		observer.next(number++);
	}, 1000)
	return {
	unsubscribe: () => { //退订
	//clearInterval(handle);
	}
	};
};
var source$ = new Rx.Observable(onSubscribe);
source$.subscribe(theObserver)
setTimeout(() => {
	source$.unsubscribe();
}, 3500);
//Observable产⽣的事件，只有Observer通过subscribe订阅之后才会收到，在unsubscribe之后就不会再收到。
复制代码

1.hot Observable

const producer = new Producer();//独立一个的生产者
const cold$ = new Observable(observer => {
// 然后让observer去接受producer产⽣的数据
});
复制代码

2.Cold Observable

const cold$ = new Observable(observer => {
const producer = new Producer();//对每⼀次subscribe都产⽣⼀个“⽣产者”，
// 然后让observer去接受producer产⽣的数据
});
复制代码

4.操作符 根据功能，操作符可以分为以下类别：

·创建类（creation）

·转化类（transformation）

·过滤类（filtering）

·合并类（combination）

·多播类（multicasting）

·错误处理类（error Handling）

·辅助⼯具类（utility）

·条件分⽀类（conditional&boolean）

·数学和合计类（mathmatical&aggregate）

常见的操作符：

1.create（类函数）创建 Observable对象

2.map,filter(实例函数)类似于数组的map,filter

使用bind绑定特定Observable对象（不能链式调用），：：（绑定操作符，链式调用）：

const operator = map.bind(source$);
const result$ = operator(x => x * 2);

const result$ = source$::map(x => x * 2).filter(x => x % 3 !== 0);
复制代码

操作符的实现例如map：每个操作符都是⼀个函数，不管实现什么功能，都必须考虑下⾯这些功能要点： ·返回⼀个全新的Observable对象。

·对上游和下游的订阅及退订处理。

·处理异常情况。

·及时释放资源。

我们以最简单的map操作符实现来说明上⾯的要点。

function map(project) {
    return new Observable(observer => {
        const sub = this.subscribe({
            next: value => {
            try {
                observer.next(project(value));
            } catch (err) {
                observer.error(err);
            }
        },
            error: err => observer.error(error),
            complete: () => observer.complete(),
        });
    });
}
复制代码

。。。持续更新中