Завантаження з 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>
Розміщення скрипта внизу сторінки:
...
<script src="//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>
...
Використання протоколо-залежної 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" name="foo" type="hidden" 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.
Ще немає коментарів