"Observable и Computed на пример KnockoutJS", Ольга Кобец, MoscowJS 29
0 likes677 views
Документ посвящен концепциям реактивного программирования с использованием Knockout.js, включая описание observable и computed. Приведены примеры кода для создания и работы с этими элементами, демонстрирующие их функциональность, подписки и реактивное обновление данных. Также рассматриваются другие реализации реактивного программирования и полезные ссылки на дополнительные материалы.
![Оповещение
a(42);
----> a._notifySubscribers();
----> a._subscribers[0].callback(); // 42
37](https://image.slidesharecdn.com/reactiveprogramming-160331163723/85/Observable-Computed-KnockoutJS-MoscowJS-29-37-320.jpg)
"Observable и Computed на пример KnockoutJS", Ольга Кобец, MoscowJS 29
- 1. Observable и Computed на пример KnockoutJS 1
- 3. Ну что,начнём?! $(function () { // ... }); 01. 02. 03. 3
- 4. А теперь пора? if (document.readyState === 'complete') { ready(); } else { window.addEventListener('load', ready); } 01. 02. 03. 04. 05. 4
- 5. 1. Реактивное программирование 2. Observable и Сomputed 3. Заглянем под капот 4. Другие реализации 5
- 8. “I have no ... idea” Erik Meijer 8
- 9. // 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. 10
- 11. 11
- 12. Резюмируя • Деклативно описывать поведение • Автоматически обновлять зависимости 12
- 14. Observable • Поддерживает чтение и запись • Можно подписаться 14
- 15. // Create // Write value // Read value var myObservable = ko.observable(); myObservable(42); myObservable(); 01. 02. 03. 04. 05. 06. 15
- 16. // 42 Подписка на изменения var myObservable = ko.observable(); myObservable .subscribe(value => console.log(value)); myObservable(42); 01. 02. 03. 16
- 17. Computed • Вычисляется из зависимостей • Поддерживает только чтение • Можно подписаться 17
- 18. // 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
- 19. 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. 20
- 21. Задача • Выводить список операций • Обновлять его по таймеру 21
- 22. 22
- 23. 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
- 24. Операция 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
- 25. Получение данных get('/operations') .then(data => view.operations(data)); 01. 02. 25
- 27. 27
- 28. 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
- 29. Ещё • Добавить фильтр по id 29
- 30. 30
- 31. view.sortedOperation() view.filter() Хранение данных view.filter = ko.observable(''); view.filteredOperations = ko.computed(() => { return filter( , ); }); 01. 02. 03. 04. 05. 06. 07. 31
- 32. XHR operations sortedOp filteredOp sort filter DOM 32
- 33. 33
- 35. a() Пример var a = ko.observable(); var b = ko.computed(() => + 1); 01. 02. 35
- 36. Подписка var a = ko.observable(); a.subscribe(value => console.log(value)); ----> a._subscribers.push({ callback: callback }); 01. 02. 36
- 38. Вычислительный контекст • Стек из контекстов • Регистрация в контексте 38
- 39. Чтение и регистрация a(); ----> ko._context.register(a); 39
- 40. Создание контекста var b = ko.computed(() => a() + 1;); ----> ko._context.create(b); ----> b._evaluate(); ----> ko._context.register(a); ----> a.subscribe(() => b._evaluate();); ----> ko._context.remove(); 40
- 41. Создание computed 1. Вызываем конструктор Computed 2. Computed создаёт контекст 3. Knockout вычисляет Computed 4. Computed подписывается на зависимости 5. Computed удаляет вычислительный контекст 41
- 43. Reactive Extentions • Пример bit.ly/rx-example • Доклад bit.ly/rx-talk 43
- 44. Elm • Пример bit.ly/elm-example • Доклад bit.ly/elm-talk 44
- 45. Спасибо за внимание. Вопросы? • Оля Кобец, Яндекс • Twitter @homyasusina • Пример bit.ly/ko-example • Слайды bit.ly/homyasusina-talk 45