Как правильно изолировать код блока?

Question

[WapSter]

Очень давно занимаюсь вёрсткой и чаще всего для логики использую jQuery и в последнее время vue. Вопрос в следуещем: обычно бандлится единый файл js для всех страниц и если написать к примеру var blockEl = document.querySelector('.block');
То js остановит выполнение, когда не найдет данного блока. jQuery в этом случае просто продолжит работать. Для данной изоляции использую сейчас условие на существование блока. Как правильно это делать?

Answer 1

[dollar]

Зависит от кода. И ваш пример не остановит. Просто в случае отсутствия blockEl будет null, и обращение к нему вызовет ошибку. Вариантов решения море.

//Классика
var blockEl = document.querySelector('.block');
if (blockEl) {
  // .....
}

//Внутри функции
var blockEl = document.querySelector('.block');
if (!blockEl) return;

//Обёртка
try {
  var blockEl = document.querySelector('.block');
  // .....
} catch(e) {}

//Обманка
var blockEl = document.querySelector('.block') || {};
//Хитрые обманки
var blockEl = document.querySelector('.block') || { querySelector: e=>{} };

// и т.д.

Comments

[WapSter]

Спасибо за способы с обманками, по моему очень удобно. Есть ли подводные камни?

[dollar]

Тимур Турсунбаев, в обманке просто нужно учесть все функции, которые вызываются. Если что-то не учтёте, то будет проблемка - попытка вызвать отсутствующую функцию.