"Observable и Computed на пример KnockoutJS", Ольга Кобец, MoscowJS 29

Observable и Computed
на пример KnockoutJS
1

Ну что,начнём?!
$(function () {
// ...
});
01.
02.
03.
3

А теперь пора?
if (document.readyState === 'complete') {
ready();
} else {
window.addEventListener('load', ready);
}
01.
02.
03.
04.
05.
4

1. Реактивное программирование
2. Observable и Сomputed
3. Заглянем под капот
4. Другие реализации
5

Реактивное
программирование
6

“I have no ... idea”
Erik Meijer
8

// 3
// Hello, World
var a = 1;
var b = 2;
var sum = a + b;
console.log(sum);
a = 'Hello, ';
b = 'World';
console.log(sum);
01.
02.
03.
04.
05.
06.
07.
9

Резюмируя
• Деклативно описывать поведение
• Автоматически обновлять зависимости
12

Observable
• Поддерживает чтение и запись
• Можно подписаться
14

// Create
// Write value
// Read value
var myObservable = ko.observable();
myObservable(42);
myObservable();
01.
02.
03.
04.
05.
06.
15

// 42
Подписка на изменения
var myObservable = ko.observable();
myObservable
.subscribe(value => console.log(value));
myObservable(42);
01.
02.
03.
16

Computed
• Вычисляется из зависимостей
• Поддерживает только чтение
• Можно подписаться
17

// Create
// Read value
// Subscribe to change
var myComputed = ko.computed(
() => myObservable() + 1
);
myComputed();
myComputed.subscribe(onChange);
01.
02.
03.
04.
05.
06.
07.
08.
18

a() b()
// 3
// Hello, 2
// Hello, World
var a = ko.observable(1);
var b = ko.observable(2);
var sum = ko.computed(() => + );
console.log(sum());
sum.subscribe(value => console.log(value));
a('Hello, ');
b('World');
01.
02.
03.
04.
05.
06.
07.
19

Задача
• Выводить список операций
• Обновлять его по таймеру
21

key
insert
update
Хранение данных
view.operations = ko.collection({
: data => data.id,
: data => new Operation(data),
: (item, data) => item.data(data)
});
01.
02.
03.
04.
05.
23

Операция
function Operation(data) {
var view = this;
view.id = data.id;
view.data = ko.observable(data);
view.progress = ko.computed(() => {
return view.data().progress;
};
}
01.
02.
03.
04.
05.
06.
07.
08.
24

Получение данных
get('/operations')
.then(data => view.operations(data));
01.
02.
25

Ещё
• Добавить сортировку
26

view.operation() view.sort()
view.sort = ko.observable('id');
view.columns = {
id: item => item.id,
progress: item => item.progress()
}
view.sortedOperations = ko.computed(() => {
return sort( , );
});
01.
02.
03.
04.
05.
06.
07.
08.
28

Ещё
• Добавить фильтр по id
29

view.sortedOperation()
view.filter()
view.filter = ko.observable('');
view.filteredOperations = ko.computed(() => {
return filter(
,
);
});
01.
02.
03.
04.
05.
06.
07.
31

XHR
operations sortedOp filteredOp
sort filter
DOM
32

Заглянем под капот
34

a()
Пример
var a = ko.observable();
var b = ko.computed(() => + 1);
01.
02.
35

Подписка
var a = ko.observable();
a.subscribe(value => console.log(value));
----> a._subscribers.push({ callback: callback });
01.
02.
36

Оповещение
a(42);
----> a._notifySubscribers();
----> a._subscribers[0].callback(); // 42
37

Вычислительный контекст
• Стек из контекстов
• Регистрация в контексте
38

Чтение и регистрация
a();
----> ko._context.register(a);
39

Создание контекста
var b = ko.computed(() => a() + 1;);
----> ko._context.create(b);
----> b._evaluate();
----> ko._context.register(a);
----> a.subscribe(() => b._evaluate(););
----> ko._context.remove();
40

Создание computed
1. Вызываем конструктор Computed
2. Computed создаёт контекст
3. Knockout вычисляет Computed
4. Computed подписывается на зависимости
5. Computed удаляет вычислительный контекст
41

Другие реализации
42

Reactive Extentions
• Пример bit.ly/rx-example
• Доклад bit.ly/rx-talk
43

Elm
• Пример bit.ly/elm-example
• Доклад bit.ly/elm-talk
44

Спасибо за внимание. Вопросы?
• Оля Кобец, Яндекс
• Twitter @homyasusina
• Пример bit.ly/ko-example
• Слайды bit.ly/homyasusina-talk
45

"Observable и Computed на пример KnockoutJS", Ольга Кобец, MoscowJS 29

More Related Content

"Observable и Computed на пример KnockoutJS", Ольга Кобец, MoscowJS 29