RxJS 笔记 07

参考 简书原文 作者：readilen

1 Marble diagrams Observable图示

我们把描绘 observable 的图示称为 Marble diagrams

我们用 - 来表达一小段时间，这些 – 串起就代表一个 observable。

----------------

X (大写 X)则代表有错误发生

---------------X

| 则代表 observable 结束

----------------|

示例

// -----0-----1-----2-----3--...
var source = Rx.Observable.interval(1000);

// (1234)|
var source = Rx.Observable.of(1,2,3,4);

// source: -----0-----1-----2-----3--...
//             map(x => x + 1)
// newest: -----1-----2-----3-----4--...
var source = Rx.Observable.interval(1000);
var newest = source.map(x => x + 1); 

2 Operator 一个个被附加到 Observable 的函数

RxJS 提供的各种 operators 已经非常够用了，不太需要我们自己创造 operator，

2-1 自定义

示例1

var people = Rx.Observable.of('Jerry', 'Anna');

function map(source, callback) {
    return Rx.Observable.create((observer) => {
        return source.subscribe(
            (value) => { 
                try{
                    observer.next(callback(value));
                } catch(e) {
                    observer.error(e);
                }
            },
            (err) => { observer.error(err); },
            () => { observer.complete() }
        )
    })
}

var helloPeople = map(people, (item) => item + ' Hello~');

helloPeople.subscribe(console.log);
// Jerry Hello~
// Anna Hello~

示例2

function map(callback) {
    return Rx.Observable.create((observer) => {
        return this.subscribe(
            (value) => { 
                try{
                    observer.next(callback(value));
                } catch(e) {
                    observer.error(e);
                }
            },
            (err) => { observer.error(err); },
            () => { observer.complete() }
        )
    })
}
Rx.Observable.prototype.map = map;
var people = Rx.Observable.of('Jerry', 'Anna');
var helloPeople = people.map((item) => item + ' Hello~');

helloPeople.subscribe(console.log);
// Jerry Hello~
// Anna Hello~

2-2 map, mapTo, filter

map

// source: -----0-----1-----2-----3--...
//             map(x => x + 1)
// newest: -----1-----2-----3-----4--...
var source = Rx.Observable.interval(1000);
var newest = source.map(x => x + 2); 

newest.subscribe(console.log);
// 2
// 3
// 4
// 5..

mapTo 可以把传进来的值改成一个固定的值

// source: -----0-----1-----2-----3--...
//                 mapTo(2)
// newest: -----2-----2-----2-----2--...
var source = Rx.Observable.interval(1000);
var newest = source.mapTo(2); 

newest.subscribe(console.log);
// 2
// 2
// 2
// 2..

filter

// source: -----0-----1-----2-----3-----4-...
//            filter(x => x % 2 === 0)
// newest: -----0-----------2-----------4-...
var source = Rx.Observable.interval(1000);
var newest = source.filter(x => x % 2 === 0);

newest.subscribe(console.log);
// 0
// 2
// 4
// 6..