6 Switch case в JavaScript + Tilda

Зачем вообще switch

Когда вариантов развития событий больше двух-трёх, цепочка
if … else if … else if … быстро превращается в «лапшу». Читать, поддерживать и особенно обновлять такую конструкцию физически больно.
Поэтому switch решает проблему тем, что сразу очевидно:

1. По какому выражению идёт ветвление.
2. Список возможных исходов — все «case» у вас перед глазами.
3. Обработчик по умолчанию (default), чтобы ничего не потерять.

Синтаксис switch case

switch (выражение) { 
  case значение1: 
    // код, если выражение === значение1 break; 
  case значение2: case значение3: 
    // код, если выражение равно 2 или 3 break; 
  default: 
    // код, если ни один case не подошёл }

Ключевые моменты:

• break завершает работу оператора; без него начнётся проваливание (fall-through).
• case сравнивается строго (===).
• default необязателен, но спасает от «неучтённого» значения.

Как применяю в Тильде

Ниже реальный сценарий когда мне было удобно использовать switch case для определения на какую кнопку был осуществлен клик, далее происходило формирование донатного товара через стандартную форму тильды и в итоге в корзину добавлялся товар, ценой которого можно было управлять через отдельные кнопки или пользовательский ввод прямо в корзине. Само решение здесь Изменение стоимости доната \ пожертвования в тильде для фонда помощи \ благотворительности

/**
 * Прячет форму донатов, находит все «донат-кнопки» и вешает на них обработчики
 * (логику определяем в addDonateHandler → switch case).
 */
function find_old_button() {
  /* --- прячем форму ------------------------------------------------------- */
  const donate_form = document.querySelector(id_donate_form);
  donate_form.style.display = 'none';

  /* --- собираем группы кнопок + флаги активности ------------------------- */
  const groups = [
    {
      type: 1,
      active: button_type1_active,
      nodes: document.querySelectorAll(class_button_type1 + ' .tn-atom'),
    },
    {
      type: 2,
      active: button_type2_active,
      nodes: document.querySelectorAll(class_button_type2 + ' .tn-atom'),
    },
    {
      type: 3,
      active: button_type3_active,
      nodes: document.querySelectorAll(class_button_type3 + ' a'),
    },
    {
      type: 4,
      active: button_type4_active,
      nodes: document.querySelectorAll(class_button_type4 + ' a'),
    },
  ];

  /* --- вешаем обработчики только на «активные» группы -------------------- */
  groups.forEach(({ type, active, nodes }) => {
    if (!active) return;                       // флаг выключен — пропускаем
    nodes.forEach((node) => addDonateHandler(node, type));
  });
}

/**
 * В зависимости от «типа» кнопки генерируем ссылку #order:XXX=YYY
 * и программно «щёлкаем» по скрытой submit-кнопке формы.
 */
function addDonateHandler(node, type) {
  node.addEventListener('click', (e) => {
    let donate_link, decoded, text, sum;

    switch (type) {
      /* ------------------------------------------------------------------ */
      case 1: { // «500 ₽ / 100» и т.п.
        donate_link = getDonateLink();
        const summ_button_type1 = node.innerText.match(/[0-9]+/); // число из текста
        donate_link.href = `#order:${text_button_type1}=${summ_button_type1}`;
        break;
      }

      /* ------------------------------------------------------------------ */
      case 2: { // «Другая сумма»
        donate_link = getDonateLink();
        donate_link.href = `#order:${text_button_type2}=${summ_button_type2}`;
        break;
      }

      /* ------------------------------------------------------------------ */
      case 3: { // ссылка вида …#Название:::999
        e.preventDefault();
        donate_link = getDonateLink();

        decoded = decodeURIComponent(node.href);
        text = decoded.slice(decoded.indexOf('#') + 1, decoded.indexOf(':::'));
        sum  = decoded.split(':::')[1];

        donate_link.href = `#order:${text}=${sum}`;
        break;
      }

      /* ------------------------------------------------------------------ */
      case 4: { // та же схема, но проверяем «:::» в href
        if (!node.href.includes(':::')) return;
        e.preventDefault();
        donate_link = getDonateLink();

        decoded = decodeURIComponent(node.href);
        text = decoded.slice(decoded.indexOf('#') + 1, decoded.indexOf(':::'));
        sum  = decoded.split(':::')[1];

        donate_link.href = `#order:${text}=${sum}`;
        break;
      }
    }

    /* если ссылка сформирована — «щёлкаем» submit формы */
    if (donate_link) {
      document.querySelector(id_donate_form + ' .t-submit')
              .dispatchEvent(new Event('click'));
    }
  });
}

/* ──────────────────────────────────────────────────────────────────────────── */
/* вспомогалка: быстрая выборка скрытой ссылки внутри формы                   */
function getDonateLink() {
  return document.querySelector(
    id_donate_form + ' .t-form__submit .t811_link',
  );
}

Что получили:

• Один точный взгляд показывает все варианты кнопок и действий к ним
• Отсутствуют вложенные if и «лесенка» из else if.
• Легко добавить ещё один case, не путая условия.

Базовое сравнение с if … else

Задача	if … else	switch … case
2–3 ветки, разные условия	✅	⚠️ лишняя форма
4+ значений одного ключа	🤯 длинная цепочка	✅ список case
Сравнение диапазонов (> / <)	✅ любая логика	⚠️ надо хитрить
Логика без повторяющихся break	—	⚠️ легко забыть

Когда switch удобен

✔ Один «выбирающий» параметр

✔ Много (>3) вариантов с уникальным кодом.

✔ Явное fall-through (например, case 1: → case 2:) для схожих действий.

Советы по стилю

1. Сгруппируйте схожие case подряд и добавьте комментарий о fall-through.
2. Не забывайте break — ESLint-правило no-fallthrough спасёт от опечаток.
3. Если внутри case — больше двух-трёх строк, вынесите их в функцию: case 'USD': handleUSD(); break;
4. Для диапазонов (x > 100) и сложных проверок оставайтесь на if.

Вывод

switch — отличный инструмент, когда речь про одно значение и много «дорог».
В Tilda он спасает в сценариях:

• выбор платёжного провайдера или типа доставки;
• нужно выбрать одну ветку среди множества как в примере статьи;
• подключение CSS/JS под конкретную страну или язык;
• обработка статусов API-запросов.

Хоть и конструкция хороша для поддержки, но самое главное правило должно быть с вами всегда «После того как напишите код, если через 2-3 месяца не работы с ним вы сможете его прочесть и быстро понять, что и как работает, значит код хорошо структурирован»

Как со мной связаться

Если вы не нашли для себя ответ в моих статьях или у вас есть задача, присылайте ваше ТЗ задание под ваш проект.
Пишите https://t.me/vbalakin буду рад помочь с доработкой.