Пишем правильный код на jQuery

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 = {};

Переменные, которым вы не присваиваете значение сразу, лучше размещать в конце.

ПОЛЕЗНО  Простой аккордеон на jQuery

Отдавайте предпочтение «.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');

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

 

ПОЛЕЗНО  NProgress: прогресс-бар как на YouTube и Medium

Старайтесь не использовать запрещенные методы.

 

Исходный материал Writing Better jQuery Code.