Skip to content

jquery.md

Latest commit

 

History

History
126 lines (94 loc) · 4.2 KB

jquery.md

File metadata and controls

126 lines (94 loc) · 4.2 KB

jQuery

jQuery — это JavaScript, поэтому код подчиняется в том числе стилю JS.

Именование

Переменные, содержащие jQuery-коллекции, должны иметь префикс $:

// Плохо, нет префикса
const links = $('#menu').find('.js-menu-link');

// Хорошо, есть префикс
const $links = $('#menu').find('.js-menu-link');

Создание элементов

При создании пустого элемента закрывающие теги не используем:

// Плохо, лишние символы
let $el = $('<div/>');
let $el = $('<div></div>');

// Хорошо
let $el = $('<div>');

Элементы с атрибутами и/или контентом создаем, передавая объект опций вторым параметром в функцию $():

// Плохо, куча всего в строке, сложно читать
let $el = $('<div class="my-text">Hello</div>');

// Хорошо
let $el = $('<div>', {
        'class': 'my-text',
        text: 'Hello'
    });

События

События навешиваем только через .on, штрткатами, типа, .click() или .submit() не пользуемся:

// Плохо, событие через шорткат
$('#button').click(ev => {
    // ...
});

// Хорошо, событие через `.on`
$('#button').on('click', ev => {
    // ...
});

Название переменной для события в обработчике

Переменную с событием для консистентности именуем ev (не e и не event):

// Плохо
$('.btn').on('click', (e) => {
    // ...
});

// Хорошо
$('.btn').on('click', (ev) => {
    // ...
});

Ну как-то так повелось...

trigger vs. triggerHandler

Для генерации кастомных событий используем triggerHandler:

  • он работает только с jQuery, никак не касается родных событий браузера;
  • события через triggerHandler не всплывают.

trigger используем только когда нужно сгенерировать нативное событие браузера. Например, клик на ссылке, на которую навешен обработчик через addEventListener (на чистом JS без jQuery).

Оптимизация

Выборка, контекст

Не используем теги в селекторах:

// Плохо
var $menu = $('div#menu');

// Хорошо
var $menu = $('#menu');

Если элемент на странице один, то делаем выборку по id, если нужно выбрать несколько элементов, даем им классы с префиксом js- и делаем выборку по классу:

// Плохо
var $topNav = $('nav.top-nav');

// Хорошо
var $topNav = $('.js-top-nav');

При поиске элементов стараемся использовать уже существующие jQuery-коллекции, хранящиеся в переменных, и контекстный поиск через метод .find():

// Плохо, работает медленно
const $links = $('#menu .js-menu-link');

// Хорошо, работает гораздо быстрее
const $links = $('#menu').find('.js-menu-link');

// Если нужно обратиться к выборке несколько раз — сохранили ее в переменную
const $menu = $('#menu');
$menu.find('.js-menu-link')
$menu.addClass('_open');

Методы и фильтры

Некотоыре методы в jQuery-коллекциях имеют эквиваленты в виде фильтров. Предпочтительно использовать методы, они работают быстрее:

// Плохо
const $firstParagraph = $('p:first');

// Хорошо
const $firstParagraph = $('p').first();