Your SlideShare is downloading. ×
Fork 3.0 JS improvements
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Fork 3.0 JS improvements

566
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
566
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

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