jQuery - это JavaScript библиотека, призванная облегчить и без того нелегкую жизнь веб-разработчика. Благодаря ей мы можем манипулировать DOM-элементами, обрабатывать события, выполнять AJAX-запросы и многое другое с помощью изящного API. И сегодня я хочу дать несколько полезных советов о том, как писать правильный (оптимизированный) jQuery код.
Кэшируйте DOM-элементы
Кэширование DOM-элементов позволяет избежать лишней траты ресурсов если вы собираетесь использовать их в коде несколько раз:
// плохо
h = $('#element').height();
$('#element').css('height',h-20);
// ништяк
$element = $('#element');
h = $element.height();
$element.css('height',h-20);
Также можно закэшировать родительский элемент для дальнейшего обращения к его дочерним элементам:
// плохо
var
$container = $('#container'),
$containerLi = $('#container li'),
$containerLiSpan = $('#container li span');
// ништяк (быстрей)
var
$container = $('#container '),
$containerLi = $container.find('li'),
$containerLiSpan= $containerLi.find('span');
Избегайте глобальных переменных
Убедитесь, что вы ограничиваете область видимости ваших переменных. Это хорошая практика:
// плохо
$element = $('#element');
h = $element.height();
$element.css('height',h-20);
// ништяк
var $element = $('#element');
var h = $element.height();
$element.css('height',h-20);
Используйте Венгерскую нотацию
Размещение $ перед именами переменных поможет вам легко отличать те, которые содержат jQuery-объекты.
// плохо
var ololo = $('#ololo');
var value = $ololo.val();
// ништяк
var $ololo = $('#ololo');
var value = $ololo.val();
Используйте "var" цепочки
Вместо того, что бы использовать "var" каждый раз при объявлении переменной, воспользуйтесь следующей конструкцией:
var
$first = $('#first'),
$second = $('#second'),
value = $first.val(),
k = 3,
cookiestring = 'SOMECOOKIESPLEASE',
i,
j,
myArray = {};
Переменные, которым вы не присваиваете значение сразу, лучше размещать в конце.
Отдавайте предпочтение ".on()"
Начиная с версии 1.7 в jQuery появился метод .on() для создания обработчика того или иного события. Предпочтительней использовать именного его:
// не очень хорошо
$first.click(function(){
$first.css('border','1px solid red');
$first.css('color','blue');
});
$first.hover(function(){
$first.css('border','1px solid red');
})
// так то лучше
$first.on('click',function(){
$first.css('border','1px solid red');
$first.css('color','blue');
})
$first.on('hover',function(){
$first.css('border','1px solid red');
})
Сокращайте jQuery-код
По возможности сокращайте ваш jQuery-код:
// плохо
$first.click(function(){
$first.css('border','1px solid red');
$first.css('color','blue');
});
// ништяк
$first.on('click',function(){
$first.css({
'border':'1px solid red',
'color':'blue'
});
});
Используйте цепочки методов
jQuery дает нам возможность объединять несколько методов в цепочку. Не упусти эту возможность, бро!
// плохо
$second.html(value);
$second.on('click',function(){
alert('hello everybody');
});
$second.fadeIn('slow');
$second.animate({height:'120px'},500);
// ништяк
$second.html(value);
$second.on('click',function(){
alert('hello everybody');
}).fadeIn('slow').animate({height:'120px'},500);
Сохраняйте код читабельным
Если слишком увлекаться предыдущим советом, код может стать неудобным для восприятия. Используйте табуляцию и переносы строк что бы сохранить читабельность:
// плохо
$second.html(value);
$second.on('click',function(){
alert('hello everybody');
}).fadeIn('slow').animate({height:'120px'},500);
// ништяк
$second.html(value);
$second
.on('click',function(){ alert('hello everybody');})
.fadeIn('slow')
.animate({height:'120px'},500);
Сокращайте ваш код
Сокращайте код по возможности:
// плохо
function initVar($myVar) {
if(!$myVar) {
$myVar = $('#selector');
}
}
// ништяк
function initVar($myVar) {
$myVar = $myVar || $('#selector');
}
// плохо
if(collection.length > 0){..}
// ништяк
if(collection.length){..}
Отделяйте (detach) элементы если собираетесь выполнить ресурсоемкие операции над ними
Если вы собрались выполнить ресурсоемкие операции над некоторым элементом, будет лучше сперва отделить его а потом прикрутить назад:
// плохо
var
$container = $("#container"),
$containerLi = $("#container li"),
$element = null;
$element = $containerLi.first();
//... a lot of complicated things
// ништяк
var
$container = $("#container"),
$containerLi = $container.find("li"),
$element = null;
$element = $containerLi.first().detach();
//...те самые трудоемкие операции
$container.append($element);
Знайте нюансы
Прежде чем воспользоваться тем или иным jQuery-методом убедитесь, что нет его более быстрого или предпочтительного эквивалента:
// плохо
$('#id').data(key,value);
// ништяк (быстрей)
$.data('#id',key,value);
Избегайте универсальных селекторов
Вперемешку с другими селекторами универсальный селектор * довольно медленный:
// плохо
$('.container > *');
// ништяк
$('.container').children();
Даже если вы опускаете селектор, универсальный селектор * всеравно применяется:
// плохо
$('.someclass :radio');
// ништяк
$('.someclass input:radio');
Оптимизируйте селекторы
Например, обращение к элементу по его id не требует каких-либо дополнительных селекторов:
// плохо
$('div#myid');
$('div#footer a.myLink');
// ништяк
$('#myid');
$('#footer .myLink');
Не используйте несколько селекторов id:
// плохо
$('#outer #inner');
// ништяк
$('#inner');
Не используйте запрещенные методы
Старайтесь не использовать запрещенные методы.
Исходный материал Writing Better jQuery Code.
