jQuery is...

...until it's a mess

cache selectors

$options = {
  productName: '#product-name',
  productId:   '#product-id'
};

$($options.productName).text('Shoes');
$($options.productId).val(12);
  • DRY
  • performance
if (something) {
    $('#productBox').text('yes');
} else {
    $('#productBox').text('no');
}
options = {
  $productName: $('#product-name'),
  $productId:   $('#product-id')
};

options.$productName.text('Shoes');
options.$productId.val(12);
$productBox = $('#productBox');

if (something) {
    $productBox.text('yes');
} else {
    $productBox.text('no');
}

gain through chain

$productBox.text('yes');
$productBox.val(12);
$productBox.addClass('special');
$productBox.removeClass('default');
  • DRY
  • performance
$productBox
  .text('yes')
  .val(12)
  .addClass('special')
  .removeClass('default');

find it! fast!

$('#house .garden');
$('#car wheel[number=4]');
$(this).parents('.tree').children('.bush');
  • always use .find()
  • performance!
$('#house').find('.garden');
$('#car').find('wheel[number=4]');
$(this).parents('.tree').find('.bush');

append only once

var brands = ['nike', 'adidas', 'puma', 'asics', 'clae'],
    list   = $('.brands');

$.each(brands, function(index, brand) {
  list.append('<li data-brand="brand-+ index + ">' + brand + '</li>');
});
  • performance
var brands  = ['nike', 'adidas', 'puma', 'asics', 'clae'],
    list    = $('.brands'),
    tmpList = '';

$.each(brands, function(index, brand) {
  tmplList += '<li data-brand="brand-+ index + ">' + brand + '</li>';
});

list.html(tmpList);
//array.join('') even faster

delegate events

$('ul.list li a').on('click', function(){
  alert('YO!');
})

//Q: what happens if you add another li with a link?
  • performance
  • flexible
var $list = $('.list');

$list.on('click', 'a', function() {
  alert('YO!');
});

mo' quotes mo' problems

var thisThing = "<div class=\'are you kidding me\'>" + '×' + "</div>");
  • in JS always use '
  • " only inside '
var thisThing = '<div class="are you kidding me">' + '×' + '</div>');

be transparent

//
var $list = $('.list');

$list.on('click', 'a', function() {
  alert('YO!');
});







//
setTimeout(function(){
  ....
}, 200);
//
var $list = $('.list');

$list.on('click.listAlert', 'a', listClickHandler);

listClickHandler = function() {
  alert('YO!');
}
  • debugging!
//not needed? turn it off!
$list.off('click.listAlert');
//
setTimeout(thisOtherFunction, 200);

thisOtherFunction = function() {...};

if? else? return!

if (value === 'horse') {
  animal = true;
} else {
  animal = false;
}
if (value === 'horse') {
  animal = true;
  return;
}

animal = false;
  • cleaner
  • less eval

hide() your wife

$('thisBox').hide();
//$('thisBox').show();
[hidden] {
  display: none
}
  • performance
$('thisBox').attr('hidden', true);
//$('thisBox').attr('hidden', false);

pattern, please (1/3)

$(document).ready(function () {

  var numArticles = 8;

  function doCheckout() {
    alert('doCheckout');
  }

  $('#js-btn-checkout').click(function() {
    doCheckout(numArticles, $('#js-list-articles'));
  });
  
});

pattern, please! (2/3)

var s,
ShoppingCart = {

  settings: {
    numArticles:  8,
    $listArticles: $('#js-list-articles'),
    $btnCheckout:  $('#js-btn-checkout')
  },
  init: function() {
    s = this.settings;
    ShoppingCart.bindUIActions();
  },
  bindUIActions: function() {
    s.$btnCheckout.on('click', ShoppingCart.checkoutHandler);
  },

  doCheckout: function(maxArticles) {
    // proceed to checkout
    alert('doCheckout');
  },

  checkoutHandler: function() {
    ShoppingCart.doCheckout(s.numArticles, s.$listArticles);
  }

};

(function() {

  ShoppingCart.init();
  SomeOtherModule.init();

})();

pattern, yay! (3/3)

  • structure!
  • namespace
  • maintainability
  • extendable

Oldie but a goldie

Questions?

jQuery best practices

By hannes

jQuery best practices

This sums up the basic best practices for jQuery since 2011.

  • 1,075
Loading comments...

More from hannes