Fork JS improvements       November 17th, 2011
Summary
Summary‣   General code cleanup
Summary‣   General code cleanup‣   Variables
Summary‣   General code cleanup‣   Variables‣   Event binding
Summary‣   General code cleanup‣   Variables‣   Event binding‣   jQuery 1.7
General code cleanup
General code cleanupOld      if(!jsFrontend) { var jsFrontend = new Object(); }      jsFrontend =      {          // init ...
General code cleanupNew      var jsFrontend =      {          // init something like a constructor          init: function...
General code cleanupExample
General code cleanupStyle :(
General code cleanupStyle :)
Variables
VariablesScope
VariablesScopeScope is determined by where a variable is declared, and insome cases whether the var keyword is used.
VariablesScope: global
VariablesScope: globalCan be referenced anywhere in the document but must be:
VariablesScope: globalCan be referenced anywhere in the document but must be:‣  Declared outside a function, with or witho...
VariablesScope: globalCan be referenced anywhere in the document but must be:‣  Declared outside a function, with or witho...
VariablesScope: local
VariablesScope: localCan only be referenced within the function it is declared butmust be:
VariablesScope: localCan only be referenced within the function it is declared butmust be:‣  Declared inside a function, w...
VariablesWhy use variables?For speed and maintenance
VariablesExample 1      var value = 5; // gobal since were in the global scope, outside any function      jsFrontend.faq.f...
VariablesExample 2
Event binding
Event bindingOld
Event bindingNew
jQuery 1.7
jQuery 1.7Changeshttp://blog.jquery.com/2011/11/03/jquery-1-7-released/
jQuery 1.7Changes‣   New event API .on() and .off() used for bind, live and    delegate
jQuery 1.7Bind
jQuery 1.7Bind
jQuery 1.7Live
jQuery 1.7Live
jQuery 1.7Delegate
jQuery 1.7Delegate
jQuery 1.7Changes‣   New event API: .on() and .off() used for bind, live and    delegate‣   Better HTML5 support (footer, ...
jQuery 1.7Changes‣   New event API: .on() and .off() used for bind, live and    delegate‣   Better HTML5 support (footer, ...
jQuery 1.7Changes‣   New event API: .on() and .off() used for bind, live and    delegate‣   Better HTML5 support (footer, ...
jQuery 1.7Changes‣   New event API: .on() and .off() used for bind, live and    delegate‣   Better HTML5 support (footer, ...
Questions?
twitter.com/decthomasthomas@fork-cms.com  www.fork-cms.com
Upcoming SlideShare
Loading in …5
×

Fork 3.0 JS improvements

742 views
689 views

Published on

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

  • Be the first to like this

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

No notes for slide

Fork 3.0 JS improvements

  1. 1. Fork JS improvements November 17th, 2011
  2. 2. Summary
  3. 3. Summary‣ General code cleanup
  4. 4. Summary‣ General code cleanup‣ Variables
  5. 5. Summary‣ General code cleanup‣ Variables‣ Event binding
  6. 6. Summary‣ General code cleanup‣ Variables‣ Event binding‣ jQuery 1.7
  7. 7. General code cleanup
  8. 8. General code cleanupOld if(!jsFrontend) { var jsFrontend = new Object(); } jsFrontend = { // init something like a constructor init: function() { // call functions }, // end eoo: true; } $(document).ready(jsFrontend.init);
  9. 9. General code cleanupNew var jsFrontend = { // init something like a constructor init: function() { // call functions } } $(jsFrontend.init);
  10. 10. General code cleanupExample
  11. 11. General code cleanupStyle :(
  12. 12. General code cleanupStyle :)
  13. 13. Variables
  14. 14. VariablesScope
  15. 15. VariablesScopeScope is determined by where a variable is declared, and insome cases whether the var keyword is used.
  16. 16. VariablesScope: global
  17. 17. VariablesScope: globalCan be referenced anywhere in the document but must be:
  18. 18. VariablesScope: globalCan be referenced anywhere in the document but must be:‣ Declared outside a function, with or without the var keyword
  19. 19. VariablesScope: globalCan be referenced anywhere in the document but must be:‣ Declared outside a function, with or without the var keyword‣ Declared inside a function, without the var keyword, but only once the function is called
  20. 20. VariablesScope: local
  21. 21. VariablesScope: localCan only be referenced within the function it is declared butmust be:
  22. 22. VariablesScope: localCan only be referenced within the function it is declared butmust be:‣ Declared inside a function, with the var keyword
  23. 23. VariablesWhy use variables?For speed and maintenance
  24. 24. VariablesExample 1 var value = 5; // gobal since were in the global scope, outside any function jsFrontend.faq.feedback = { init: function() { // variables var number = 3; // local (were already inside this anonymous function) result = 100; // global once this function is called var $header = $(#header); // local (were already inside this anonymous function) $navigation = $(#navigation); // global once this function is called // bind click event $header.on(click, function() { var color = blue; // local endResult = green; // global once this function is called var $body = $(body); // local $frame = $(#frame); // global once this function is called number++; // this variable is declared outside of this functions scope, // so changes will affect not only this functions scope, // but the declaring functions scope // which means that this variable is "re-used" every time }); } }
  25. 25. VariablesExample 2
  26. 26. Event binding
  27. 27. Event bindingOld
  28. 28. Event bindingNew
  29. 29. jQuery 1.7
  30. 30. jQuery 1.7Changeshttp://blog.jquery.com/2011/11/03/jquery-1-7-released/
  31. 31. jQuery 1.7Changes‣ New event API .on() and .off() used for bind, live and delegate
  32. 32. jQuery 1.7Bind
  33. 33. jQuery 1.7Bind
  34. 34. jQuery 1.7Live
  35. 35. jQuery 1.7Live
  36. 36. jQuery 1.7Delegate
  37. 37. jQuery 1.7Delegate
  38. 38. jQuery 1.7Changes‣ New event API: .on() and .off() used for bind, live and delegate‣ Better HTML5 support (footer, header, section, ...)
  39. 39. jQuery 1.7Changes‣ New event API: .on() and .off() used for bind, live and delegate‣ Better HTML5 support (footer, header, section, ...)‣ event.layerX and event.layerY
  40. 40. jQuery 1.7Changes‣ New event API: .on() and .off() used for bind, live and delegate‣ Better HTML5 support (footer, header, section, ...)‣ event.layerX and event.layerY‣ $.isNaN() replaced with $.isNumeric()
  41. 41. jQuery 1.7Changes‣ New event API: .on() and .off() used for bind, live and delegate‣ Better HTML5 support (footer, header, section, ...)‣ event.layerX and event.layerY‣ $.isNaN() replaced with $.isNumeric()‣ $.event.proxy() use $.proxy() instead
  42. 42. Questions?
  43. 43. twitter.com/decthomasthomas@fork-cms.com www.fork-cms.com

×