Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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

915 views

Published on

Published in: Business, Technology
  • I have done a couple of papers through ⇒⇒⇒WRITE-MY-PAPER.net ⇐⇐⇐ they have always been great! They are always in touch with you to let you know the status of paper and always meet the deadline!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

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

×