Как определить активный пункт меню в Phoenix Framework с помощью краткой оценки

При разработке веб-приложений часто требуется пометить пункты меню, вкладки или другие части пользовательского интерфейса как активные. В Phoenix Framework быстрое выполнение этого действия может привести к чему-то вроде этого:

<.link
  href={~p"/stores/#{@store}/products"}
  class={"tab" <> if @active == :products, do: " tab-active", else: ""}
>
  Products
</.link>

В этом подходе мы используем троичные выражения и конкатенацию строк для условного определения классов CSS. Это работает, но по мере увеличения количества условной логики ее становится сложно читать и поддерживать.

Введение в краткую оценку

В Elixir ленивая оценка и сокращенная оценка часто используются как взаимозаменяемые. Однако есть небольшая разница. Отложенное вычисление обычно связано с более сложными структурами данных, тогда как короткое замыкание чаще встречается в логических выражениях. И это то, что мы собираемся использовать.

Давайте рассмотрим несколько примеров использования iex:

list = ["plataformatec", nil, "sourcelevel", false, "dashbit"]
#=> ["plataformatec", nil, "sourcelevel", false, "dashbit"]

# Using short-circuit evaluation on the list
list = ["plataformatec", nil && "sourcelevel", false && "dashbit"]
#=> ["plataformatec", nil, false]

Во втором определении списка мы используем операцию короткого замыкания, при которой последнее значение выражения преобладает, когда предыдущее истинно; в противном случае сохраняется предыдущее значение.

Проще говоря, это все равно, что сказать Эликсиру: «Перестань думать, как только узнаешь ответ».

Применение сокращения к списку классов CSS

В проблеме №276 Phoenix Framework был описан подход, использующий отложенную оценку синтаксиса класса. обсуждалось. В этом комментарии поясняется, что если элемент списка имеет значение false или nil, он будет удален.

Мы можем применить это решение к нашему примеру:

<.link
  href={~p"/stores/#{@store}/products"}
  class={["tab", @active == :products && "tab-active"]}
>
  Products
</.link>

Если @active имеет значение :products, в список будет добавлена ​​строка "tab-active" (в результате появится tab tab-active), в противном случае он будет опущен (в результате будет просто tab). Этот подход чище, читабельнее и эффективнее:

1. Краткость кода. Синтаксис отложенных вычислений более лаконичен, что приводит к более чистому коду.

2. Эффективность: ленивая оценка останавливает оценку, как только становится известен результат, что позволяет избежать ненужных вычислений.

3. Читаемость. Список классов прост для понимания и обслуживания, что повышает читаемость кода.

4. Простота обслуживания. Упрощенный синтаксис со временем упрощает обслуживание кода.

При разработке приложений в Elixir речь идет не просто об использовании функциональной парадигмы, но и о написании лаконичного и легко понятного кода. Такой подход не только упрощает наш код, но и делает обслуживание более простым и понятным. 😎✨

---

Также опубликовано здесь< /a>

Фото Елена Можвило на Unsplash

---

Оригинал