Fork 3.0 JS improvements

Transcript

1. Fork JS improvements November 17th, 2011

2. Summary

3. ‣ General code cleanup Summary

4. ‣ General code cleanup ‣ Variables Summary

5. ‣ General code cleanup ‣ Variables ‣ Event binding Summary

6. ‣ General code cleanup ‣ Variables ‣ Event binding ‣

   jQuery 1.7 Summary

7. General code cleanup

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);

10. General code cleanup Example

11. General code cleanup Style :(

12. General code cleanup Style :)

13. Variables

14. Scope Variables

15. Scope is determined by where a variable is declared, and

    in some cases whether the var keyword is used. Scope Variables

16. Scope: global Variables

17. Can be referenced anywhere in the document but must be:

    Scope: global Variables

18. Can be referenced anywhere in the document but must be:

    ‣ Declared outside a function, with or without the var keyword Scope: global Variables

19. 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 Scope: global Variables

20. Scope: local Variables

21. Can only be referenced within the function it is declared

    but must be: Scope: local Variables

22. Can only be referenced within the function it is declared

    but must be: ‣ Declared inside a function, with the var keyword Scope: local Variables

23. For speed and maintenance Why use variables? Variables

24. Example 1 Variables 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. Example 2 Variables

26. Event binding

27. Event binding Old

28. Event binding New

29. jQuery 1.7

30. http://blog.jquery.com/2011/11/03/jquery-1-7-released/ Changes jQuery 1.7

31. ‣ New event API .on() and .off() used for bind,

    live and delegate Changes jQuery 1.7

32. jQuery 1.7 Bind

33. jQuery 1.7 Bind

34. jQuery 1.7 Live

35. jQuery 1.7 Live

36. jQuery 1.7 Delegate

37. jQuery 1.7 Delegate

38. ‣ New event API: .on() and .off() used for bind,

    live and delegate ‣ Better HTML5 support (footer, header, section, ...) Changes jQuery 1.7

39. ‣ New event API: .on() and .off() used for bind,

    live and delegate ‣ Better HTML5 support (footer, header, section, ...) ‣ event.layerX and event.layerY Changes jQuery 1.7

40. ‣ 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() Changes jQuery 1.7

41. ‣ 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 Changes jQuery 1.7

42. Questions?

43. twitter.com/decthomas [email protected] www.fork-cms.com