Как определить активный пункт меню в Phoenix Framework с помощью краткой оценки
3 января 2024 г.При разработке веб-приложений часто требуется пометить пункты меню, вкладки или другие части пользовательского интерфейса как активные. В 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). Этот подход чище, читабельнее и эффективнее:
- Краткость кода. Синтаксис отложенных вычислений более лаконичен, что приводит к более чистому коду.
2. Эффективность: ленивая оценка останавливает оценку, как только становится известен результат, что позволяет избежать ненужных вычислений.
3. Читаемость. Список классов прост для понимания и обслуживания, что повышает читаемость кода.
4. Простота обслуживания. Упрощенный синтаксис со временем упрощает обслуживание кода.
При разработке приложений в Elixir речь идет не просто об использовании функциональной парадигмы, но и о написании лаконичного и легко понятного кода. Такой подход не только упрощает наш код, но и делает обслуживание более простым и понятным. 😎✨
Также опубликовано здесь< /a>
Фото Елена Можвило на Unsplash
Оригинал