"Layman's language rxjs" Reading

1. The observer pattern

The logic into the publisher (in charge of production ⽣ events and notifies all registered observer put up numbers) and the observer (after a publisher is registered on, just received on the handling of the event)

In rxjs in:

  • How to produce ⽣ event, it is the responsibility of the publisher, is ⼯ Observable object as in RxJS in.

  • How to respond to events, it is the responsibility of the observer, in RxJS are determined by the parameters of subscribe.

  • What kind of associate publisher what the observer, that is, when adjusted Using subscribe

2. iterator pattern

Use ⼀ provide through-interface, so Use Application Off Center Weighted completely by this particular data set to achieve shutter mode.

Usually get accustomed functions should contain:

  • · GetCurrent, get the current element is pointed to by the cursor.

  • · MoveToNext, the cursor will move to the next screen elements, after adjustment Using this function, the element getCurrent obtained will be different.

  • · IsDone, have been completed to determine whether all the elements traversed.

Application in rxjs in: after subscribr ongoing push.

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. The operator according to the function, the operator can be divided into the following categories:

• Create class (creation)

· Transformation class (transformation)

· Filter type (filtering)

· The combined category (combination)

· Multicast class (multicasting)

· Error Handling category (error Handling)

Ancillary ⼯ with categories (utility)

• Condition minute ⽀ class (conditional & boolean)

· Total and mathematics classes (mathmatical & aggregate)

Common operators:

1.create (class functions) create Observable objects

2.map, filter (example function) similar to the map array, filter

Observable objects using bind specific binding (not chained calls),: :( binding operator, chain call):

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

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

Implement operator such as map: Every operator is ⼀ functions, no matter what function to achieve, must consider these points under ⾯ features: · returns to the previous new Observable object.

· Unsubscribe and the subscription process upstream and downstream.

· Handle exceptions.

· Timely release of resources.

Our simple map the operator to achieve points on the screen for instructions.

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(),
        });
    });
}
复制代码

. . . Continuous update

Guess you like

Origin blog.csdn.net/weixin_34291004/article/details/91396408