Наведу простий приклад з верстки інтернет магазину, припустимо, ми використовуємо один зі стандартних елементів jQuery UI Slider для додавання на сайті / в інтернет магазині форми пошуку з повзунком вибору діапазону цін, або кількості товарів.
У формі пошуку у нас є присутній наступний код:
- id = "maxPrice" - поле, пов'язане зі значенням максимальної ціни товару під час пошуку;
- id = "minPrice" - поле, пов'язане зі значенням мінімальної ціни товару під час пошуку;
- id = "jsSlider" - контейнер для додавання повзунка вибору діапазонів.
І додати в шапку сайту між тегами head ініціалізацію самого плагіна (або винести в окремий файл):
Але! А що буде в тому випадку, коли форми пошуку немає на сторінці? Зазначений код буде причиною помилок і зупинення виконання js на сторінці після виникнення помилки. А в Internet Explorer 8 і нижче так взагалі почне муляти очі, дратуючи відвідувачів настирливими повідомленнями про помилки (ще й із звуковим сигналом). В результаті сайт втратить своїх відвідувачів зі старими версіями Internet Explorer. А магазин буде втрачати потенційних покупців.
Перепишемо вказаний код правильно (якщо плануємо практично на всіх сторінках залишити мінімальну форму пошуку по товарах):
Як бачите, приклад відрізняється всього лише в кілька рядків: if (jQuery ( "# jsSlider"). Length jQuery ( "# minPrice") .length jQuery ( "# maxPrice"). length) - якщо в контексті сторінки є контейнер для слайдера - div id = "jsSlider". а також обидва текстових поля: id = "minPrice", id = "maxPrice" - тільки тоді виконуємо ініціалізацію плагіна jquery slider ui. Такий код не викличе помилки навіть тоді, коли всі ці елементи відсутні (на зазначеній сторінці просто немає мінімальної форми пошуку). Плагін просто не буде инициализирован.
Висновок простий: перед ініціалізацією jQuery плагінів перевіряйте наявність необхідних для їх роботи елементів в контексті сторінки за допомогою властивості .length щоб уникнути подальших помилок.
Більше інформації про веб технологіях можна дізнатися з нашого переліку всіх статей на сайті: