Fork 3.0 JS improvements
0 likes559 views
The document summarizes improvements made in a codebase and to jQuery. It overviews general code cleanup including simplifying an initialization pattern and variable scoping. It also details changes to event binding syntax to use the new .on() and .off() methods instead of bind, live, and delegate. The document finally outlines updates in jQuery 1.7 such as these changes to event handling, added support for HTML5 elements, and replacement of methods like isNaN().
Fork 3.0 JS improvements
- 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
- 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. General code cleanup New var jsFrontend = { // init something like a constructor init: function() { // call functions } } $(jsFrontend.init);
- 11. General code cleanup Style :(
- 12. General code cleanup Style :)
- 13. Variables
- 14. Variables Scope
- 15. Variables Scope Scope is determined by where a variable is declared, and in some cases whether the var keyword is used.
- 17. Variables Scope: global Can be referenced anywhere in the document but must be:
- 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. 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
- 21. Variables Scope: local Can only be referenced within the function it is declared but must be:
- 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. Variables Why use variables? For speed and maintenance
- 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 }); } }
- 26. Event binding
- 29. jQuery 1.7
- 31. jQuery 1.7 Changes ‣ New event API .on() and .off() used for bind, live and delegate
- 32. jQuery 1.7 Bind
- 33. jQuery 1.7 Bind
- 34. jQuery 1.7 Live
- 35. jQuery 1.7 Live
- 38. jQuery 1.7 Changes ‣ New event API: .on() and .off() used for bind, live and delegate ‣ Better HTML5 support (footer, header, section, ...)
- 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. 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. 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. Questions?