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?

twitter.com/decthomasthomas@fork-cms.comwww.fork-cms.com