Skip to content

Latest commit

 

History

History
72 lines (67 loc) · 6.9 KB

jQuery.md

File metadata and controls

72 lines (67 loc) · 6.9 KB

Или все библиотеки со схожим API, где мы ищем элементы по селекторам и манипулируем ими как с js-переменными, например:

  var $newMessage = $('<li class="js-message" />');
  var $messageList = $body.find('ul.js-messages');
  $messageList.append($newMessage);

  1. все классы, которые используем для поиска по DOM-у должны начинаться с префикса js-;

    Например, есть кнопка, по клику открывающая попап - нам надо продублировать ее класс и добавить туда этот префикс:

     <div class="open-popup-button js-open-popup-button"></div>

    В итоге в js-файлах мы используем только второй класс:

     $('.js-open-popup-button').click(...);

    Это поможет избежать неожиданной поломки скриптов при смене верстки и наоборот.

  2. Кэшировать все найденные элементы;

    Плохо:

    $('.js-element').show();
$('.js-element').find('.js-children').doSomething();
$('.js-element').attr('data-id', 123);

    Хорошо:

     var $element = $('.js-element');
 $element.show();
 $element.find('.js-children').doSomething();
 $element.attr('data-id', 123);

  3. Конкатенировать селекторы, если с элементами будет проводиться одна и та же работа;

     $('form p').addClass('valid');
 $('form li').addClass('valid');
 $('form span').addClass('valid');
 // - это лучше заменить на это:
 $('form p, form li, form span').addClass('valid');

  4. Все переменные, которые поддерживают jQuery API, должны начинаться со знака $;

    Например:

     var $body = $('body');
 var $lists = $body.find('ul');

    А тут уже не jQuery API и переменные не должны начинаться с $

     var chatBox = document.getElementById('chat-box');  // потому что это нативной метод, который тоже возвращает нативной DOM-элемент
var firstList = $lists[0];  // потому что изъятие по индексу возвращает уже нативной DOM-элемент

  5. Обработчики событий всегда именовать;

    // Надо не просто делать 
$(window).scroll(...);
// а
$(window).on('scroll.myComponent', function (event) {...});

    Это позволит легко отсоединять обработчики, когда нужда в них отпадет.

  6. Поддерживать модульность;

    Так как идеология jquery не несет никаких знаний по тому, как организовывать более-менее сложные приложения (когда больше 3-х элементов на странице), то приходится все придумывать самим. Главные принципы, которым лучше следовать, чтобы код был чистый, а архитектура предсказуемой и понятной для других участников команды:

    • делить приложение на смысловые блоки. Все, что смотрится, как отдельный независимый элемент должно быть вынесено в отдельный блок. Весь js-код по нему должен быть в отдельном файле и строго отделен от остального приложения. У этого кода должен быть четкий и понятный интерфейс, который бы позволял внешнему миру общаться с блоком;
    • гарантировать независимость двух одинаковых блоков на одной странице друг от друга. То есть, если на странице два слайдера, то заранее на архитектурном уровне побеспокоиться, чтобы никакие события первого слайдера не влияли на второй;
    • Предыдущего условия (независимости однородных блоков) можно достичь, если js-код каждого блока обрамлять в класс, а затем для каждого встречного html-блока в верстке создавать по инстансу класса. В инстанс класса тогда можно сохранять сам DOM-элемент и потом только через него искать все вложенные элементы и только на них вешать обработчики;
    • Выше было требование, что все обработчики должны быть отименованы. Тут это принимает еще более строгий характер — имена обработчиков для разных инстансов одного и того же класса должны быть уникальными, чтобы $(block).off(...) отключал события только для текущего инстанса блока, не для всех инстансов, а то неожиданно для разработчика сразу будут отключены обработчики события для всех слайдеров на странице;
    • Также классы позволяют сделать структуру всех блоков одинаковой и предсказуемой — зная, как устроен блок slider, уже можно предсказать, как устроены блоки calendar и dropdown. У всех у них будут методы инициализации и поиска вложенных DOM-элементов, у всех будет код, который навешивает события, у всех будет интерфейс по удалению инстанса и тд. Так что лучше сразу позаботиться об одинаковой структуре и все максимально стандартизировать.