Successfully reported this slideshow.
Your SlideShare is downloading. ×

Fork 3.0 JS improvements

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
Protocol-Oriented MVVM
Protocol-Oriented MVVM
Loading in …3
×

Check these out next

1 of 43 Ad

Fork 3.0 JS improvements

Download to read offline

With the launch of version 3.0 of Fork CMS, we included some JS improvements. The adjustments made were mostly for consistency and performance reasons. Feel free to contribute at http://github.com/forkcms/forkcms

With the launch of version 3.0 of Fork CMS, we included some JS improvements. The adjustments made were mostly for consistency and performance reasons. Feel free to contribute at http://github.com/forkcms/forkcms

Advertisement
Advertisement

More Related Content

Slideshows for you (19)

Viewers also liked (19)

Advertisement

Recently uploaded (20)

Advertisement

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 cleanup Old 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 cleanup New var jsFrontend = { // init something like a constructor init: function() { // call functions } } $(jsFrontend.init);
  10. 10. General code cleanup Example
  11. 11. General code cleanup Style :(
  12. 12. General code cleanup Style :)
  13. 13. Variables
  14. 14. Variables Scope
  15. 15. Variables Scope Scope is determined by where a variable is declared, and in some cases whether the var keyword is used.
  16. 16. Variables Scope: global
  17. 17. Variables Scope: global Can be referenced anywhere in the document but must be:
  18. 18. Variables Scope: global Can be referenced anywhere in the document but must be: ‣ Declared outside a function, with or without the var keyword
  19. 19. Variables Scope: global Can 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. Variables Scope: local
  21. 21. Variables Scope: local Can only be referenced within the function it is declared but must be:
  22. 22. Variables Scope: local Can only be referenced within the function it is declared but must be: ‣ Declared inside a function, with the var keyword
  23. 23. Variables Why use variables? For speed and maintenance
  24. 24. Variables Example 1 var value = 5; // gobal since we're in the global scope, outside any function jsFrontend.faq.feedback = { init: function() { // variables var number = 3; // local (we're already inside this anonymous function) result = 100; // global once this function is called var $header = $('#header'); // local (we're 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 function's scope, // so changes will affect not only this function's scope, // but the declaring function's scope // which means that this variable is "re-used" every time }); } }
  25. 25. Variables Example 2
  26. 26. Event binding
  27. 27. Event binding Old
  28. 28. Event binding New
  29. 29. jQuery 1.7
  30. 30. jQuery 1.7 Changes http://blog.jquery.com/2011/11/03/jquery-1-7-released/
  31. 31. jQuery 1.7 Changes ‣ New event API .on() and .off() used for bind, live and delegate
  32. 32. jQuery 1.7 Bind
  33. 33. jQuery 1.7 Bind
  34. 34. jQuery 1.7 Live
  35. 35. jQuery 1.7 Live
  36. 36. jQuery 1.7 Delegate
  37. 37. jQuery 1.7 Delegate
  38. 38. jQuery 1.7 Changes ‣ New event API: .on() and .off() used for bind, live and delegate ‣ Better HTML5 support (footer, header, section, ...)
  39. 39. jQuery 1.7 Changes ‣ 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.7 Changes ‣ 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.7 Changes ‣ 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/decthomas thomas@fork-cms.com www.fork-cms.com

×