Knockout mvvm-m4-slides

692 views

Published on

Playlists : https://www.youtube.com/watch?v=46SzBBZMD3I&list=PLLQgkMVoGtcultfA127vh0wKnls62Qv5d&index=2

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

  • Be the first to like this

No Downloads
Views
Total views
692
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Knockout mvvm-m4-slides

  1. 1. JavaScript Patterns: Spaghetti to Ravioli John Papa @john_papa http://johnpapa.net
  2. 2. Outline  Spaghetti and Ravioli   Separation Patterns Avoiding Globals  Object Literals  Module Pattern    Anonymous Closures Private/Public Members Immediate Invocation  Revealing Module Pattern  Refinements to Module Pattern
  3. 3. Function Spaghetti Code - Wikipedia: http://jpapa.me/spaghetticode
  4. 4. Problems with Spaghetti Code        Mixing of Concerns No clear separation of functionality or purpose Variables/functions added into global scope Potential for duplicate function names Not modular Not easy to maintain No sense of a “container”
  5. 5. Some Examples of Spaghetti Code with JavaScript       Script all over the page Objects are extended in many places in no discernible pattern Everything is a global function Functions are called in odd places Everything is a global Heavy JavaScript logic inside HTML attributes   Obtrusive JavaScript http://en.wikipedia.org/wiki/Unobtrusive_JavaScript
  6. 6. Advantages of Ravioli Code  Objects encapsulate and decouple code  Easy to extend and maintain  Separation of Concerns   Variables/functions are scoped Functionality in closures
  7. 7. Namespaces  Encapsulate your code under a namespace  Avoid collisions  First and easy step towards Ravioli’s var my = my || {}; my.viewmodel = function(){ }
  8. 8. DEMO Namespaces and Separation
  9. 9. Outline     Spaghetti and Ravioli Object Literals Module Pattern Revealing Module Pattern
  10. 10. Object Literals  Benefits  Quick and easy  All members are available  Challenges  “this” problems  Best suited for simple view models and data my.viewmodel = { name: ko.observable(), price: function(x, y){ return x + y; } };
  11. 11. DEMO ViewModel as an Object Literal
  12. 12. Outline     Spaghetti and Ravioli Object Literals Module Pattern Revealing Module Pattern
  13. 13. Module Pattern  Anonymous Closures  Functions for encapsulation  Immediate function invocation  Private and public members
  14. 14. Anonymous Closure  Function expression instead of function definition  Wrapped in parens  Scoped  All vars and functions are enclosed (function () { }());
  15. 15. Immediate Function Invocation  Create a module  Immediately available my.viewmodel = (function(){ var tempValue = 1; return { someVal: "john", add: function(x, y){ this.tempValue = x; return x + y; }; }; })(); Immediate instantiation
  16. 16. Private/Public Members Private member var my.viewmodel = (function(){ var privateVal = 3; return { publicVal: 7, add: function(x, y){ var x = this.publicVal + privateVal; return x + y; }; }; })(); Public members Accessing private members with ‘this’
  17. 17. The Module Pattern  Benefits:     Modularize code into re-useable objects Variables/functions taken out of global namespace Expose only public members Hide plumbing code  Challenges:  Access public and private members differently
  18. 18. DEMO ViewModel as a Module
  19. 19. Outline     Spaghetti and Ravioli Object Literals Module Pattern Revealing Module Pattern
  20. 20. The Revealing Module Pattern  All the Benefits of the Module Patterns +  Makes it clear what is public vs private  Helps clarify "this"  Reveal private functions with different names
  21. 21. Revealing my.viewmodel = (function(){ var privateVal = 3, add: function(x, y){ return x + y; }; return { someVal: privateVal, add: add }; }; })(); Private members Public members
  22. 22. DEMO ViewModel as a Revealing Module
  23. 23. Summary  Spaghetti and Ravioli    Avoid globals Avoid function spaghetti code Separation of presentation, structure, and behavior  3 ViewModel Patterns    Object Literals Module Pattern Revealing Module Pattern Spaghetti to Ravioli
  24. 24. For more in-depth online developer training visit on-demand content from authors you trust

×