Fork 3.0 JS improvements
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
645
On Slideshare
636
From Embeds
9
Number of Embeds
2

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 9

http://www.linkedin.com 6
https://www.linkedin.com 3

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Fork JS improvements November 17th, 2011
  • 2. Summary
  • 3. Summary‣ General code cleanup
  • 4. Summary‣ General code cleanup‣ Variables
  • 5. Summary‣ General code cleanup‣ Variables‣ Event binding
  • 6. Summary‣ General code cleanup‣ Variables‣ Event binding‣ jQuery 1.7
  • 7. General code cleanup
  • 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. General code cleanupNew var jsFrontend = { // init something like a constructor init: function() { // call functions } } $(jsFrontend.init);
  • 10. General code cleanupExample
  • 11. General code cleanupStyle :(
  • 12. General code cleanupStyle :)
  • 13. Variables
  • 14. VariablesScope
  • 15. VariablesScopeScope is determined by where a variable is declared, and insome cases whether the var keyword is used.
  • 16. VariablesScope: global
  • 17. VariablesScope: globalCan be referenced anywhere in the document but must be:
  • 18. VariablesScope: globalCan be referenced anywhere in the document but must be:‣ Declared outside a function, with or without the var keyword
  • 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. VariablesScope: local
  • 21. VariablesScope: localCan only be referenced within the function it is declared butmust be:
  • 22. VariablesScope: localCan only be referenced within the function it is declared butmust be:‣ Declared inside a function, with the var keyword
  • 23. VariablesWhy use variables?For speed and maintenance
  • 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. VariablesExample 2
  • 26. Event binding
  • 27. Event bindingOld
  • 28. Event bindingNew
  • 29. jQuery 1.7
  • 30. jQuery 1.7Changeshttp://blog.jquery.com/2011/11/03/jquery-1-7-released/
  • 31. jQuery 1.7Changes‣ New event API .on() and .off() used for bind, live and delegate
  • 32. jQuery 1.7Bind
  • 33. jQuery 1.7Bind
  • 34. jQuery 1.7Live
  • 35. jQuery 1.7Live
  • 36. jQuery 1.7Delegate
  • 37. jQuery 1.7Delegate
  • 38. jQuery 1.7Changes‣ New event API: .on() and .off() used for bind, live and delegate‣ Better HTML5 support (footer, header, section, ...)
  • 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. 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. 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. Questions?
  • 43. twitter.com/decthomasthomas@fork-cms.com www.fork-cms.com