| @@ -0,0 +1,135 | |||
|
|
1 | # Observable | |
|
|
2 | ||
|
|
3 | Универсальный способ организации потока сообщений. Данный механизм может | |
|
|
4 | использоваться для оповещения об изменениях состояний объектов или для доставки | |
|
|
5 | самостоятельных событий, например, связанных с действиями пользователя. | |
|
|
6 | ||
|
|
7 | Является реализацией классического шаблона наблюдателя с возможность сообщить | |
|
|
8 | о коце потока событий. Данная реализация не содержит никаких дополнительных | |
|
|
9 | функций, таких как фильтрация, канал с состоянием, преобразования сообщений и | |
|
|
10 | т.п. Это сделано специально, чтобы реализация оставалась максимально простой. | |
|
|
11 | ||
|
|
12 | Пример того, как можно создать последовательность из 10 событий: | |
|
|
13 | ||
|
|
14 | ```ts | |
|
|
15 | var events = new Observable(async (notify, error, complete) => { | |
|
|
16 | // цикл в котором возникает событие | |
|
|
17 | for(let i = 0; i < 10; i++) { | |
|
|
18 | await delay(1000); | |
|
|
19 | // в качестве данных передается номер события | |
|
|
20 | notify(i); | |
|
|
21 | } | |
|
|
22 | // по окончании последовательности информируем, что событий больше не будет | |
|
|
23 | compelte(); | |
|
|
24 | }); | |
|
|
25 | ||
|
|
26 | // создаем окно с отображением хода событий | |
|
|
27 | var progress = showProgress({ min: 0, max: 9, current: 0}); | |
|
|
28 | ||
|
|
29 | // подписываемся на события | |
|
|
30 | events.on( | |
|
|
31 | // обработчик очередного события | |
|
|
32 | msg => { | |
|
|
33 | progress.setValue(msg); | |
|
|
34 | }. | |
|
|
35 | // обработчик ошибки | |
|
|
36 | e => { | |
|
|
37 | progress.showError(e); | |
|
|
38 | }, | |
|
|
39 | // обработчик конца потока | |
|
|
40 | () => { | |
|
|
41 | progress.close(); | |
|
|
42 | } | |
|
|
43 | ); | |
|
|
44 | ||
|
|
45 | // ожидание следующего события | |
|
|
46 | let firstEvent = await events.next(); | |
|
|
47 | ``` | |
|
|
48 | ||
|
|
49 | `Observable` можно создавать из событий другого объекта, например, виджета: | |
|
|
50 | ||
|
|
51 | ```ts | |
|
|
52 | // клсс | |
|
|
53 | class Canvas { | |
|
|
54 | readonly mouseMove: IObservable<[number,number]> | |
|
|
55 | ||
|
|
56 | postCreate() { | |
|
|
57 | // превращаем события виджета в Observable | |
|
|
58 | this.mouseMove = new Observable<[number,number]>((notify) => { | |
|
|
59 | this.mousePad.on('mousemove',(e) => notify([e.clientX, e.clientY]) ); | |
|
|
60 | }); | |
|
|
61 | } | |
|
|
62 | } | |
|
|
63 | ||
|
|
64 | ``` | |
|
|
65 | ||
|
|
66 | Если объект инкапсулирует в себе `Observable`, он также может сохранить методы | |
|
|
67 | для оповещения подписчиков для дальнейшего их использования внутри класса. | |
|
|
68 | ||
|
|
69 | ```ts | |
|
|
70 | // класс, который будет генерировать события местоположения | |
|
|
71 | class PositionTracker implements IDestroyable { | |
|
|
72 | // _nextPosition и _complete будут связаны с position при создании | |
|
|
73 | // экземпляра PositionTracker. | |
|
|
74 | _nextPosition: (pos: Position) => void | |
|
|
75 | _complete: () => void | |
|
|
76 | ||
|
|
77 | readonly position: IObservable<Position> | |
|
|
78 | ||
|
|
79 | // конструктор | |
|
|
80 | constructor(...args: any[]) { | |
|
|
81 | super(args); | |
|
|
82 | ||
|
|
83 | // создаем Observable | |
|
|
84 | this.position = new Observable<Position>((notify, error, complete) => { | |
|
|
85 | // сохраняем методы для оповещения о новом местоположении | |
|
|
86 | this._nextPosition = notify; | |
|
|
87 | // метод об оповещении конца потока событий | |
|
|
88 | this._complete = complete | |
|
|
89 | }); | |
|
|
90 | } | |
|
|
91 | ||
|
|
92 | // метод для очистки ресурсов | |
|
|
93 | destroy() { | |
|
|
94 | this._complete(); | |
|
|
95 | ||
|
|
96 | super(); | |
|
|
97 | } | |
|
|
98 | } | |
|
|
99 | ||
|
|
100 | ``` | |
|
|
101 | ||
|
|
102 | ## Observable и последовательности | |
|
|
103 | ||
|
|
104 | Можно сичтать, что `Observable` это некоторая аналогия итератора только в | |
|
|
105 | парадигме событийного (или реактивного) программировния. Следует также понимать, | |
|
|
106 | что при переходе от синхронного процедурного программирования к событийному так | |
|
|
107 | же меняется и направление управления (Inverse Of Control), что означает | |
|
|
108 | следующее: | |
|
|
109 | ||
|
|
110 | * при работе с итераторами клиенты сами определяют момент чтения следующего | |
|
|
111 | элемента последовательности. | |
|
|
112 | * при работе с `Observable` клиенты вынуждены обрабатывать эти события по мере | |
|
|
113 | их поступления и не могут на это повлиять. | |
|
|
114 | ||
|
|
115 | Последний пункт можно изменить применив, например, буффер или канал с | |
|
|
116 | состоянием, т.е. очередь, но данные механизмы выходят за рамки простого шаблона | |
|
|
117 | наблюдателя. | |
|
|
118 | ||
|
|
119 | ```ts | |
|
|
120 | while(1) { | |
|
|
121 | // ожидаем следующее событие, по сути это подписка только на одно событие | |
|
|
122 | let next = await events.next(); | |
|
|
123 | ||
|
|
124 | // такой цикл может пропускать сообщения, поскольку асинхронная операция | |
|
|
125 | // позволит возобновить создание новых событий, на которые мы не подписаны | |
|
|
126 | await processEvent(next); | |
|
|
127 | ||
|
|
128 | // не только асинхронные операции могут привести к пропуску события | |
|
|
129 | // например вызов метода, который приводит к созданию события так же | |
|
|
130 | // приведет к тому, что созданное событие не будет обработано в текущем | |
|
|
131 | // цикле | |
|
|
132 | doSmthAndRiseEvent(); | |
|
|
133 | } | |
|
|
134 | ||
|
|
135 | ``` No newline at end of file | |
| @@ -0,0 +1,193 | |||
|
|
1 | import { IObservable, IDestroyable, ICancellation } from './interfaces'; | |
|
|
2 | import { Cancellation } from './Cancellation' | |
|
|
3 | import { argumentNotNull } from './safe'; | |
|
|
4 | ||
|
|
5 | ||
|
|
6 | interface Handler<T> { | |
|
|
7 | (x: T): void | |
|
|
8 | } | |
|
|
9 | ||
|
|
10 | interface Initializer<T> { | |
|
|
11 | (notify: Handler<T>, error?: (e: any) => void, complete?: () => void): void; | |
|
|
12 | } | |
|
|
13 | ||
|
|
14 | // TODO: think about to move this interfaces.ts and make it public | |
|
|
15 | interface IObserver<T> { | |
|
|
16 | next(event: T): void | |
|
|
17 | ||
|
|
18 | error(e: any): void | |
|
|
19 | ||
|
|
20 | complete(): void | |
|
|
21 | } | |
|
|
22 | ||
|
|
23 | const noop = () => {}; | |
|
|
24 | ||
|
|
25 | export class Observable<T> implements IObservable<T> { | |
|
|
26 | private _once = new Array<IObserver<T>>(); | |
|
|
27 | ||
|
|
28 | private _observers = new Array<IObserver<T>>(); | |
|
|
29 | ||
|
|
30 | ||
|
|
31 | private _complete: boolean | |
|
|
32 | ||
|
|
33 | private _error: any | |
|
|
34 | ||
|
|
35 | constructor(func?: Initializer<T>) { | |
|
|
36 | if (func) | |
|
|
37 | func( | |
|
|
38 | this._notifyNext.bind(this), | |
|
|
39 | this._notifyError.bind(this), | |
|
|
40 | this._notifyCompleted.bind(this) | |
|
|
41 | ); | |
|
|
42 | } | |
|
|
43 | ||
|
|
44 | /** | |
|
|
45 | * Registers handlers for the current observable object. | |
|
|
46 | * | |
|
|
47 | * @param next the handler for events | |
|
|
48 | * @param error the handler for a error | |
|
|
49 | * @param complete the handler for a completion | |
|
|
50 | * @returns {IDestroyable} the handler for the current subscription, this | |
|
|
51 | * handler can be used to unsubscribe from events. | |
|
|
52 | * | |
|
|
53 | */ | |
|
|
54 | on(next: Handler<T>, error?: Handler<any>, complete?: () => void): IDestroyable { | |
|
|
55 | argumentNotNull(next, "next"); | |
|
|
56 | ||
|
|
57 | let me = this; | |
|
|
58 | ||
|
|
59 | let observer: IObserver<T> & IDestroyable = { | |
|
|
60 | next: next, | |
|
|
61 | error: error ? error.bind(null) : noop, | |
|
|
62 | complete: complete ? complete.bind(null) : noop, | |
|
|
63 | ||
|
|
64 | destroy() { | |
|
|
65 | me._removeObserver(this); | |
|
|
66 | } | |
|
|
67 | } | |
|
|
68 | ||
|
|
69 | this._addObserver(observer); | |
|
|
70 | ||
|
|
71 | ||
|
|
72 | return observer; | |
|
|
73 | } | |
|
|
74 | ||
|
|
75 | private _addObserver(observer: IObserver<T>) { | |
|
|
76 | if (this._complete) { | |
|
|
77 | try { | |
|
|
78 | if (this._error) | |
|
|
79 | observer.error(this._error); | |
|
|
80 | else | |
|
|
81 | observer.complete(); | |
|
|
82 | } catch (e) { | |
|
|
83 | this.onObserverException(e); | |
|
|
84 | } | |
|
|
85 | } else { | |
|
|
86 | this._observers.push(observer); | |
|
|
87 | } | |
|
|
88 | } | |
|
|
89 | ||
|
|
90 | /** | |
|
|
91 | * Waits for the next event. This method can't be used to read messages | |
|
|
92 | * as a sequence since it can skip some messages between calls. | |
|
|
93 | * | |
|
|
94 | * @param ct a cancellation token | |
|
|
95 | */ | |
|
|
96 | next(ct: ICancellation = Cancellation.none): Promise<T> { | |
|
|
97 | return new Promise<T>((resolve, reject) => { | |
|
|
98 | let observer: IObserver<T> = { | |
|
|
99 | next: resolve, | |
|
|
100 | error: reject, | |
|
|
101 | complete: () => reject("No more events are available") | |
|
|
102 | }; | |
|
|
103 | ||
|
|
104 | if (this._addOnce(observer) && ct.isSupported()) { | |
|
|
105 | ct.register((e) => { | |
|
|
106 | this._removeOnce(observer); | |
|
|
107 | reject(e); | |
|
|
108 | }); | |
|
|
109 | } | |
|
|
110 | }); | |
|
|
111 | } | |
|
|
112 | ||
|
|
113 | private _addOnce(observer: IObserver<T>) { | |
|
|
114 | if (this._complete) { | |
|
|
115 | try { | |
|
|
116 | if (this._error) | |
|
|
117 | observer.error(this._error); | |
|
|
118 | else | |
|
|
119 | observer.complete(); | |
|
|
120 | } catch (e) { | |
|
|
121 | this.onObserverException(e); | |
|
|
122 | } | |
|
|
123 | return false; | |
|
|
124 | } | |
|
|
125 | ||
|
|
126 | this._once.push(observer); | |
|
|
127 | return true; | |
|
|
128 | } | |
|
|
129 | ||
|
|
130 | protected onObserverException(e: any) { | |
|
|
131 | } | |
|
|
132 | ||
|
|
133 | private _removeOnce(d: IObserver<T>) { | |
|
|
134 | let i = this._once.indexOf(d); | |
|
|
135 | if (i >= 0) | |
|
|
136 | this._once.splice(i, 1); | |
|
|
137 | } | |
|
|
138 | ||
|
|
139 | private _removeObserver(d: IObserver<T>) { | |
|
|
140 | let i = this._observers.indexOf(d); | |
|
|
141 | if (i >= 0) | |
|
|
142 | this._observers.splice(i, 1); | |
|
|
143 | } | |
|
|
144 | ||
|
|
145 | private _notify(guard: (observer: IObserver<T>) => void) { | |
|
|
146 | if (this._once.length) { | |
|
|
147 | for (let i = 0; i < this._once.length; i++) | |
|
|
148 | guard(this._once[i]); | |
|
|
149 | this._once = []; | |
|
|
150 | } | |
|
|
151 | ||
|
|
152 | for (let i = 0; i < this._observers.length; i++) | |
|
|
153 | guard(this._observers[i]); | |
|
|
154 | } | |
|
|
155 | ||
|
|
156 | protected _notifyNext(evt: T) { | |
|
|
157 | let guard = (observer: IObserver<T>) => { | |
|
|
158 | try { | |
|
|
159 | observer.next(evt); | |
|
|
160 | } catch (e) { | |
|
|
161 | this.onObserverException(e); | |
|
|
162 | } | |
|
|
163 | } | |
|
|
164 | ||
|
|
165 | this._notify(guard); | |
|
|
166 | } | |
|
|
167 | ||
|
|
168 | protected _notifyError(e: any) { | |
|
|
169 | let guard = (observer: IObserver<T>) => { | |
|
|
170 | try { | |
|
|
171 | observer.error(e); | |
|
|
172 | } catch (e) { | |
|
|
173 | this.onObserverException(e); | |
|
|
174 | } | |
|
|
175 | } | |
|
|
176 | ||
|
|
177 | this._notify(guard); | |
|
|
178 | this._observers = []; | |
|
|
179 | } | |
|
|
180 | ||
|
|
181 | protected _notifyCompleted() { | |
|
|
182 | let guard = (observer: IObserver<T>) => { | |
|
|
183 | try { | |
|
|
184 | observer.complete(); | |
|
|
185 | } catch (e) { | |
|
|
186 | this.onObserverException(e); | |
|
|
187 | } | |
|
|
188 | } | |
|
|
189 | ||
|
|
190 | this._notify(guard); | |
|
|
191 | this._observers = []; | |
|
|
192 | } | |
|
|
193 | } No newline at end of file | |
| @@ -1,6 +1,6 | |||
|
|
1 | 1 | import * as format from '../text/format' |
|
|
2 | 2 | import { argumentNotNull } from '../safe'; |
|
|
3 |
import { Observable } from '../ |
|
|
|
3 | import { Observable } from '../Observable' | |
|
|
4 | 4 | import { IDestroyable } from '../interfaces'; |
|
|
5 | 5 | |
|
|
6 | 6 | export const DebugLevel = 400; |
|
|
1 | NO CONTENT: file was removed |
|
|
1 | NO CONTENT: file was removed |
General Comments 0
You need to be logged in to leave comments.
Login now