Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

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

595 visualizaciones

Publicado el

Доклад Ольги "Observable и Computed на пример KnockoutJS" на MoscowJS 29

Publicado en: Software
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

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

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

×