##// END OF EJS Templates
implab » implabjs-core
RSS

Clone from http://hg.code.sf.net/p/implabjs/core

the documentation on observables is added...
cin -
r26:0b0a30e050ba propose observables
parent child
Show More
Show file before | Show file after | Hide comments
@@ -31,7 +31,7 events.on(
31 // обработчик очередного события
31 // обработчик очередного события
32 msg => {
32 msg => {
33 progress.setValue(msg);
33 progress.setValue(msg);
34 },
34 }.
35 // обработчик ошибки
35 // обработчик ошибки
36 e => {
36 e => {
37 progress.showError(e);
37 progress.showError(e);
@@ -41,40 +41,55 events.on(
41 progress.close();
41 progress.close();
42 }
42 }
43 );
43 );
44
45 // ожидание следующего события
46 let firstEvent = await events.next();
44 ```
47 ```
45
48
46 Пример создания `Observable` из событий другого объекта, например, виджета:
49 `Observable` можно создавать из событий другого объекта, например, виджета:
47
50
48 ```ts
51 ```ts
49 postCreate() {
52 // клсс
50 // превращаем события виджета в Observable
53 class Canvas {
51 this.mouseMove = new Observable((notify) => {
54 readonly mouseMove: IObservable<[number,number]>
52 this.moveArea.on('mousemove',(x) => notify(x.) );
55
53 });
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 }
54 }
62 }
55
63
56 ```
64 ```
57
65
58 Пример инициализации `Observable` внутри класса и генерация событий:
66 Если объект инкапсулирует в себе `Observable`, он также может сохранить методы
67 для оповещения подписчиков для дальнейшего их использования внутри класса.
59
68
60 ```ts
69 ```ts
61
70 // класс, который будет генерировать события местоположения
62 class PositionWidget extends Widget {
71 class PositionTracker implements IDestroyable {
72 // _nextPosition и _complete будут связаны с position при создании
73 // экземпляра PositionTracker.
63 _nextPosition: (pos: Position) => void
74 _nextPosition: (pos: Position) => void
64
65 _complete: () => void
75 _complete: () => void
66
76
67 readonly position: Observable<Position>;
77 readonly position: IObservable<Position>
68
78
69 constructor(...args[]) {
79 // конструктор
80 constructor(...args: any[]) {
70 super(args);
81 super(args);
71
82
83 // создаем Observable
72 this.position = new Observable<Position>((notify, error, complete) => {
84 this.position = new Observable<Position>((notify, error, complete) => {
85 // сохраняем методы для оповещения о новом местоположении
73 this._nextPosition = notify;
86 this._nextPosition = notify;
87 // метод об оповещении конца потока событий
74 this._complete = complete
88 this._complete = complete
75 });
89 });
76 }
90 }
77
91
92 // метод для очистки ресурсов
78 destroy() {
93 destroy() {
79 this._complete();
94 this._complete();
80
95
@@ -82,4 +97,39 class PositionWidget extends Widget {
82 }
97 }
83 }
98 }
84
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
85 ``` No newline at end of file
135 ```
Show file before | Show file after | Hide comments
@@ -31,7 +31,7 events.on(
31 // обработчик очередного события
31 // обработчик очередного события
32 msg => {
32 msg => {
33 progress.setValue(msg);
33 progress.setValue(msg);
34 },
34 }.
35 // обработчик ошибки
35 // обработчик ошибки
36 e => {
36 e => {
37 progress.showError(e);
37 progress.showError(e);
@@ -41,45 +41,146 events.on(
41 progress.close();
41 progress.close();
42 }
42 }
43 );
43 );
44
45 // ожидание следующего события
46 let firstEvent = await events.next();
44 ```
47 ```
45
48
46 Пример создания `Observable` из событий другого объекта, например, виджета:
49 `Observable` можно создавать из событий другого объекта, например, виджета:
47
50
48 ```ts
51 ```ts
49 postCreate() {
52 // клсс
50 // превращаем события виджета в Observable
53 class Canvas {
51 this.mouseMove = new Observable((notify) => {
54 readonly mouseMove: IObservable<[number,number]>
52 this.moveArea.on('mousemove',(x) => notify(x.) );
55
53 });
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 }
54 }
62 }
55
63
56 ```
64 ```
57
65
58 Пример инициализации `Observable` внутри класса и генерация событий:
66 Если объект инкапсулирует в себе `Observable`, он также может сохранить методы
67 для оповещения подписчиков для дальнейшего их использования внутри класса.
59
68
60 ```ts
69 ```ts
61
70 // класс, который будет генерировать события местоположения
62 class PositionWidget extends Widget {
71 class PositionTracker implements IDestroyable {
72 // _nextPosition и _complete будут связаны с position при создании
73 // экземпляра PositionTracker.
63 _nextPosition: (pos: Position) => void
74 _nextPosition: (pos: Position) => void
64
65 _complete: () => void
75 _complete: () => void
66
76
67 readonly position: Observable<Position>;
77 readonly position: IObservable<Position>
68
78
69 constructor(...args[]) {
79 // конструктор
80 constructor(...args: any[]) {
70 super(args);
81 super(args);
71
82
83 // создаем Observable
72 this.position = new Observable<Position>((notify, error, complete) => {
84 this.position = new Observable<Position>((notify, error, complete) => {
85 // сохраняем методы для оповещения о новом местоположении
73 this._nextPosition = notify;
86 this._nextPosition = notify;
87 // метод об оповещении конца потока событий
74 this._complete = complete
88 this._complete = complete
75 });
89 });
76 }
90 }
77
91
92 // метод для очистки ресурсов
78 destroy() {
93 destroy() {
79 this._complete();
94 this._complete();
80
95
81 super();
96 super();
82 }
97 }
83 }
98 }
99 ```
84
100
101 Существует также несколько варинатов получения сообщений
102
103 ```ts
104 // регистрация метода для получений событий
105 let subscription = pushEvents.on((msg) => {
106 displayPopup(msg);
107 });
108
109 // подписку можно отменить, после чего обработчики больше не будут вызываться
110 subcription.destroy();
111
112 // если требуется получить только одно сообщение можно использовать
113 // асинхронный метод next(ct?: ICancellation)
114
115 let msg = await pushEvents.next();
116
117 // пример метода для получения координат с карты, который использует
118 // событие нажатия мышью для определения координат.
119
120 class Map {
121 /**
122
123 Получает координаты по щелчку мыши.
124
125 @async
126
127 @returns [lon,lat]
128
129 */
130 async peekCoordinates(ct: ICancellation = Cancellation.none) {
131 // получаем событие клика
132 let evt = this.viewport.click.next(ct);
133
134 // преобразуем позицию на экране в координаты карты
135 return this.clientToCoodinates([evt.clientx,evt.clientY]);
136 }
137 }
138
139
140 let map : Map; // где-то объявлено
141
142 // пример получения координат с карты
143 let coords = await map.peekCoordinates();
144
145 ```
146
147 ## Observable и последовательности
148
149 Можно сичтать, что `Observable` это некоторая аналогия итератора только в
150 парадигме событийного (или реактивного) программировния. Следует также понимать,
151 что при переходе от синхронного процедурного программирования к событийному так
152 же меняется и направление управления (Inverse Of Control), что означает
153 следующее:
154
155 * при работе с итераторами клиенты сами определяют момент чтения следующего
156 элемента последовательности.
157 * при работе с `Observable` клиенты вынуждены обрабатывать эти события по мере
158 их поступления и не могут на это повлиять.
159
160 Последний пункт можно изменить применив, например, буффер или канал с
161 состоянием, т.е. очередь, но данные механизмы выходят за рамки простого шаблона
162 наблюдателя.
163
164 ```ts
165 // обработка в цикле не гарантирует получения всех сообщений
166 while(1) {
167 // ожидаем следующее событие, по сути это подписка только на одно событие
168 let next = await events.next();
169
170 // такой цикл может пропускать сообщения, поскольку асинхронная операция
171 // позволит возобновить создание новых событий, на которые мы не подписаны
172 await processEvent(next);
173
174 // не только асинхронные операции могут привести к пропуску события
175 // например вызов метода, который приводит к созданию события так же
176 // приведет к тому, что созданное событие не будет обработано в текущем
177 // цикле
178 doSmthAndRiseEvent();
179 }
180
181 // для получения всех сообщений нужно регистрировать подписчика
182 events.on((data) => {
183 // будет вызван для всех сообщений
184 processEvent(data);
185 });
85 ``` No newline at end of file
186 ```
Show file before | Show file after | Hide comments
@@ -176,6 +176,7 export class Observable<T> implements IO
176
176
177 this._notify(guard);
177 this._notify(guard);
178 this._observers = [];
178 this._observers = [];
179 this._complete = true;
179 }
180 }
180
181
181 protected _notifyCompleted() {
182 protected _notifyCompleted() {
@@ -189,5 +190,6 export class Observable<T> implements IO
189
190
190 this._notify(guard);
191 this._notify(guard);
191 this._observers = [];
192 this._observers = [];
193 this._complete = true;
192 }
194 }
193 } No newline at end of file
195 }
Show file before | Show file after | Hide comments
@@ -17,20 +17,58 tape('events sequence example', async t
17 await delay(0);
17 await delay(0);
18 notify(i);
18 notify(i);
19 }
19 }
20 complete();
20 resolve();
21 resolve();
21 });
22 });
22 });
23 });
23
24
24 let count = 0;
25 let count = 0;
25 events.on(x => count = count + x);
26 let complete = false;
27 events.on(x => count = count + x, null, () => complete = true);
26
28
27 let first = await events.next();
29 let first = await events.next();
28
30
29 t.equals(first, 0, "the first event");
31 t.equals(first, 0, "the first event");
32 t.false(complete, "the sequence is not complete");
30
33
31 await done;
34 await done;
32
35
33 t.equals(count, 45, "the summ of the evetns");
36 t.equals(count, 45, "the summ of the evetns");
37 t.true(complete, "the sequence is complete");
38
39 t.end();
40 });
41
42 tape('event sequence termination', async t => {
43 let events: IObservable<number>
44
45 let done = new Promise<void>((resolve) => {
46 events = new Observable<number>(async (notify, fail, complete) => {
47 await delay(0);
48 notify(1);
49 complete();
50 notify(2);
51 complete();
52 fail("Sequence terminated");
53 resolve();
54 });
55 });
56
57 let count = 0;
58 events.on(() => {}, (e) => count++, () => count++);
59
60 let first = await events.next();
61 t.equals(first, 1, "the first message");
62 try {
63 await events.next();
64 t.fail("shoud throw an exception");
65 } catch(e) {
66 t.pass("the sequence is terminated");
67 }
68
69 await done;
70
71 t.equals(count, 1, "the sequence must be terminated once");
34
72
35 t.end();
73 t.end();
36 }); No newline at end of file
74 });
General Comments 0
You need to be logged in to leave comments. Login now