Skip to content

jQuery.md

Latest commit

 

History

History
131 lines (98 loc) · 3.73 KB

jQuery.md

File metadata and controls

131 lines (98 loc) · 3.73 KB

Prominado Guides: jQuery

Именование переменных

Переменные содержащие jQuery объект должны начинаться со знака $

var $header = $("#header");
var $articles = $("article");

Используйте правильно единственное (singular) и множественное (plural) числа

var $sidebar = $("#sidebar");
var $articles = $(".article");

Правильно указывайте множественное число (plural) для слов исключений:

var $child = $("#child");
var $children = $(".child");

Именование функций

Имена функций должны быть короткими и содержательными, избегайте двухсмысленных или бессмысленных наименованией:

// bad
function makeGreen() {} // color? background? WAT?
function loadData() {}  // what data?
function error() {}     // error? WTF?

К перечисленным функциям возникает слишком много вопросов, сравните со следующим примером:

// good
function changeColorToGreen() {}
function loadJSON() {}
function showErrorDialog() {}

События и элементы

Если на какой то элемент нужно повесить событие не нужно навешивать его на общий класс.

// bad
$(document).on('click', '.article__button', function() {});

добавьте data атрибут к элементу и на него уже вешайте событие

// good
$(document).on('click', '[data-show-modal]', function() {});

Callback функции

Для упрощения чтения кода следует избегать использования анонимных функций

// bad
// on click handler + callback function
$(document).on('click', '[data-change-color-to-green]', function() {
  $(this).css('color', '#0f0');
});

Повторное использование функции стало невозможным. Сравните:

$(document).on('click', '[data-change-color-to-green]', changeColorToGreen);

function changeColorToGreen() {
    $(this).css('color', '#0f0');   
}

Наглядней преимущество именования можно оценить в более комплексном примере:

// on click handler
$('[data-load-json]').on('click', loadJSON);

// callback with AJAX call
function loadJSON(event) {
  $.ajax('ajax/example.json', {context: event.currentTarget})
    .done(changeColorToGreen)
    .fail(changeColorToRed)
  ;
}

// callback for success
function changeColorToGreen() {
  $(this).css('color', '#0f0');
}

// callback for error
function changeColorToRed() {
  $(this).css('color', '#f00');
}

Кэширование

Если вы пропустили этот момент в учебнике jQuery для начинающих, то повторю ещё разок ПОИСК ЭЛЕМЕНТОВ НЕ КЭШИРУЕТСЯ, следовательно вам надо самостоятельно позаботиться о кэшировании ваших выборок:

// bad
$('#sidebar');
// ...
$('#sidebar').css('color', '#ff0');
// ...
$('#sidebar').hide();

Подобный код следует переписать:

// good
var $sidebar = $('#sidebar');
// ...
$sidebar.css('color', '#ff0');
// ...
$sidebar.hide();