...

Wzorzec MVC w JavaScript

by functionite

on

Report

Category:

Technology

Download: 0

Comment: 0

14,389

views

Comments

Description

Prezentacja na temat wzorca Smalltalk MVC w JavaScript.
Download Wzorzec MVC w JavaScript

Transcript

  • 1. MVC
  • 2. ModelViewController
  • 3. MV*?
  • 4. Backbone.js
  • 5. Ember.js
  • 6. i tak dalej
  • 7. http://todomvc.com/
  • 8. Smalltalk MVC
  • 9. widok odpowiada za UI (wdomyśle - DOM)
  • 10. var view = function(model, controller) {// widok wie o kontrolerze i modelu};
  • 11. model reprezentuje warstwędanych - np. item w TodoLiście lub całą listę TODO
  • 12. var model = function() {var data = {title: "foobar"};// model nie wie o kontrolerze i widoku};
  • 13. kontroler decyduje oprzepływie danych w aplikacji
  • 14. var controller = function(model) {return {setNewTitle : function(val) {}};};
  • 15. sterowanie odbywa się poprzez kontroler (wzorzec Strategy)
  • 16. widok wydaje komunikaty dla modelu przez kontroler
  • 17. var view = function(model, controller) {controller.setNewTitle($("input.title").val());};
  • 18. widok obserwuje zmiany wmodelu
  • 19. widok wie o zmianach wmodelu dzięki implementacji wzorca Observer w modelu
  • 20. jednym słowem mającreferencję do modelu możemy nasłuchiwać na zdarzenia,które on emituje
  • 21. var view = function(model, controller) {model.addEventListener("updated", function() {console.log("cos sie zmienilo w modelu");});};
  • 22. widok może mieć podwidoki (wzorzec Composite)
  • 23. widok korzysta z danych modelu
  • 24. var view = function(model, controller) {var items = model.getItems();};
  • 25. widok tworzy lub „dostaje”kontroler
  • 26. var view = function(model, controller) {var controller = controller || makeMyController();};
  • 27. model musi udostępniać coś w rodzaju addEventListener
  • 28. np. w ten sposób:var model = function() {var data = {title: "foobar"}; return { addEventListener : function() {//... } };};
  • 29. jak widok daje znać, że coś sięzmieniło i należy uaktualnić dane w modelu?
  • 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. w uproszczeniu...
  • 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. krok po kroku w przypadku TODO List
  • 34. 1. umożliwiamy dodanienowego itemu TODO w widoku- np. nasłuchując na kliknięcieprzycisku dodaj
  • 35. 1. dodajemy item TODO wwidoku2. widok przekazuje nazwę (np.„zrób zakupy”) tego itemu dokontrolera
  • 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. 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. 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();
  • Fly UP