RxJS
第一个例子
普通的注册事件监听器
var button = document.querySelector('button');
button.addEventListener('click', () => console.log('Clicked!'));
利用RxJs创建一个可观察对象
var button = document.querySelector('button');
Rx.Observable.fromEvent(button, 'click')
.subscribe(() => console.log('Clicked!'));
纯度
RxJS 提高代码纯度,隔绝代码状态
var button = document.querySelector('button');
Rx.Observable.fromEvent(button, 'click')
.scan(count => count + 1, 0)
.subscribe(count => console.log(`Clicked ${count} times`));
scan操作符:得到回调函数每个的值,对他进行操作,传递给下一次回调函数做返回值.
流量控制
var button = document.querySelector('button');
Rx.Observable.fromEvent(button, 'click')
.throttleTime(1000)
.scan(count => count + 1, 0)
.subscribe(count => console.log(`Clicked ${count} times`));
Other flow control operators are filter, delay, debounceTime, take, takeUntil, distinct, distinctUntilChanged etc.
修改value
map:
var button = document.querySelector('button');
Rx.Observable.fromEvent(button, 'click')
.throttleTime(1000)
.map(event => event.clientX)
.scan((count, clientX) => count + clientX, 0)
.subscribe(count => console.log(count));
Other value producing operators are pluck, pairwise, sample etc.
可观察对象
可观察对象是懒惰推送多个值的集合
var observable = Rx.Observable.create(function (observer) {
observer.next(1);
observer.next(2);
observer.next(3);
setTimeout(() => {
observer.next(4);
observer.complete();
}, 1000);
});
console.log('just before subscribe');
observable.subscribe({
next: x => console.log('got value ' + x),
error: err => console.error('something wrong occurred: ' + err),
complete: () => console.log('done'),
});
console.log('just after subscribe');
结果输出
just before subscribe
got value 1
got value 2
got value 3
just after subscribe
got value 4
done
observable对象被订阅是直接全部执行,输出1,2,3.4在1秒后执行.
error:在订阅出错时执行
complete:订阅结束时执行
Pull versus Push
生产者 | 消费者 |
---|---|
拉取 | 被动:在被请求是生成数据 |
推送 | 主动:按自己的步伐产生数据 |
例子
|单个| 多个
——-|——-|——
拉取 |Function|Iterator
推送 |Promise|Observable
pull:消费者确定什么时候从数据生成者获得数据,但生成者不知道什么时候推送数据
push:生成确定什么时候生成发生数据,但消费者不知道什么时候获得数据
Observables:新的pull
Observables as generalizations of functions
Observables,创建一个方法
var foo = Rx.Observable.create(function (observer) {
console.log('Hello');
observer.next(42);
});
实现的功能相当于
function foo() {
console.log('Hello');
return 42;
}
Observables创建的方法和function一样,是不会自动执行的.只有在调用时才执行.和function不一样的是function只能返回一个值,而Observables可以返回多个值.
observer.next(42) 为observer返回的值,可以返回多个值.subscribe的函数会对每次next返回都执行一遍无论同步还是异步返回.
Observables相关操作
新建
Rx.Observable.create是Observable的构造函数的别名,他有一个参数subscribe函数.
var observable = Rx.Observable.create(function subscribe(observer) {
var id = setInterval(() => {
observer.next('hi')
}, 1000);
});
订阅
observable.subscribe(x => console.log(x));
这里的subscribe其实等价于新建observable时的subscribe
执行
3中执行的方式:
1.Next:包含一个值,是最重要的,返回observable实际上的值
2.Error:返回一个javaquery的错误,只会执行一侧
3.Complete:无返回值,只会在调用结束时执行一次
一旦Error或Complete被执行,再次之后的语句将不再执行
建议在subscribe中使用try/catch
ar observable = Rx.Observable.create(function subscribe(observer) {
try {
observer.next(1);
observer.next(2);
observer.next(3);
observer.complete();
} catch (err) {
observer.error(err); // delivers an error if it caught one
}
});
处理observable的执行
结束observable的执行
var observable = Rx.Observable.from([10, 20, 30]);
var subscription = observable.subscribe(x => console.log(x));
// Later:
subscription.unsubscribe();
Observer 观察员
Observer是Observable所提供价的消费者。Observer只是一组回调,用于Observable传递的每种类型的通知:next,error和complete。
var observer = {
next: x => console.log('Observer got a next value: ' + x),
error: err => console.error('Observer got an error: ' + err),
complete: () => console.log('Observer got a complete notification'),
};
``
使用
observable.subscribe(observer);
即可以单数的定义observable.subscribe的回调函数
也可以直接按参数返回位置,定义相关函数
observable.subscribe(
x => console.log(‘Observer got a next value: ’ + x),
err => console.error(‘Observer got an error: ’ + err),
() => console.log(‘Observer got a complete notification’)
);
## 订阅者 Subscription
Subscription是一种一次性的资源,通常用来执行一个Observable.他有一个重要的方法unsubscribe,不用穿任何参数,只是用来处理subscribe所持有的资源.一个subscribe只有一个unsubscribe用来是否subscribe占用的资源,停止subscribe的执行
subscribe可以被放在一起(利用add,可以用remove移除),然后共享同一个unsubscribe
ar observable1 = Rx.Observable.interval(400);
var observable2 = Rx.Observable.interval(300);
var subscription = observable1.subscribe(x => console.log(‘first: ’ + x));
var childSubscription = observable2.subscribe(x => console.log(‘second: ’ + x));
subscription.add(childSubscription);
setTimeout(() => {
// Unsubscribes BOTH subscription and childSubscription
subscription.unsubscribe();
}, 1000);
##Subject
Subject相当于一个Observer的集合,可以对他设置多个subscribe,在执行时会全部执行
var subject = new Rx.Subject();
subject.subscribe({
next: (v) => console.log(‘observerA: ’ + v)
});
subject.subscribe({
next: (v) => console.log(‘observerB: ’ + v)
});
var observable = Rx.Observable.from([1, 2, 3]);
observable.subscribe(subject);
##Reference counting
##BehaviorSubject
是Subject的一个变形,接受当前的值subscribe时,直接执行一次
var subject = new Rx.BehaviorSubject(0); // 0 is the initial value
subject.subscribe({
next: (v) => console.log(‘observerA: ’ + v)
});
subject.next(1);
“`
ReplaySubject
在新一次的subscribe时,会把老值设计按输入要执行的次数的执行都再执行一次
AsyncSubject
只对最后的值执行一次,在subject.complete();时执行