Embed Size (px)
DESCRIPTION
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
Citation preview
Fork JS improvementsNovember 17th, 2011
Summary
‣ General code cleanup
Summary
‣ General code cleanup
‣ Variables
Summary
‣ General code cleanup
‣ Variables
‣ Event binding
Summary
‣ General code cleanup
‣ Variables
‣ Event binding
‣ jQuery 1.7
Summary
General code cleanup
General code cleanup
Oldif(!jsFrontend) { var jsFrontend = new Object(); }
jsFrontend ={ // init something like a constructor init: function() { // call functions },
// end eoo: true;}
$(document).ready(jsFrontend.init);
General code cleanup
New
var jsFrontend ={ // init something like a constructor init: function() { // call functions }}
$(jsFrontend.init);
General code cleanup
Example
General code cleanup
Style :(
General code cleanup
Style :)
Variables
Scope
Variables
Scope is determined by where a variable is declared, and in some cases whether the var keyword is used.
Scope
Variables
Scope: global
Variables
Can be referenced anywhere in the document but must be:
Scope: global
Variables
Can be referenced anywhere in the document but must be:
‣ Declared outside a function, with or without the var keyword
Scope: global
Variables
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
Scope: local
Variables
Can only be referenced within the function it is declared but must be:
Scope: local
Variables
Can only be referenced within the function it is declared but must be:
‣ Declared inside a function, with the var keyword
Scope: local
Variables
For speed and maintenance
Why use variables?
Variables
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 }); }}
Example 2
Variables
Event binding
Event binding
Old
Event binding
New
jQuery 1.7
http://blog.jquery.com/2011/11/03/jquery-1-7-released/
Changes
jQuery 1.7
‣ New event API .on() and .off() used for bind, live and delegate
Changes
jQuery 1.7
jQuery 1.7
Bind
jQuery 1.7
Bind
jQuery 1.7
Live
jQuery 1.7
Live
jQuery 1.7
Delegate
jQuery 1.7
Delegate
‣ New event API: .on() and .off() used for bind, live and delegate
‣ Better HTML5 support (footer, header, section, ...)
Changes
jQuery 1.7
‣ 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
‣ 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
‣ 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
Questions?
