Professional Documents
Culture Documents
break ,case, catch, continue, default, delete, do, else, finally, for, function,
if, in, instanceof, new, return, switch, this, throw, try, typeof, var, void, while,
With
Use of eval or the Function constructor are expensive operations as each time they
are called script engine must convert source code to executable code.
setInterval(doSomethingPeriodically, 1000);
setTimeout(doSomethingAfterFiveSeconds, 5000);
• Use a switch/case statement instead of a series of if/else
Using switch/case is faster when there are more than 2 cases, and it is more
elegant (better organized code). Avoid using it when you have more than
10 cases.
if (x) {
var foo = function() {};
}
• No reason to use wrapper objects for primitive types,
plus they're dangerous.
function foo(element, a, b) {
element.onclick = bar(a, b);
}
function bar(a, b) {
return function() { /* uses a and b */ };
}
• Do not use Multiline string literals
var myString = 'A rather long string of English text, an error message \
actually that just keeps going and going -- an error \
message to make the Energizer ';
var myString = 'A rather long string of English text, an error message ' +
'actually that just keeps going and going -- an error ' + 'message to make the
Energizer';
• For consistency single-quotes (') are preferred to
double-quotes ("). This is helpful when creating strings
that include HTML:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
$(function() {
});
• Load jQuery locally when CDN fails
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined')
{
document.write('<script src="/js/jqeury.js"></script>');
}
</script>
• Always try to use ID as selector
$("#elmID");
$(“div .myCSSClass”)
• Keep your selector simple, don't make it complex
$("p#myID em");
App.hiddenDivs = $('div.hidden');
// later in your application:
App.hiddenDivs.find('span');
• Benchmark Your jQuery Code
Always benchmark your code and see which query is slower to replace it
// Shortcut to log data to the Firebug console
$.l($('div'));
// Get the UNIX timestamp
$.time();
// Log the execution time of a JS block to Firebug
$.lt();
$('div');
$.lt();
// Run a block of code in a for loop to test the execution time
$.bm("var divs = $('.testdiv', '#pageBody');"); // 2353 on Firebug
$('li').each(function() {
$(this).on('click', function() {
$(this).addClass('active');
});
});
$('li').each(function() {
var $this = $(this);
$this.on('click', function() {
$this.addClass('active');
});
});
// Slow
$('div.container > *');
// Faster
$('.container').children();
• Using filtering methods instead of pseudo selectors
$('.item:first')
$('.item').eq(0)
$.ajax({
url: '/remote/url',
data: {
param1: 'value1',
param2: 'value2'
}
});
• References
• http://tutorialzine.com/
• http://viralpatel.net/blogs/category/javascript/
• https://learn.jquery.com/
• http://www.sitepoint.com/javascript/jquery/