JQ, базовые рекомендации для написания кода

Отредактировано: 07 Июня 2018

Учитывайте особенности селекторов

// медленная выборка
$('.container > *');

// лучше
$('.container').children();

Если не указан конкретный селектор, по умолчанию подставляется универсальный (*).

// медленнее
$('.someclass :radio');

// быстрее
$('.someclass input:radio');

Но, не стоит перебарщивать:

// слишком
$('div#myid');
$('div#footer a.myLink');

// достаточно
$('#myid');
$('#footer .myLink');

Выборка по id происходит быстрее чем по class. Чтобы убедиться в этом, воспроизведите код ниже в консоли браузера:

console.time('class');
var list = $('#list');
var items = '<ul>';
 
for (i=0; i<1000; i++) {
    items += '<li class="item' + i + '">item</li>';
}
 
items += '</ul>';
list.html (items);
 
for (i=0; i<1000; i++) {
    var s = $('.item' + i);
}
console.timeEnd('class');
 
console.time('id');
var list = $('#list');
var items = '<ul>';
 
for (i=0; i<1000; i++) {
    items += '<li id="item' + i + '">item</li>';
}
 
items += '</ul>';
list.html (items);
 
for (i=0; i<1000; i++) {
    var s = $('#item' + i);
}
console.timeEnd('id');

Выборка с указанием контекста (конкретного id) быстрее чем без:

// если указан контекст, выборка происходит внутри блока, 
// если не указан, внутри всего элемента.

$('.class', '#class-container').css ('color', '#123456');

Кэшируйте выборку в переменных

Элементы, которые используются в коде несколько раз, лучше заносить в переменные. Так снизится потребление ресурсов, а в случае необходимости, данные будет проще отредактировать.

var trigger='.lable'

$(trigger).on('click',function() {
  var $objTarget = $(this).find('.object');
  if($objTarget.hasClass('active')){
    $objTarget.removeClass('visible');
    setTimeout(function () {$objTarget.removeClass('active')},300);
  }
  else{
    $objTarget.addClass('active');
    setTimeout(function () {$objTarget.addClass('visible')},100);
  }
  $(this).toggleClass('active');
});

Также кешируйте родительские элементы при переходе по DOM. Вместо $('#container li') используйте метод .find

var
	$container = $('#container'),
	$containerLi = $container.find('li'),
	$containerLiSpan= $containerLi.find('span');

Не используйте глобальные переменные

Лучше не использовать глобальные переменные без крайней на то необходимости.

Глобальная переменная	Локальная переменная
item = 5;	var item = 5;

Используйте знак доллара для объектов

Для обозначения переменных содержащих JQ объект лучше использовать знак доллара в начале имени, такой способ обозначения пошел от венгерской нотации. 

Обычные данные	JQ объект
var trigger='.lable'	var $objTarget = $(this).find('.object');

Цепочки при объявлении переменных

Чтобы не писать директиву var для каждой объявляемой переменной, можно объединить переменные в цепочку. 

var
  $first = $('#first'),
  $second = $('#second'),
  value = $first.val(),
  k = 3,
  cookiestring = 'SOMECOOKIESPLEASE',
  i,
  j,
  myArray = {};

Устанавливайте обработчики событий с помощью .on

С помощью .on можно обрабатывать события происходящие даже с динамически созданными объектами.

$( ".item" ).on( "click", "#child", function() {
  console.log( $( this ).text() );
});

Методы по цепочке

Не обязательно обрабатывать каждый метод, вызывая объект снова и снова. Методы могут обрабатываться по цепочке. 

$('.item').on("click",function(){
    $(this)
      .parents('.block')
      .siblings('.item')
      .slideToggle(300);
});

Старайтесь объединять и сокращать блоки кода

Объединяйте блоки кода, там где встречаются похожие функции, или функции относящиеся к одному и тому же элементу.

$( ".item" ).on({
  click: function() {
    $( this ).toggleClass( "active" );
  }, mouseenter: function() {
    $( this ).addClass( "inside" );
  }, mouseleave: function() {
    $( this ).removeClass( "inside" );
  }
});

Чаще используйте нативные функции

Любые фреймворки обрабатывают запросы дольше чем чистый JS, чтобы убедиться в этом, можете воспроизвести следующий код в консоли браузера:

var array = new Array ();
for (var i=0; i<10000; i++) {
    array[i] = 0;
}
 
console.time('native');
var l = array.length;
for (var i=0;i<l; i++) {
    array[i] = i;
}
console.timeEnd('native');
 
console.time('jquery');
$.each (array, function (i) {
    array[i] = i;
});
console.timeEnd('jquery')

Возвращайте False

Если код не возвращает false после действия, страница переходит наверх. Такое поведение особенно не приятно на длинных страницах.

$('#item').on("click",function () {
    // какой-либо код
    return false;
});

tnx