Wzorzec MVC w JavaScript

16,843 views

Published on

Prezentacja na temat wzorca Smalltalk MVC w JavaScript.

Published in: Technology
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
16,843
On SlideShare
0
From Embeds
0
Number of Embeds
11,540
Actions
Shares
0
Downloads
22
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

Wzorzec MVC w JavaScript

  1. 1. MVC
  2. 2. ModelViewController
  3. 3. MV*?
  4. 4. Backbone.js
  5. 5. Ember.js
  6. 6. i tak dalej
  7. 7. http://todomvc.com/
  8. 8. Smalltalk MVC
  9. 9. widok odpowiada za UI (w domyśle - DOM)
  10. 10. var view = function(model, controller) { // widok wie o kontrolerze i modelu};
  11. 11. model reprezentuje warstwędanych - np. item w TodoLiście lub całą listę TODO
  12. 12. var model = function() { var data = { title: "foobar" }; // model nie wie o kontrolerze i widoku};
  13. 13. kontroler decyduje oprzepływie danych w aplikacji
  14. 14. var controller = function(model) { return { setNewTitle : function(val) { } };};
  15. 15. sterowanie odbywa się poprzez kontroler (wzorzec Strategy)
  16. 16. widok wydaje komunikaty dla modelu przez kontroler
  17. 17. var view = function(model, controller) { controller.setNewTitle($("input.title").val());};
  18. 18. widok obserwuje zmiany w modelu
  19. 19. widok wie o zmianach wmodelu dzięki implementacji wzorca Observer w modelu
  20. 20. jednym słowem mającreferencję do modelu możemy nasłuchiwać na zdarzenia, które on emituje
  21. 21. var view = function(model, controller) { model.addEventListener("updated", function() { console.log("cos sie zmienilo w modelu"); });};
  22. 22. widok może mieć podwidoki (wzorzec Composite)
  23. 23. widok korzysta z danych modelu
  24. 24. var view = function(model, controller) { var items = model.getItems();};
  25. 25. widok tworzy lub „dostaje” kontroler
  26. 26. var view = function(model, controller) { var controller = controller || makeMyController();};
  27. 27. model musi udostępniać coś w rodzaju addEventListener
  28. 28. np. w ten sposób:var model = function() { var data = { title: "foobar" }; return { addEventListener : function() { //... } };};
  29. 29. jak widok daje znać, że coś sięzmieniło i należy uaktualnić dane w modelu?
  30. 30. var view = function(model, controller) { controller.setNewTitle($("input.title").val());};var controller = function(model) { return { setNewTitle : function(val) { if (val !== "") { model.set("title", val); } else { throw new Error("validation error"); } } };};
  31. 31. w uproszczeniu...
  32. 32. var view = function(model, controller) { controller.setNewTitle($("input.title").val()); model.addEventListener("title:changed", function(data) { $("input.title").val(data.value); });};var model = function() { var data = { title: "foobar" }, observer = makeObserver(); return { set: function(key, val) { data[key] = val; observer.trigger(key + ":changed"); }, addEventListener: observer.addEventListener };};var controller = function(model) { return { setNewTitle : function(val) { if (val !== "") { model.set("title", val); } else { throw new Error("validation error"); } } };};
  33. 33. krok po kroku w przypadku TODO List
  34. 34. 1. umożliwiamy dodanienowego itemu TODO w widoku- np. nasłuchując na kliknięcieprzycisku dodaj
  35. 35. 1. dodajemy item TODO wwidoku2. widok przekazuje nazwę (np.„zrób zakupy”) tego itemu dokontrolera
  36. 36. 1. dodajemy item TODO w widoku2. widok przekazuje nazwę tego itemu dokontrolera3. kontroler sprawdza, czy dana wartośćjest poprawna i tworzy model itemu(itemModel) po czym dodaje go do listylistModel
  37. 37. 1. dodajemy item TODO w widoku2. widok przekazuje nazwę tego itemu dokontrolera3. kontroler sprawdza, czy dana wartośćjest poprawna i tworzy model itemu(itemModel) po czym dodaje go do listylistModel4. Model listModel dodaje nowy item iemituje zdarzenie „itemAdded”
  38. 38. 1. dodajemy item TODO w widoku2. widok przekazuje nazwę tego itemu do kontrolera3. kontroler sprawdza, czy dana wartość jest poprawna i tworzymodel itemu (itemModel) po czym dodaje go do listy listModel4. Model listModel dodaje nowy item i emituje zdarzenie„itemAdded”5. widok odpowiedzialny za wyświetlanie listy itemównasłuchuje na zdarzenie „itemAdded” i odpowiednio reagujeczyszcząc dotychczasową listę itemów i aktualizując ją o dane zlistModel - np. var items = listModel.getItems();

×