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

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 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. Variables
Scope

15. Variables
Scope
Scope is determined by where a variable is declared, and in
some cases whether the var keyword is used.

16. Variables
Scope: global

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

20. Variables
Scope: local

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

25. Variables
Example 2

26. Event binding

27. Event binding
Old

28. Event binding
New

29. jQuery 1.7

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

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

36. jQuery 1.7
Delegate

37. jQuery 1.7
Delegate

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?

43. twitter.com/decthomas
thomas@fork-cms.com
www.fork-cms.com