Використовуємо jQuery правильно
Завантаження з CDN
Замість того, щоб зберігати jQuery на Вашому сервері, краще завантажувати бібліотеку з популярних CDN. Це дозволить зменшити час завантаження сторінки.
<!-- Ні -->
<script src="/vendor/jquery/jquery.min.js"></script>
<!-- Так -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Нижче представлений список популярних мереж доставки контенту, де ви можете знайти jQuery та багато іншого:
CSS та JS бібліотеки також можуть бути завантаженні з CDN.
Також не буде зайвим:
Забезпечити резервну версію файлу з Вашого сервера при неможливості завантаження з CDN:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>window.jQuery || document.write("<script src='/vendor/jquery/jquery.min.js'>\x3C/script>");</script>
Вибір стисненої версії:
<!-- Ні -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<!-- Так -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Розміщення скрипта внизу сторінки:
<!doctype html>
<head>
...
<!-- Ні -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
...
<!-- Так -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
...
Використання протоколо-залежної URL-адреси:
Видаліть http: або https: з URL. Роблячи це, Ви надаєте браузеру можливість самому обрати потрібний протокол.
<!-- Ні -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Так -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Скорочений запис події ready
// Звичайний спосіб
$(document).ready(function() {
...
});
// Короткий спосіб
$(function() {
});
Назва об'єкта jQuery починається з $
З цього іменування, ми можемо дізнатися, чи є змінна об'єктом jQuery.
// Ні
var form = $('#contactForm');
// Так
var $form = $('#contactForm');
Використання $this
Використовуйте змінну $this на початку анонімної функції, наприклад, всередині кожного циклу:
// Ні
$('li').each(function() {
$(this).on('click', function() {
$(this).addClass('active');
});
});
// Так
$('li').each(function() {
var $this = $(this);
$this.on('click', function() {
$this.addClass('active');
});
});
Хтось віддає перевагу that або self. Не забувайье про префікс $, якщо це об'єкт jQuery.
Кешування jQuery об'єктів
Якщо об'єкт jQuery використовується кілька разів, кешування дозволить зберегти продуктивність скрипта.
// Ні
$('.menu li').each(function() { ... });
$('.menu li').each(function() { ... });
// Так
var $items = $('.menu li');
$items.each(function() { ... });
// Повторне використання
$items.each(function() { ... });
Метод ланцюга
Метод ланцюга є одним з найпотужніших можливостей jQuery. Це дозволяє нам викликати декілька методів одночасно.
"Write less, do more", jQuery слоган ідеально описує цей випадок.
// Ні
var $a = $('#about');
$a.hide();
$a.addClass();
$a.fadeIn();
$a.hide();
// Так
$('#about').hide().addClass().fadeIn().hide();
// Краще
// Додати рядок розриву і відступ для зручності читання
$('#about')
.hide()
.addClass()
.fadeIn()
.hide();
Створення нового елемента
При створенні нового елемента, спробуйте використовувати методи jQuery для маніпулювання елементом замість того, щоб надавати повний HTML-код.
// Ні
var $hidden = $('<input class="form-control" type="hidden" name="foo" value="bar" />').appendTo('#form');
// Так
var $hidden = $('<input/>')
.addClass('form-control')
.attr('type', 'hidden')
.attr('name', 'foo')
.val('bar')
.appendTo('#form');
// Або
var $hidden = $('<input/>', {
class: 'form-control',
type: 'hidden',
name: 'foo',
value: 'bar'
}).appendTo('#form');
Не змішуйте CSS з jQuery
Не встановлюйте стилі CSS для елемента безпосередньо. Зробіть це з допомогою класу CSS.
// Ні
$('#button').css({
'background-color': '#5cb85c',
'border-color': '#4cae4c'
});
// Так
.success {
background-color: #5cb85c;
border-color: #4cae4c;
}
$('#button').addClass('success');
Оптимізація селекторів
Використання ID-селекторів
Щоб отримати елемент із заданим ID, jQuery використовує document.getElementById() метод, який швидше, ніж Sizzle.
// Ні
$('#wrapper #inner');
$('div#inner');
$('.wrapper #inner');
// Так
$('#inner');
Використання ID-based селекторів
// Ні
$('#container .row');
// Швидше
$('#container').find('.row');
Специфіка
Більш конкретна частина справа, і менш конкретна - ліворуч.
// Неоптимізовано
$('div.data .gonzalez');
// Оптимізовано
$('.data td.gonzalez');
Уникайте універсальних селекторів
// Повільно
$('div.container > *');
// Швидше
$('.container').children();
Уникайте непрямих універсальних селекторів
Рекомендується префіксувати псевдо-селектори класу (які починаються з :) тегом або іншим селектором. В іншому випадку, універсальний селектор (*) мається на увазі.
// Ні
$('.category :radio');
// Так
$('.category input:radio');
Використовування методів фільтрації замість псевдо-селекторів
Можливо Ви використовуйте jQuery метод фільтрації замість псевдо-селекторів. jQuery використовує метод querySelectorAll, який швидше, ніж Sizzle-методи.
// Ні
$('.item:first')
// Так
$('.item').eq(0)
Не використовуйте вбудований JS для прив'язки подій
Завжди використовуйте jQuery для прив'язки подій:
<!-- Ні -->
<button id="saveButton" onclick="javascript: save();">Save</button>
// Так
$('#saveButton').on('click', function() {
...
});
Використання кастомних імен для подій
Використовуючи власні назви, Ви можете легко відокремити конкретну подію, не впливаючи на інші обробники подій, які прив'язані до елементу.
$('#saveButton').on('click.bv', function() { ... });
// Пізніше буде можливо відмінити прив'язку обробника події
$('#saveButton').off('click.bv');
Не пишіть всі параметри в Ajax URL
При відправці даних з віддаленої URL-адреси з допомогою Ajax-запиту, використовуйте опції даних, щоб відправити їх замість того, щоб записати все в URL.
// Ні
$.ajax({
url: '/remote/url?param1=value1¶m2=value2...'
}});
// Так
$.ajax({
url: '/remote/url',
data: {
param1: 'value1',
param2: 'value2'
...
}
});
У випадку, якщо параметр занадто довгий (наприклад, стаття), то розгляньте використання методу POST для Ajax запитів і back-end.
Internet Explorer 8 (і більш ранні версії) має обмеження 2083 символів в URL
1184 7
GR: 2.822k
Коментарі:
2
frontend_dev
цікава стаття)
0
darkaxe
А чи є можливим доповнити статтю поясненнями - чому саме так правильно, а так ні?
0
andreykko
Тут до більшості випадків же є роз'яснення, чому потрібно тим чи іншим методом, якщо щось конкретно не зрозуміло(чому саме так правильно), напиши сюди, я відповім.
0
dmutre4ko
Цікавить питання, чому розміщувати скрипт радять внизу сторінки? Можете пояснити?
1
gukvadim
При завантаженні сторінки скріпти завантажуються досить довго, а користувач вже хоче бачити якусь інфу, а так html,css завантажився і сторінка вже гарно виглядає, а скріпти підключаються в останню чергу не мішаючи переглядати сторінку. Досить логічно, але є цікавий нюанс. По центрі сторінки тоді код вже не вийде написати, так як jquery ще не завантажився, але якщо не гавнокодити то це не буде нюансом=)