"observable и computed на пример knockoutjs", Ольга Кобец, moscowjs 29
TRANSCRIPT
Observable и Computed на пример KnockoutJS
1
Hello, MoscowJS29
2
Ну что, начнём?!$(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
10
11
Резюмируя
• Деклативно описывать поведение
• Автоматически обновлять зависимости
12
Observable и Computed
13
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
20
Задача
• Выводить список операций
• Обновлять его по таймеру
21
22
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
27
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
30
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
33
Заглянем под капот
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