semlinker
semlinker

RxJS Operators 详解

更新内容 - Multicasting Operators 更新时间 - 2017-03-30

Marble diagrams

我们把描绘 Observable 的图称为 Marble diagrams，我们用 - 来表示一小段时间，这些 - 串起来就表示一个 Observable 对象。

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

X 表示有错误发生

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

| 表示 Observable 结束

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

在时间序列中，我们可能会持续发出值，如果值是数字则直接用阿拉伯数字表示，其它数据类型使用相近的英文符号表示，接下来我们看一下 interval 操作符对应的 marble 图：

var source = Rx.Observable.interval(1000);

source 对应的 marble 图：

-----0-----1-----2-----3--...

当 observable 同步发送值时，如使用 of 操作符创建如下 Observable 对象：

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

source 对应的 marble 图：

(1234)|

小括号表示同步发生。

另外 marble 图也能够表示 operator 的前后转换关系，例如：

var source = Rx.Observable.interval(1000);
var newest = source.map(x => x + 1);

对应的 marble 图如下：

source: -----0-----1-----2-----3--...
            map(x => x + 1)
newest: -----1-----2-----3-----4--...

通过 marble 图，可以帮助我们更好地理解 operator。

详细的信息可以参考 - RxMarbles

Creation Operators

repeat

repeat 操作符签名：

public repeat(count: number): Observable

repeat 操作符作用：

重复 count 次，源 Observable 发出的值。

repeat 操作符示例：

var source = Rx.Observable.from(['a','b','c'])
               .zip(Rx.Observable.interval(500), (x,y) => x);

var example = source.repeat(2);

example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});

示例 marble 图：

source : ----a----b----c|
            repeat(2)
example: ----a----b----c----a----b----c|

以上代码运行后，控制台的输出结果：

a
b
c
a
b
c
complete

JSBin - repeat

Transformation Operators

map

map 操作符签名：

public map(project: function(value: T, index: number): R, thisArg: any): Observable

map 操作符作用：

对 Observable 对象发出的每个值，使用指定的 project 函数，进行映射处理。

map 操作符示例：

var source = Rx.Observable.interval(1000);
var newest = source.map(x => x + 2); 

newest.subscribe(console.log);

示例 marble 图：

source: -----0-----1-----2-----3--...
            map(x => x + 2)
newest: -----2-----3-----4-----5--...

以上代码运行后，控制台的输出结果：

2
3
4
...

mapTo

mapTo 操作符签名：

public mapTo(value: any): Observable

mapTo 操作符作用：

对 Observable 对象发出的每个值，映射成固定的值。

mapTo 操作符示例：

var source = Rx.Observable.interval(1000);
var newest = source.mapTo(2); 

newest.subscribe(console.log);

示例 marble 图：

source: -----0-----1-----2-----3--...
                mapTo(2)
newest: -----2-----2-----2-----2--...

以上代码运行后，控制台的输出结果：

2
2
2
...

scan

scan 操作符签名：

public scan(accumulator: function(acc: R, value: T, index: number): R,
    seed: T | R): Observable

scan 操作符作用：

对 Observable 发出值，执行 accumulator 指定的运算，可以简单地认为是 Observable 版本的 Array.prototype.reduce 。

scan 操作符示例：

var source = Rx.Observable.from('hello')
             .zip(Rx.Observable.interval(600), (x, y) => x);

var example = source.scan((origin, next) => origin + next, '');

example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});

示例 marble 图：

source : ----h----e----l----l----o|
    scan((origin, next) => origin + next, '')
example: ----h----(he)----(hel)----(hell)----(hello)|

以上代码运行后，控制台的输出结果：

h
he
hel
hell
hello
complete

(备注：scan 与 reduce 最大的差别就是 scan 最终返回的一定是一个 Observable 对象，而 reduce 的返回类型不是固定的)

JSBin - scan

buffer

buffer 操作符签名：

public buffer(closingNotifier: Observable): Observable

buffer 操作符作用：

缓冲源 Observable 对象已发出的值，直到 closingNotifier 触发后，才统一输出缓存的元素。

buffer 操作符示例：

var source = Rx.Observable.interval(300);
var source2 = Rx.Observable.interval(1000);
var example = source.buffer(source2);

example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});

示例 marble 图：

source : --0--1--2--3--4--5--6--7..
source2: ---------0---------1--------...
            buffer(source2)
example: ---------([0,1,2])---------([3,4,5])

以上代码运行后，控制台的输出结果：

[0,1,2]
[3,4,5]
[6,7,8]
....

bufferTime

bufferTime 操作符签名：

public bufferTime(bufferTimeSpan: number, bufferCreationInterval: number, 
       maxBufferSize: number, scheduler: Scheduler): Observable

bufferTime 操作符作用：

设定源 Observable 对象已发出的值的缓冲时间。

bufferTime 操作符示例：

var source = Rx.Observable.interval(300);
var example = source.bufferTime(1000);

example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});

示例 marble 图：

source : --0--1--2--3--4--5--6--7..
            bufferTime(1000)
example: ---------([0,1,2])---------([3,4,5])

以上代码运行后，控制台的输出结果：

[0,1,2]
[3,4,5]
[6,7,8]
....

JSBin - bufferTime

bufferCount

bufferCount 操作符签名：

public bufferCount(bufferSize: number, startBufferEvery: number):     
        Observable

bufferCount 操作符作用：

缓冲源 Observable对象已发出的值，直到大小达到给定的最大 bufferSize 。

bufferCount 操作符示例：

var source = Rx.Observable.interval(300);
var example = source.bufferCount(3);

example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});

示例 marble 图：

source : --0--1--2--3--4--5--6--7..
            bufferCount(3)
example: ---------([0,1,2])---------([3,4,5])

以上代码运行后，控制台的输出结果：

[0,1,2]
[3,4,5]
[6,7,8]
....

concatMap

concatMap 操作符签名：

public concatMap(project: function(value: T, ?index: number): ObservableInput, 
    resultSelector: function(outerValue: T, innerValue: I, outerIndex: number, 
    innerIndex: number): any): Observable

concatMap 操作符作用：

对每个 Observable 对象发出的值，进行映射处理，并进行合并。该操作符也会先处理前一个 Observable 对象，在处理下一个 Observable 对象。

concatMap 操作符示例：

var source = Rx.Observable.fromEvent(document.body, 'click');

var example = source.concatMap(
                e => Rx.Observable.interval(100).take(3));
                
example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});

示例 marble 图：

source : -----------c--c------------------...
        concatMap(c => Rx.Observable.interval(100).take(3))
example: -------------0-1-2-0-1-2---------...

以上代码运行后，控制台的输出结果：

0
1
2
0
1
2

concatMap 其实就是 map 加上 concatAll 的简化写法。

JSBin - concatMap

switchMap

switchMap 操作符签名：

public switchMap(project: function(value: T, ?index: number): ObservableInput, 
  resultSelector: function(outerValue: T, innerValue: I, outerIndex: number, 
  innerIndex: number): any): Observable

switchMap 操作符作用：

对源 Observable 对象发出的值，做映射处理。若有新的 Observable 对象出现，会在新的 Observable 对象发出新值后，退订前一个未处理完的 Observable 对象。

switchMap 操作符示例：

var source = Rx.Observable.fromEvent(document.body, 'click');
var example = source.switchMap(
                    e => Rx.Observable.interval(100).take(3));
                
example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});

示例 marble 图：

source : -----------c--c-----------------...
        concatMap(c => Rx.Observable.interval(100).take(3))
example: -------------0--0-1-2-----------...

以上代码运行后，控制台的输出结果：

0
0
1
2

JSBin - switchMap

Filtering Operators

filter

filter 操作符签名：

public filter(predicate: function(value: T, index: number): boolean, 
    thisArg: any): Observable

filter 操作符作用：

对 Observable 对象发出的每个值，作为参数调用指定的 predicate 函数，若该函数的返回值为 true，则表示保留该项，若返回值为 false，则舍弃该值。

filter 操作符示例：

var source = Rx.Observable.interval(1000);
var newest = source.filter(x => x % 2 === 0); 

newest.subscribe(console.log);

示例 marble 图：

source: -----0-----1-----2-----3-----4-...
            filter(x => x % 2 === 0)
newest: -----0-----------2-----------4-...

以上代码运行后，控制台的输出结果：

0 
2
4
...

JSBin - filter

take

take 操作符签名：

public take(count: number): Observable

take 操作符作用：

用于获取 Observable 对象发出的前 n 项值，取完后就结束。

take 操作符示例：

var source = Rx.Observable.interval(1000);
var example = source.take(3);

example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});

示例 marble 图：

source : -----0-----1-----2-----3--..
                take(3)
example: -----0-----1-----2|

以上代码运行后，控制台的输出结果：

0
1
2
complete

first

first 操作符签名：

public first(predicate: function(value: T, index: number, source: Observable): boolean,      resultSelector: function(value: T, index: number): R, 
  defaultValue: R): Observable

first 操作符作用：

用于获取 Observable 对象发出的第一个元素，取完后就结束。

first 操作符示例：

var source = Rx.Observable.interval(1000);
var example = source.first();

example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});

示例 marble 图：

source : -----0-----1-----2-----3--..
                first()
example: -----0|

以上代码运行后，控制台的输出结果：

0
complete

takeUntil

takeUntil 操作符签名：

public takeUntil(notifier: Observable): Observable

takeUntil 操作符作用：

当 takeUntil 传入的 notifier 发出值时，源 Observable 对象就会直接进入完成状态。

takeUntil 操作符示例：

var source = Rx.Observable.interval(1000);
var click = Rx.Observable.fromEvent(document.body, 'click');
var example = source.takeUntil(click);  

example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});

示例 marble 图：

source : -----0-----1-----2------3--
click  : ----------------------c----
                takeUntil(click)
example: -----0-----1-----2----|

以上代码运行后，控制台的输出结果：

0
1
2
complete

JSBin - takeUntil

skip

skip 操作符签名：

public skip(count: Number): Observable

skip 操作符作用：

跳过源 Observable 对象前 count 项，并返回新的 Observable 对象。

skip 操作符示例：

var source = Rx.Observable.interval(1000);
var example = source.skip(3);

example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});

示例 marble 图：

source : ----0----1----2----3----4----5--....
                    skip(3)
example: -------------------3----4----5--...

以上代码运行后，控制台的输出结果：

3
4
5
...

takeLast

takeLast 操作符签名：

public takeLast(count: number): Observable

takeLast 操作符作用：

获取源 Observable 对象发出的，后面 count 项的值。

takeLast 操作符示例：

var source = Rx.Observable.interval(1000).take(6);
var example = source.takeLast(2);

example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});

示例 marble 图：

source : ----0----1----2----3----4----5|
                takeLast(2)
example: ------------------------------(45)|

以上代码运行后，控制台的输出结果：

4
5
complete

last

last 操作符签名：

public last(predicate: function): Observable

last 操作符作用：

获取源 Observable 对象发出的最后一项的值。

last 操作符示例：

var source = Rx.Observable.interval(1000).take(6);
var example = source.last();

example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});

示例 marble 图：

source : ----0----1----2----3----4----5|
                    last()
example: ------------------------------(5)|

以上代码运行后，控制台的输出结果：

5
complete

debounceTime

debounceTime 操作符签名：

public debounceTime(dueTime: number, scheduler: Scheduler): Observable

debounceTime 操作符作用：

在设定的时间跨度内，若源 Observable 对象没有再发出新值，则返回最近一次发出的值。

debounceTime 操作符示例：

var source = Rx.Observable.interval(300).take(5);
var example = source.debounceTime(1000);

example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});

示例 marble 图：

source : --0--1--2--3--4|
        debounceTime(1000)
example: --------------4|

以上代码运行后，控制台的输出结果：

4
complete

debounceTime 的工作方式是每次收到元素时，它会先把元素缓存住并等待给定的时间，如果等待时间内没有收到新的元素，则返回最新的缓存值。如果等待时间内，又收到新的元素，则会替换之前缓存的元素，并重新开始计时。

JSBin - debounceTime

throttleTime

throttleTime 操作符签名：

public throttleTime(duration: number, scheduler: Scheduler): Observable

throttleTime 操作符作用：

从源 Observable 对象发出第一个值开始，忽略等待时间内发出的值，等待时间过后再发出新值。与 debounceTime 不同的是，throttleTime 一开始就会发出值，在等待时间内不会发出任何值，等待时间过后又会发出新的值。

throttleTime 示例：

var source = Rx.Observable.interval(300).take(5);
var example = source.throttleTime(1000);

example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});

示例 marble 图：

source : --0--1--2--3--4|
        throttleTime(1000)
example: --0------------4|

以上代码运行后，控制台的输出结果：

0
4
complete

throttle 比较像是控制行为的最高频率，也就是说如果我们设定 1000 ms，那么该事件最大频率就是每秒触发一次而不会过快。debounce 则比较像是必须等待的时间，要等一定的时间过了才会收到元素。

JSBin - throttleTime

distinct

distinct 操作符签名：

public distinct(keySelector: function, flushes: Observable): Observable

distinct 操作符的作用：

过滤源 Observable 发出的值，确保不会发出重复出现的值。

distinct 操作符示例：

var source = Rx.Observable.from(['a', 'b', 'c', 'a', 'b'])
                .zip(Rx.Observable.interval(300), (x, y) => x);
var example = source.distinct()

example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});

示例 marble 图：

source : --a--b--c--a--b|
            distinct()
example: --a--b--c------|

以上代码运行后，控制台的输出结果：

a
b
c
complete

distinct 内部会创建一个 Set 集合，当接收到元素时，会判断 Set 集合中，是否已存在相同的值，如果已存在的话，就不会发出值。若不存在的话，会把值存入到 Set 集合中并发出该值。所以尽量不要直接把 distinct 操作符应用在无限的 Observable 对象中，这样会导致 Set 集合越来越大。针对这种场景，大家可以设置 distinct 的第二个参数 (清除已保存的数据)，或使用 distinctUntilChanged。

JSBin - distinct

distinctUntilChanged

distinctUntilChanged 操作符签名：

public distinctUntilChanged(compare: function): Observable

distinctUntilChanged 操作符作用：

过滤源 Observable 发出的值，若当前发出的值与前一次值不一致，则发出该值。

distinctUntilChanged 操作符示例：

var source = Rx.Observable.from(['a', 'b', 'c', 'c', 'b'])
               .zip(Rx.Observable.interval(300), (x, y) => x);
var example = source.distinctUntilChanged()

example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});

示例 marble 图：

source : --a--b--c--c--b|
            distinctUntilChanged()
example: --a--b--c-----b|

以上代码运行后，控制台的输出结果：

a
b
c
b
complete

distinctUntilChanged 跟 distinct 一样会把相同的元素过滤掉，但 distinctUntilChanged 只会跟最后一次送出的元素比较，不会每个比较。

JSBin - distinctUntilChanged

Combination Operators

concat

concat 操作符签名：

public concat(other: ObservableInput, scheduler: Scheduler): Observable

concat 操作符作用：

把多个 Observable 对象合并为一个 Observable 对象，Observable 对象会依次执行，即需等前一个 Observable 对象完成后，才会继续订阅下一个。

concat 操作符示例：

var source = Rx.Observable.interval(1000).take(3);
var source2 = Rx.Observable.of(3)
var source3 = Rx.Observable.of(4,5,6)
var example = source.concat(source2, source3);

example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});

示例 marble 图：

source : ----0----1----2|
source2: (3)|
source3: (456)|
            concat()
example: ----0----1----2(3456)|

以上代码运行后，控制台的输出结果：

0 # source
1 # source
2 # source
3 # source2
4 # source3
5 # source3
6 # source3
complete # example

JSBin - concat

concatAll

concatAll 操作符签名：

public concatAll(): Observable

concatAll 操作符作用：

合并多个 Observable 对象，并在上一个 Observable 对象完成后订阅下一个 Observable 对象。

concatAll 操作符示例：

var obs1 = Rx.Observable.interval(1000).take(5);
var obs2 = Rx.Observable.interval(500).take(2);
var obs3 = Rx.Observable.interval(2000).take(1);

var source = Rx.Observable.of(obs1, obs2, obs3);

var example = source.concatAll();

example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});

示例 marble 图：

source : (o1                 o2      o3)|
           \                  \       \
            --0--1--2--3--4|   -0-1|   ----0|
                
                concatAll()        

example: --0--1--2--3--4-0-1----0|

以上代码运行后，控制台的输出结果：

0 # o1
1 # o1
2 # o1
3 # o1
4 # o1
0 # o2
1 # o2
0 # o3
complete # o3

JSBin - concatAll

startWith

startWith 操作符签名：

public startWith(values: ...T, scheduler: Scheduler): Observable

startWith 操作符作用：

在开始发出源 Observable 数据之前发出已设置的参数值，并返回新的 Observable 对象。

startWith 操作符示例：

var source = Rx.Observable.interval(1000);
var example = source.startWith(0);

example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});

示例 marble 图：

source : ----0----1----2----3--...
                startWith(0)
example: (0)----0----1----2----3--...

以上代码运行后，控制台的输出结果：

0
0
1
2
...

(备注：startWith 的值一开始是同步发出的，该操作符常用于保存程序的初始状态)

merge

merge 操作符签名：

public merge(other: ObservableInput, concurrent: number, scheduler: Scheduler): Observable

merge 操作符作用：

合并 Observable 对象，并按给定的时序发出对应值。

merge 操作符示例：

var source = Rx.Observable.interval(500).take(3);
var source2 = Rx.Observable.interval(300).take(6);
var example = source.merge(source2);

example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});

示例 marble 图：

source : ----0----1----2|
source2: --0--1--2--3--4--5|
            merge()
example: --0-01--21-3--(24)--5|

以上代码运行后，控制台的输出结果：

0 # source2
0 # source
1 # source2
2 # source2
1 # source
3 # source2
2 # source
4 # source2
5 # source2
complete

(备注：注意与 concat 操作符的区别，concat 会在前一个 Observable 对象执行完后，再订阅下一个 Observable 对象)

JSBin - merge

mergeAll

mergeAll 操作符签名：

public mergeAll(concurrent: number): Observable

mergeAll 操作符作用：

将高阶 Observable 对象转换为一阶Observable 对象，并同时处理所有的 Observable 对象。

mergeAll 操作符示例：

var click = Rx.Observable.fromEvent(document.body, 'click');
var source = click.map(e => Rx.Observable.interval(1000));

var example = source.mergeAll();
example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});

示例 marble 图：

click  : ---------c-c------------------c--.. 
        map(e => Rx.Observable.interval(1000))
source : ---------o-o------------------o--..
                   \ \                  \----0----1--...
                    \ ----0----1----2----3----4--...
                     ----0----1----2----3----4--...
                     mergeAll()
example: ----------------00---11---22---33---(04)4--...

以上代码运行后，控制台的输出结果：

00
11
22
33
04
4

mergeAll 不会像 switch 那样退订原有的 Observable 对象，而是会并行处理多个 Observable 对象。

JSBin - mergeAll

combineLatest

combineLatest 操作符签名：

public combineLatest(other: ObservableInput, project: function): Observable

combineLatest 操作符作用：

用于合并输入的 Observable 对象，当源 Observable 对象和 other Observable 对象都发出值后，才会调用 project 函数。

combineLatest 操作符示例：

var source = Rx.Observable.interval(500).take(3);
var newest = Rx.Observable.interval(300).take(6);

var example = source.combineLatest(newest, (x, y) => x + y);

example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});

示例 marble 图：

source : ----0----1----2|
newest : --0--1--2--3--4--5|

    combineLatest(newest, (x, y) => x + y);

example: ----01--23-4--(56)--7|

以上代码运行后，控制台的输出结果：

0
1
2
3
4
5
6
7
complete

combineLatest 示例执行过程 (project -> (x, y) => x + y)：

  • newest 发出 0 ，但此时 source 并未发出任何值，所以不会调用 project 函数

  • source 发出 0 ，此时 newest 最后一次发出的值为 0 ，调用 project 函数，返回值为 0

  • newest 发出 1 ，此时 source 最后一次发出的值为 0，调用 project 函数，返回值为 1

  • newest 发出 2 ，此时 source 最后一次发出的值为 0，调用 project 函数，返回值为 2

  • source 发出 1 ，此时 newest 最后一次发出的值为 2 ，调用 project 函数，返回值为 3

  • newest 发出 3 ，此时 source 最后一次发出的值为 1，调用 project 函数，返回值为 4

  • source 发出 2 ，此时 newest 最后一次发出的值为 3 ，调用 project 函数，返回值为 5

  • newest 发出 4 ，此时 source 最后一次发出的值为 2，调用 project 函数，返回值为 6

  • newest 发出 5 ，此时 source 最后一次发出的值为 2，调用 project 函数，返回值为 7

  • newest 和 source 都结束了，所以 example 也结束了。

JSBin - combineLatest

zip

zip 操作符签名：

public static zip(observables: *，project: Function): Observable

zip 操作符作用：

根据每个输入 Observable 对象的输出顺序，产生一个新的 Observable 对象。

zip 操作符示例：

var source = Rx.Observable.interval(500).take(3);
var newest = Rx.Observable.interval(300).take(6);

var example = source.zip(newest, (x, y) => x + y);

example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});

示例 marble 图：

source : ----0----1----2|
newest : --0--1--2--3--4--5|
    zip(newest, (x, y) => x + y)
example: ----0----2----4|

以上代码运行后，控制台的输出结果：

0
2
4
complete

zip 示例执行过程 (project -> (x, y) => x + y)：

  • newest 发出第一个值 0 ，此时 source 并未发出任何值，所以不会调用 project 函数

  • source 发出第一个值 0 ，此时 newest 之前发出的第一个值为 0，调用 project 函数，返回值为 0

  • newest 发出第二个值 1 ，此时 source 并未发出第二个值，所以不会调用 project 函数

  • newest 发出第三个值 2 ，此时 source 并未发出第三个值，所以不会调用 project 函数

  • source 发出第二个值 1 ，此时 newest 之前发出的第二个值为 1，调用 project 函数，返回值为 2

  • newest 发出第四个值 3 ，此时 source 并未发出第四个值，所以不会调用 project 函数

  • source 发出第三个值 2 ，此时 newest 之前发出的第三个值为 2，调用 project 函数，返回值为 4

  • source 对象结束，example 对象也同时结束，因为 source 对象与 newest 对象不会再有相同次序的值

JSBin - zip

withLatestFrom

withLatestFrom 操作符签名：

public withLatestFrom(other: ObservableInput, project: Function): Observable

withLatestFrom 操作符作用：

当源 Observable 发出新值的时候，根据 project 函数，合并 other Observable 对象此前发出的最新值。

withLatestFrom 操作符示例：

var main = Rx.Observable.from('hello').zip(Rx.Observable.interval(500), 
    (x, y) => x);
var some = Rx.Observable.from([0,1,0,0,0,1]).zip(Rx.Observable.interval(300), 
    (x, y) => x);

var example = main.withLatestFrom(some, (x, y) => {
    return y === 1 ? x.toUpperCase() : x;
});

example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});

示例 marble 图：

main   : ----h----e----l----l----o|
some   : --0--1--0--0--0--1|

withLatestFrom(some, (x, y) =>  y === 1 ? x.toUpperCase() : x);

example: ----h----e----l----L----O|

以上代码运行后，控制台的输出结果：

h
e
l
L
O
complete

withLatestFrom 示例执行过程 (project -> (x, y) => y === 1 ? x.toUpperCase() : x) )：

  • main 发出 h ，此时 some 上一次发出的值为 0，调用 project 函数，返回值为 h

  • main 发出 e ，此时 some 上一次发出的值为 0，调用 project 函数，返回值为 e

  • main 发出 l ，此时 some 上一次发出的值为 0，调用 project 函数，返回值为 l

  • main 发出 l，此时 some 上一次发出的值为 1，调用 project 函数，返回值为 L

  • main 发出 o，此时 some 上一次发出的值为 1，调用 project 函数，返回值为 O

JSBin - withLatestFrom

switch

switch 操作符签名：

public switch(): Observable

switch 操作符作用：

切换为最新的 Observable 数据源，并退订前一个 Observable 数据源。

switch 操作符示例：

var click = Rx.Observable.fromEvent(document.body, 'click');
var source = click.map(e => Rx.Observable.interval(1000));

var example = source.switch();
example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});

示例 marble 图：

click  : ---------c-c------------------c--.. 
        map(e => Rx.Observable.interval(1000))
source : ---------o-o------------------o--..
                   \ \                  \----0----1--...
                    \ ----0----1----2----3----4--...
                     ----0----1----2----3----4--...
                     switch()
example: -----------------0----1----2--------0----1--...

以上代码运行后，控制台的输出结果：

0
1
2
0
1
...

从 switch 操作符示例的 marble 图，可以看得出来第一次点击事件与第二次点击事件时间点太靠近了，导致第一个 Observable 还来不及发出值就直接被退订了，当每次点击后创建新的 Observable 对象，就会自动退订前一次创建的 Observable 对象。

switch 操作符会在新的 Observable 对象创建完后，直接使用新的 Observable 对象，并会自动退订之前旧的 Observable 对象。

JSBin - switch

Utility Operators

delay

delay 操作符签名：

public delay(delay: number | Date, scheduler: Scheduler): Observable

delay 操作符作用：

延迟源 Observable 对象，发出第一个元素的时间点。

delay 操作符使用示例：

var source = Rx.Observable.interval(300).take(5);
var example = source.delay(500);

example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});

示例 marble 图：

source : --0--1--2--3--4|
        delay(500)
example: -------0--1--2--3--4|

以上代码运行后，控制台的输出结果：

0 # 500ms后发出
1
2
3
4
complete

JSBin - delay

delayWhen

delayWhen 操作符签名：

public delayWhen(delayDurationSelector: function(value: T): Observable, 
            subscriptionDelay: Observable): Observable

delayWhen 操作符作用：

delayWhen 的作用跟 delay 操作符类似，最大的区别是 delayWhen 会影响每个元素，而且调用的时候需要设置 delayDurationSelector 函数，该函数的返回值是 Observable 对象。

delayWhen 操作符示例：

var source = Rx.Observable.interval(300).take(5);
var example = source
              .delayWhen( x => Rx.Observable.interval(100 * x).take(1));

example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});

示例 marble 图：

source : --0--1--2--3--4|
    .delayWhen(x => Rx.Observable.interval(100 * x).take(1));
example: --0---1----2-----3------4|

以上代码运行后，控制台的输出结果：

0
1
2
3
4
complete

Multicasting Operators

multicast

multicast 操作符签名：

public multicast(subjectOrSubjectFactory: Function | Subject, 
    selector: Function): Observable

multicast 操作符作用：

用于挂载 Subject 对象，并返回一个可链接 (connectable) 的 Observable 对象。

multicast 操作符示例：

var source = Rx.Observable.interval(1000)
             .take(3)
             .multicast(new Rx.Subject());

var observerA = {
    next: value => console.log('A next: ' + value),
    error: error => console.log('A error: ' + error),
    complete: () => console.log('A complete!')
};

var observerB = {
    next: value => console.log('B next: ' + value),
    error: error => console.log('B error: ' + error),
    complete: () => console.log('B complete!')
};

source.subscribe(observerA); // subject.subscribe(observerA)

source.connect(); // source.subscribe(subject)

setTimeout(() => {
    source.subscribe(observerB); // subject.subscribe(observerA)
}, 1000);

以上代码运行后，控制台的输出结果：

A next: 0
A next: 1
B next: 1
A next: 2
B next: 2
A complete!
B complete!

JSBin - multicast

上面示例中，我们通过 multicast 挂载 Subject 对象之后返回了 source 对象，该对象通过 subscribe 添加的观察者，都是添加到 Subject 对象内部的观察者列表中。此外当调用 source 对象的 connect() 方法后才会真正的订阅 source 对象，如果没有执行 connect() ，source 不会真正执行。如果要真正退订观察者，应该使用以下方式：

var realSubscription = source.connect();
...
realSubscription.unsubscribe();

refCount

refCount 必须搭配 multicast 一起使用，在调用 multicast 操作符后，接着调用 refCount() 。这样只要有订阅就会自动进行 connect (链接) 操作。具体示例如下：

var source = Rx.Observable.interval(1000)
             .do(x => console.log('send: ' + x))
             .multicast(new Rx.Subject())
             .refCount();

var observerA = {
    next: value => console.log('A next: ' + value),
    error: error => console.log('A error: ' + error),
    complete: () => console.log('A complete!')
};

var observerB = {
    next: value => console.log('B next: ' + value),
    error: error => console.log('B error: ' + error),
    complete: () => console.log('B complete!')
};

var subscriptionA = source.subscribe(observerA); // 订阅数 0 => 1

var subscriptionB;
setTimeout(() => {
    subscriptionB = source.subscribe(observerB);  // 订阅数 1 => 2
}, 1000);

上面示例中，当 source 对象被观察者 A 订阅时，就会立即执行并发送值，我们就不需要再额外执行 connect 操作。同样只要订阅数变成 0，就会自动停止发送。具体示例如下：

var source = Rx.Observable.interval(1000)
             .do(x => console.log('send: ' + x))
             .multicast(new Rx.Subject())
             .refCount();

var observerA = {
    next: value => console.log('A next: ' + value),
    error: error => console.log('A error: ' + error),
    complete: () => console.log('A complete!')
};

var observerB = {
    next: value => console.log('B next: ' + value),
    error: error => console.log('B error: ' + error),
    complete: () => console.log('B complete!')
}

var subscriptionA = source.subscribe(observerA);
// 订阅数 0 => 1

var subscriptionB;
setTimeout(() => {
    subscriptionB = source.subscribe(observerB);
    // 订阅数 1 => 2
}, 1000);

setTimeout(() => {
    subscriptionA.unsubscribe(); // 订阅数 2 => 1
    subscriptionB.unsubscribe(); // 订阅数 1 => 0，source 停止发送元素
}, 5000);

以上代码运行后，控制台的输出结果：

send: 0
A next: 0
send: 1
A next: 1
B next: 1
send: 2
A next: 2
B next: 2
send: 3
A next: 3
B next: 3
send: 4
A next: 4
B next: 4

JSBin - refCount

publish

publish 操作符签名：

public publish(selector: Function): *

publish 操作符作用：

用于挂载 Subject 对象，并返回一个可链接 (connectable) 的 Observable 对象。即 publish 操作符与 multicast(new Rx.Subject()) 是等价的。

var source = Rx.Observable.interval(1000)
             .publish() 
             .refCount();
             
var source = Rx.Observable.interval(1000)
             .multicast(new Rx.Subject()) 
             .refCount();

publishReplay

var source = Rx.Observable.interval(1000)
             .publishReplay(1) 
             .refCount();
             
var source = Rx.Observable.interval(1000)
            .multicast(new Rx.ReplaySubject(1)) 
            .refCount();

publishBehavior

var source = Rx.Observable.interval(1000)
             .publishBehavior(0) 
             .refCount();
             
var source = Rx.Observable.interval(1000)
             .multicast(new Rx.BehaviorSubject(0)) 
             .refCount();

publishLast

var source = Rx.Observable.interval(1000)
             .publishLast() 
             .refCount();
             
var source = Rx.Observable.interval(1000)
             .multicast(new Rx.AsyncSubject(1)) 
             .refCount();

share

share 操作符签名：

public share(): Observable

share 操作符作用：

share 操作符是 publish + refCount 的简写。

share 操作符示例：

var source = Rx.Observable.interval(1000)
             .share();
             
var source = Rx.Observable.interval(1000)
             .publish()
             .refCount();

var source = Rx.Observable.interval(1000)
             .multicast(new Rx.Subject()) 
             .refCount();

Error Handling Operators

catch

catch 操作符签名：

public catch(selector: function): Observable

catch 操作符作用：

用于捕获异常，同时可以返回一个 Observable 对象，用于发出新的值。

catch 操作符示例：

var source = Rx.Observable.from(['a','b','c','d',2])
               .zip(Rx.Observable.interval(500), (x,y) => x);

var example = source.map(x => x.toUpperCase())
                    .catch(error => Rx.Observable.of('h'));

example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});

示例 marble 图：

source : ----a----b----c----d----2|
        map(x => x.toUpperCase())
         ----a----b----c----d----X|
        catch(error => Rx.Observable.of('h'))
example: ----A----B----C----D----h|

以上代码运行后，控制台的输出结果：

A
B
C
D
h
complete

当错误发生时，我们可以返回一个 empty 的 Observable 对象来直接结束源 Observable 对象。

retry

retry 操作符签名：

public retry(count: number): Observable

retry 操作符作用：

发生错误后，重试 count 次数

retry 操作符示例：

var source = Rx.Observable.from(['a','b','c','d',2])
               .zip(Rx.Observable.interval(500), (x,y) => x);

var example = source.map(x => x.toUpperCase())
                    .retry(1);

example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});

示例 marble 图：

source : ----a----b----c----d----2|
        map(x => x.toUpperCase())
         ----a----b----c----d----X|
                retry(1)
example: ----A----B----C----D--------A----B----C----D----X|

以上代码运行后，控制台的输出结果：

A
B
C
D
A
B
C
D
Error: TypeError: x.toUpperCase is not a function

retryWhen

retryWhen 操作符签名：

public retryWhen(notifier: function(errors: Observable): Observable): Observable

retryWhen 操作符作用：

捕获异常 Observable 对象，进行异常处理后，可重新订阅源 Observable 对象。

retryWhen 操作符示例：

var source = Rx.Observable.from(['a','b','c','d',2])
               .zip(Rx.Observable.interval(500), (x,y) => x);

var example = source.map(x => x.toUpperCase())
                    .retryWhen(errorObs => errorObs.delay(1000));

example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});

示例 marble 图：

source : ----a----b----c----d----2|
        map(x => x.toUpperCase())
         ----a----b----c----d----X|
        retryWhen(errorObs => errorObs.delay(1000))
example: ----A----B----C----D-------------------A----B----C----D----...

以上代码运行后，控制台的输出结果：

A
B
C
D
...

参考资源

  • 30天精通RxJS

  • RxJS 官方文档

你可能感兴趣的:(rxjs,angular2)

  • 如何从Angularjs 升级到 Angular（译文） 快乐2020
    原文:UpgradingfromAngularJStoAngularAuthor:AngularJS官方译者：philoenglish.com团队关键字：AngularjsAngularAngular1.xAngular2.xmigration迁移，升级这里的Angular是指Angular2.x,而AngularJS是指AngularJS1.x版本。Angular(通常是指"Angular2+"
  • js、ts、argular、nodejs学习心得 海棠如醉 web技术web
    工作中需要前端argular开发桌面程序，后端用nodejs开发服务器，商用软件架构AngularJS诞生于2009年，由MiskoHevery等人创建，是一款构建用户界面的前端框架，后为Google所收购。[3]Angular是AngularJS的重写，Angular2以后官方命名为Angular，2.0以前版本称为AngularJS。AngularJS是用JavaScript编写，而Angul
  • angular 防抖和节流踩坑 海绵饱饱_wk angularangular.jsjavascript前端
    如果在angualr项目中实现防抖节流，可以使用封装好的模块，比如rxjs。但今天说的是使用原始的防抖节流方法遇到的问题：以节流为例，先贴一段常见的原始节流代码：functionthrottle(fn){   letcanRun=true;//通过闭包保存一个标记   returnfunction(){    if(!canRun)return;//在函数开头判断标记是否为true，不为true则
  • Angular + rxjs 实现 某个方法防抖 clearlove_lwc Angularangular.js前端
    场景：监听输入变化从而触发搜索方法或某个方法的搜索框、输入框等//引入rxjs等包import{Subject}from'rxjs';import{distinctUntilChanged,debounceTime}from'rxjs/operators';举例：search()方法会调用getList()这个方法向后台查询数据//预置方法/*调用后台查询数据接口*/getList(){*****
  • Angular中如何实现防抖和节流 crary,记忆 前端知识总结angular.jsjavascript前端angular
    在Angular中实现防抖和节流的方法有多种，这篇博客主要是详细介绍两种常用的方法：使用RxJS操作符和使用Angular自带的工具。使用RxJS操作符实现防抖和节流：防抖（Debounce）：//简易版import{debounceTime}from'rxjs/operators';input.valueChanges.pipe(debounceTime(300)).subscribe(valu
  • npm ERR! code ETIMEDOUTnpm ERR! syscall connectnpm ERR! errno ETIMEDOUTnpm ERR! network request t 纬领网络 npmvue.jsjavascript
    在安装npminstallrxjs一直出现下列问题npmERR!codeETIMEDOUTnpmERR!syscallconnectnpmERR!errnoETIMEDOUTnpmERR!networkrequesttohttps://registry.npmjs.org/rxjs/-/rxjs-7.5.6.tgzfailed,reason:connectETIMEDOUT104.16.21.35
  • 使用wxt开发跨浏览器插件
    一、背景在使用@crxjs/vite-plugin一段时间后，开发发了welibrary等图书馆插件，为了进一步推广插件计划支持Chrome、Edge浏览器之外的Firefox，为此耗费了不少时间用于调整配置，初步结论如下，1）Firefox对mv2版本支持更多，mv3版本有诸多限制，@crxjs/vite-plugin等工具打包后的产物可能无法运行2）虽然Firefox支持chrome全局变量，
  • 为什么能用 RxJS 取代 Redux ？ rxjsredux
    RxJS在现在的前端用比较少，但是RxJS作为响应式和函数式编程的集大成者，似乎被前端开发者遗忘，可能是学习难度大，可能是有更加方便的解决方案。不是因为Redux更具有性价比，而是RxJS可以打开更大的JS生态空间下面我们先回顾一下Redux是如何运作开始。一、Redux创建一个Store做了哪些事情？以上是一个简单的Redux的工作流。从reducer到视图派发更新的整个流程Redux通常在单页
  • 响应式编程和RxJS介绍 oWSQo
    响应式编程是一种面向数据流和变化传播的编程范式。面向变化传播的编程就是看最初的数据是否会随着后续对应变量的变化而变化。比如当变量B的数值改变后，变量C的数值也随之变动。面向数据流的编程是当监听一系列事件流并对这一系列事件流进行映射、过滤和合并等处理后，再响应整个事件流的回调的过程。例如在ReactiveX编程范式中，数据流被封装在一个叫Observable的对象实例中，通过观察者模式，对数据流进行
  • Angular2-自定义指令@Directive 小处成就大事 Angular
    我们按照下面的步骤一步一步带着思考去学习，相信很容易就能掌握Angular自定义指令,废话不多少，开始学习，你准备好来吗？概述所谓指令就是用于改变一个DOM元素的外观或行为，Angular2为我们封装了很多的内置指令，项目中也无时无刻不在使用指令,Angular2中有三类指令(1).结构型指通过添加和移除DOM元素改变DOM布局的指令，例如：Ngif和Ngfor(2).属性型指令改变元素、组件或其
  • Angular基础教程+Demo项目——尽可能全面一些——第一节 开发菜鸡 前端angular
    第二节预告：生命周期函数、Rxjs、数据请求、路由学习过程中所写的Demo_GitHub——学习Angular——浅度学习Demo官网：https://angular.cn/（官网是最好的老师哦，追求技术的大神可以继续深入啦）Angular前言（跳过即可，自勉而已）一写博客，不例外的喜欢啰嗦一下，本人是广大java后端开发中的一员，但是因为工作需要不得不利用工作之余学习Angular前端，虽然我对
  • RxSwift的使用详解 adaodao3056
    RxSwift的使用详解一.RxSwift简介推荐:RxSwift官方文档中文:RxSwift官方文档的中文翻译RxSwift是Swift函数响应式编程的一个开源库，由Github的ReactiveX组织开发、维护其他语言像C#,Java和JS也有，Rx.Net、RxJava、rxjsRxSwift的目的是让数据/事件流和异步任务能够更方便的序列化处理，能够使用Swift进行响应式编程1.RxSw
  • angular2-directives指令 页神建辑-思而后学 angular2angular2
    属性型指令创建一个自定义hightlight指令示例。import{Directive,ElementRef,HostListener}from'@angular/core';@Directive({selector:'[appHighlight]'})exportclassHighlightDirective{constructor(privateel:ElementRef){}@HostLis
  • rxjs中withLatestFrom操符踩坑记录 无敌喜之郎 rxjs前端angular
    官网描述：每当源Observable发出一个值时，它就会使用该值加上其他输入Observable的最新值来计算一个公式，然后发出该公式的输出。注意点：withLatestFrom中的Observable发出值不会被订阅，只会在下次源Observable发出值进行计算时采用最后发出的值例子：combineLatest([A$,B$//几个Observable]).pipe(withLatestFro
  • RxJs高级教程 Yong_bcf4
    Pipeable操作符从5.5版本开始我们提供了“pipeable操作符”，它们可以通过rxjs/operators来访问(注意"operators"是复数)。相比较于通过在rxjs/add/operator/*中以“打补丁”的方式来获取需要用到的操作符，这是一种更好的方式，注意:如果使用rxjs/operators而不修改构建过程的话会导致更大的包。详见下面的已知问题一节。重命名的操作符由于操作
  • Tips of using RxJS forks1990
    AsyncEventEmitterOhEventEmitterisAngularextension,notRxJS,whatever!asyncEvent=newEventEmitter(true);EventEmitteracceptbooleanargument,subscriptiongetcalledinnextJavaScriptcycle,ifsynceventcausesdead-l
  • 浅谈RxJS WebSocket X01动力装甲 编程开发JavaScriptwebsocket网络协议网络
    RxJSWebSocket是一个强大的库，使开发人员更容易在Web应用程序中使用WebSocket。当与Angular结合使用时，RxJSWebSocket可以帮助简化前端和后端系统之间实时连接的创建和维护。什么是WebSocket？WebSocket是一种通信协议，它允许客户端和服务器通过单个TCP连接进行双向数据交换。与遵循请求-响应模型的HTTP不同，WebSocket提供了一个持久的、低延
  • 开发者要如何跟上快速迭代的技术变化 java成功之路
    总的来说，科技发展的迅速是一件令人兴奋的事情。但如果站在一个技术开发者的角度去看的话，反而是一件心累的事儿，因为想要跟上科技更新的脚步并不是一件容易的事。Javascript就是一个典型的列子。Javascript变得越来越流行，所以大大小小的相关创新一直是层出不穷的，它们相互竞争，最后淘汰掉落后的那个。“你知道Angular1推出了吗？你不知道Angular2已经过时了吗？最近连Angular4
  • Rxjs 函数式编程 响应式编程 观察者模式 推送体系 惰性 glenlg
    新概念：在RxJS中用来解决异步事件管理的的基本概念是：Observable(可观察对象):表示一个概念，这个概念是一个可调用的未来值或事件的集合。Observer(观察者):一个回调函数的集合，它知道如何去监听由Observable提供的值。Subscription(订阅):表示Observable的执行，主要用于取消Observable的执行。Operators(操作符):采用函数式编程风格的
  • angular项目引用 element-angular MAYDAY77
    1、安装element开发指南提供的安装方式：npmi--saveelement-angular2、引入在app.module.ts中引入，imports中不要忘记写。这样就可以直接在根模块中直接使用了。但是要想在子模块中使用element组件，必须在子模块query.module.ts中再次引入,imports中不要忘记写。这样子组件中也能使用了。
  • Angular2中如何使用jquery 杀个程序猿祭天
    Angular2中如何使用jqueryAngular2是以TypeScript语言作为默认编码语言，所以你看到的全部都是.ts结尾的文件。那什么是TypeScript首先，它是一个编译型语言；既然是编译型，那么你像重构、导航、智能提醒这种工具属性就可以发挥出来，所以你会发现使用VSCODE来写Angular简直就是绝配。同时，TypeScript还带来一些ES6/7才有特性，比如let、const
  • Promise的链式调用案例讲解 球球不吃虾 javascrip基础知识前端javascript
    文章目录案例分析问题解读修改建议还有什么其他方式实现这种延迟调用链的吗？1.回调函数（Callback）2.Promise链3.Promise.all和数组映射4.Generator函数和co库5.Observable（如RxJS）6.Async/Await和for...of循环这篇文章通过一个小案例，一起了解Promise的链式调用案例分析这里我模拟某个语音功能的操作流程，每隔一秒钟，我去模拟一
  • Angular2，Springboot，Zuul，Shiro跨域CORS请求踩坑实录 weixin_30564901 javascriptjava前端ViewUI
    前言：前后端分离，业务分离，网关路由等已经成为当下webapplication开发的流行趋势。前端以单页面路由为核心的框架为主体，可以单独部署在nodejs或nginx上。后端以springboot为代表的分布式微服务框架为主体，可以独立运行在任何端口上。相互通过符合restful规范的接口访问或数据交换。在这样的开发模式下，首先需要解决的就是由于跨域而引起的访问，cookie传递以及权限管理问题
  • vue学习（41）消息订阅与发布 哆啦C梦的百宝箱
    知识点消息订阅与发布是一种理念，实现它需要具体的第三方库，比如在angular中我们常用的rxjs,在这里讲的是使用pubsub-js这个库。一种组件间通信的方式，适用于任何组件间通信。使用步骤安装pubsub:npmipubsub-js引入：importpubsubfrom'pubsub-js'订阅：A组件想接收消息，则在A中订阅消息，订阅的回调写在A组件中。...mounted(){//订阅消
  • Angular系列教程之观察者模式和RxJS 偏安zzcoder Angularangular.js观察者模式前端rxjs
    文章目录引言RxJS简介RxJS中的设计模式观察者模式迭代器模式示例代码RxJS在Angular中的应用总结引言在Angular开发中，我们经常需要处理异步操作，例如从后端获取数据或与用户的交互。为了更好地管理这些异步操作，Angular中引入了RxJS（响应式编程库），它基于观察者模式提供了一种优雅的解决方案。本文将介绍RxJS的基本概念和使用方法，并附上示例代码进行说明。RxJS简介RxJS全
  • Angular学习笔记(三) langzitianya 前端Angular教程笔记
    以下内容基于Angular文档中文版的学习目录Observable和RxJSObservable概览定义观察者订阅创建可观察对象多播RxJS库创建可观察对象的函数操作错误处理可观察对象的命名约定Angular中的可观察对象HTTPAsync管道路由器(router)响应式表单(reactiveforms)实际运用输入提示（type-ahead）建议指数化退避NgModule模块元数据模块类别汇总提
  • [译] 认识 rxjs 中的 BehaviorSubject、ReplaySubject 以及 AsyncSubject weixin_34265814 javascriptViewUI
    原文链接：UnderstandingrxjsBehaviorSubject,ReplaySubjectandAsyncSubject原文作者：LuukGruijs；发表于2018年5月4日译者：yk；如需转载，请注明出处，谢谢合作！Subject的作用是实现Observable的多播。由于其Observableexecution是在多个订阅者之间共享的，所以它可以确保每个订阅者接收到的数据绝对相等
  • RxJS 核心概念之Subject Alex__Gong angular2RxJSangular2+
    本文出处：https://segmentfault.com/a/1190000005069851，我做了一部分修改我们在接触到RxJS的时候，不免会有点晕头转向的感觉，对于什么是Subject,什么是Observer,什么是Observable，总感觉晕乎乎的。下面我引用一篇为自认为比较通俗易懂的博文，再加上自己的描述来给大家解释下，弄明白之后对于学习Angular2+有很大的帮助，因为在angu
  • RXJS中Subject, BehaviorSubject, ReplaySubject, AsyncSubject的区别？ 金木讲编程 前端angular.jstypescript
    在RxJS（ReactiveExtensionsforJavaScript）中，Subject、BehaviorSubject、ReplaySubject和AsyncSubject都是Observable的变体，它们用于处理观察者模式中的不同场景。以下是它们之间的主要区别：1、Subject:是一种特殊的Observable，同时也是观察者。可以通过调用next()方法向Subject中推送新的值
  • 【angular教程240111】08异步数据流编程与angular ：promise，Rxjs6.x Biehmltym angular.js前端javascript
    【angular教程240111】08异步数据流编程与angular：promise，Rxjs6.x目录标题一级目录二级目录三级目录〇、编程里的异步1异步编程常见的几种方法2代码示例其中的一些方法：1.回调函数（CallbackFunctions）2.事件监听/发布订阅（EventListeners/Pub-Sub）3.Promise4.RxJS一、Rxjs介绍1使用RxJS的处理HTTP异步请求
  • 桌面上有多个球在同时运动，怎么实现球之间不交叉，即碰撞？ 换个号韩国红果果 html小球碰撞
    稍微想了一下，然后解决了很多bug，最后终于把它实现了。其实原理很简单。在每改变一个小球的x y坐标后，遍历整个在dom树中的其他小球，看一下它们与当前小球的距离是否小于球半径的两倍？若小于说明下一次绘制该小球（设为a）前要把他的方向变为原来相反方向（与a要碰撞的小球设为b），即假如当前小球的距离小于球半径的两倍的话，马上改变当前小球方向。那么下一次绘制也是先绘制b，再绘制a，由于a的方向已经改变
  • 《高性能HTML5》读后整理的Web性能优化内容 白糖_ html5
    读后感         先说说《高性能HTML5》这本书的读后感吧，个人觉得这本书前两章跟书的标题完全搭不上关系，或者说只能算是讲解了“高性能”这三个字，HTML5完全不见踪影。个人觉得作者应该首先把HTML5的大菜拿出来讲一讲，再去分析性能优化的内容，这样才会有吸引力。因为只是在线试读，没有机会看后面的内容，所以不胡乱评价了。  
  • [JShop]Spring MVC的RequestContextHolder使用误区 dinguangx jeeshop商城系统jshop电商系统
        在spring mvc中，为了随时都能取到当前请求的request对象，可以通过RequestContextHolder的静态方法getRequestAttributes()获取Request相关的变量，如request, response等。         在jshop中，对RequestContextHolder的
  • 算法之时间复杂度 周凡杨 java算法时间复杂度效率
          在 计算机科学 中， 算法 的时间复杂度是一个 函数 ，它定量描述了该算法的运行时间。这是一个关于代表算法输入值的 字符串 的长度的函数。时间复杂度常用 大O符号 表述，不包括这个函数的低阶项和首项系数。使用这种方式时，时间复杂度可被称为是 渐近 的，它考察当输入值大小趋近无穷时的情况。 这样用大写O()来体现算法时间复杂度的记法，
  • Java事务处理 g21121 java
    一、什么是Java事务 通常的观念认为，事务仅与数据库相关。 事务必须服从ISO/IEC所制定的ACID原则。ACID是原子性（atomicity）、一致性（consistency）、隔离性（isolation）和持久性（durability）的缩写。事务的原子性表示事务执行过程中的任何失败都将导致事务所做的任何修改失效。一致性表示当事务执行失败时，所有被该事务影响的数据都应该恢复到事务执行前的状
  • Linux awk命令详解 510888780 linux
    一.  AWK 说明   awk是一种编程语言，用于在linux/unix下对文本和数据进行处理。数据可以来自标准输入、一个或多个文件，或其它命令的输出。它支持用户自定义函数和动态正则表达式等先进功能，是linux/unix下的一个强大编程工具。它在命令行中使用，但更多是作为脚本来使用。    awk的处理文本和数据的方式：它逐行扫描文件，从第一行到
  • android permission 布衣凌宇 Permission
    <uses-permission android:name="android.permission.ACCESS_CHECKIN_PROPERTIES" ></uses-permission>允许读写访问"properties"表在checkin数据库中，改值可以修改上传 <uses-permission android:na
  • Oracle和谷歌Java Android官司将推迟 aijuans javaoracle
    北京时间 10 月 7 日，据国外媒体报道，Oracle 和谷歌之间一场等待已久的官司可能会推迟至 10 月 17 日以后进行，这场官司的内容是 Android 操作系统所谓的 Java 专利权之争。本案法官 William Alsup 称根据专利权专家 Florian Mueller 的预测，谷歌 Oracle 案很可能会被推迟。　　该案中的第二波辩护被安排在 10 月 17 日出庭，从目前看来
  • linux shell 常用命令 antlove linuxshellcommand
    grep [options] [regex] [files] /var/root # grep -n "o" * hello.c:1:/* This C source can be compiled with:
  • Java解析XML配置数据库连接(DOM技术连接 SAX技术连接) 百合不是茶 sax技术Java解析xml文档dom技术XML配置数据库连接
        XML配置数据库文件的连接其实是个很简单的问题,为什么到现在才写出来主要是昨天在网上看了别人写的,然后一直陷入其中,最后发现不能自拔 所以今天决定自己完成 ,,,,现将代码与思路贴出来供大家一起学习   XML配置数据库的连接主要技术点的博客; JDBC编程 : JDBC连接数据库 DOM解析XML:  DOM解析XML文件 SA
  • underscore.js 学习（二） bijian1013 JavaScriptunderscore
            Array Functions 所有数组函数对参数对象一样适用。1.first   _.first(array, [n])   别名: head, take       返回array的第一个元素，设置了参数n，就
  • plSql介绍 bijian1013 oracle数据库plsql
    /* * PL/SQL 程序设计学习笔记 * 学习plSql介绍.pdf * 时间：2010-10-05 */ --创建DEPT表 create table DEPT ( DEPTNO NUMBER(10), DNAME NVARCHAR2(255), LOC NVARCHAR2(255) ) delete dept; select
  • 【Nginx一】Nginx安装与总体介绍 bit1129 nginx
    启动、停止、重新加载Nginx nginx 启动Nginx服务器，不需要任何参数u nginx -s stop 快速(强制)关系Nginx服务器 nginx -s quit 优雅的关闭Nginx服务器 nginx -s reload 重新加载Nginx服务器的配置文件 nginx -s reopen 重新打开Nginx日志文件  
  • spring mvc开发中浏览器兼容的奇怪问题 bitray jqueryAjaxspringMVC浏览器上传文件
        最近个人开发一个小的OA项目,属于复习阶段.使用的技术主要是spring mvc作为前端框架,mybatis作为数据库持久化技术.前台使用jquery和一些jquery的插件.     在开发到中间阶段时候发现自己好像忽略了一个小问题,整个项目一直在firefox下测试,没有在IE下测试,不确定是否会出现兼容问题.由于jquer
  • Lua的io库函数列表 ronin47 lua io
    1、io表调用方式：使用io表，io.open将返回指定文件的描述，并且所有的操作将围绕这个文件描述 　　io表同样提供三种预定义的文件描述io.stdin,io.stdout,io.stderr 　　2、文件句柄直接调用方式,即使用file:XXX()函数方式进行操作,其中file为io.open()返回的文件句柄 　　多数I/O函数调用失败时返回nil加错误信息,有些函数成功时返回nil
  • java-26-左旋转字符串 bylijinnan java
    public class LeftRotateString { /** * Q 26 左旋转字符串 * 题目：定义字符串的左旋转操作：把字符串前面的若干个字符移动到字符串的尾部。 * 如把字符串abcdef左旋转2位得到字符串cdefab。 * 请实现字符串左旋转的函数。要求时间对长度为n的字符串操作的复杂度为O(n)，辅助内存为O(1)。 */ pu
  • 《vi中的替换艺术》-linux命令五分钟系列之十一 cfyme linux命令
    vi方面的内容不知道分类到哪里好，就放到《Linux命令五分钟系列》里吧！ 今天编程，关于栈的一个小例子，其间我需要把”S.”替换为”S->”(替换不包括双引号)。 其实这个不难，不过我觉得应该总结一下vi里的替换技术了，以备以后查阅。   1 所有替换方案都要在冒号“:”状态下书写。 2 如果想将abc替换为xyz，那么就这样 :s/abc/xyz/ 不过要特别
  • [轨道与计算]新的并行计算架构 comsci 并行计算
         我在进行流程引擎循环反馈试验的过程中，发现一个有趣的事情。。。如果我们在流程图的每个节点中嵌入一个双向循环代码段，而整个流程中又充满着很多并行路由，每个并行路由中又包含着一些并行节点，那么当整个流程图开始循环反馈过程的时候，这个流程图的运行过程是否变成一个并行计算的架构呢？      
  • 重复执行某段代码 dai_lm android
    用handler就可以了 private Handler handler = new Handler(); private Runnable runnable = new Runnable() { public void run() { update(); handler.postDelayed(this, 5000); } }; 开始计时 h
  • Java实现堆栈（list实现） datageek 数据结构——堆栈
    public interface IStack<T> { //元素出栈，并返回出栈元素 public T pop(); //元素入栈 public void push(T element); //获取栈顶元素 public T peek(); //判断栈是否为空 public boolean isEmpty
  • 四大备份MySql数据库方法及可能遇到的问题 dcj3sjt126com DBbackup
    一：通过备份王等软件进行备份前台进不去？ 用备份王等软件进行备份是大多老站长的选择，这种方法方便快捷，只要上传备份软件到空间一步步操作就可以，但是许多刚接触备份王软件的客用户来说还原后会出现一个问题：因为新老空间数据库用户名和密码不统一，网站文件打包过来后因没有修改连接文件，还原数据库是好了，可是前台会提示数据库连接错误，网站从而出现打不开的情况。 解决方法：学会修改网站配置文件，大多是由co
  • github做webhooks：[1]钩子触发是否成功测试 dcj3sjt126com githubgitwebhook
    转自: http://jingyan.baidu.com/article/5d6edee228c88899ebdeec47.html github和svn一样有钩子的功能，而且更加强大。例如我做的是最常见的push操作触发的钩子操作，则每次更新之后的钩子操作记录都会在github的控制板可以看到！ 工具/原料 github 方法/步骤
  • ">的作用" target="_blank">JSP中的作用 蕃薯耀
    JSP中<base href="<%=basePath%>">的作用 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
  • linux下SAMBA服务安装与配置 hanqunfeng linux
    局域网使用的文件共享服务。 一.安装包： rpm -qa | grep samba samba-3.6.9-151.el6.x86_64 samba-common-3.6.9-151.el6.x86_64 samba-winbind-3.6.9-151.el6.x86_64 samba-client-3.6.9-151.el6.x86_64 samba-winbind-clients
  • guava cache IXHONG cache
    缓存，在我们日常开发中是必不可少的一种解决性能问题的方法。简单的说，cache 就是为了提升系统性能而开辟的一块内存空间。 　　缓存的主要作用是暂时在内存中保存业务系统的数据处理结果，并且等待下次访问使用。在日常开发的很多场合，由于受限于硬盘IO的性能或者我们自身业务系统的数据处理和获取可能非常费时，当我们发现我们的系统这个数据请求量很大的时候，频繁的IO和频繁的逻辑处理会导致硬盘和CPU资源的
  • Query的开始--全局变量,noconflict和兼容各种js的初始化方法 kvhur JavaScriptjquerycss
    这个是整个jQuery代码的开始，里面包含了对不同环境的js进行的处理，例如普通环境，Nodejs，和requiredJs的处理方法。 还有jQuery生成$, jQuery全局变量的代码和noConflict代码详解  完整资源： http://www.gbtags.com/gb/share/5640.htm jQuery 源码：   (
  • 美国人的福利和中国人的储蓄 nannan408
       今天看了篇文章，震动很大，说的是美国的福利。    美国医院的无偿入院真的是个好措施。小小的改善，对于社会是大大的信心。小孩，税费等，政府不收反补，真的体现了人文主义。    美国这么高的社会保障会不会使人变懒？答案是否定的。正因为政府解决了后顾之忧，人们才得以倾尽精力去做一些有创造力，更造福社会的事情，这竟成了美国社会思想、人
  • N阶行列式计算(JAVA) qiuwanchi N阶行列式计算
    package gaodai; import java.util.List; /** * N阶行列式计算 * @author 邱万迟 * */ public class DeterminantCalculation { public DeterminantCalculation(List<List<Double>> determina
  • C语言算法之打渔晒网问题 qiufeihu c算法
    如果一个渔夫从2011年1月1日开始每三天打一次渔，两天晒一次网，编程实现当输入2011年1月1日以后任意一天，输出该渔夫是在打渔还是在晒网。 代码如下：   #include <stdio.h> int leap(int a) /*自定义函数leap()用来指定输入的年份是否为闰年*/ { if((a%4 == 0 && a%100 != 0
  • XML中DOCTYPE字段的解析 wyzuomumu xml
    DTD声明始终以!DOCTYPE开头,空一格后跟着文档根元素的名称,如果是内部DTD,则再空一格出现[],在中括号中是文档类型定义的内容. 而对于外部DTD,则又分为私有DTD与公共DTD,私有DTD使用SYSTEM表示,接着是外部DTD的URL. 而公共DTD则使用PUBLIC,接着是DTD公共名称,接着是DTD的URL.   私有DTD <!DOCTYPErootSYST
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他