Выражения и интерполяция

Marko поддерживает мощную систему выражений, которая позволяет динамически строить контент внутри шаблонов. Важно понимать, что выражения — это любые конструкции, которые могут быть выполнены или вычислены во время рендеринга. Выражения могут быть простыми (например, переменные или литералы), а могут быть более сложными, включающими операторы или вызовы функций.

Основные выражения

  1. Переменные В Marko можно использовать обычные JavaScript переменные в качестве выражений. Например, если в коде компонента есть переменная username, её можно вставить в шаблон следующим образом:

    <div>Hello, ${username}!</div>

    В этом случае, выражение ${username} будет заменено на значение переменной username при рендеринге.

  2. Литералы Литералы (строки, числа, булевы значения) также могут быть использованы в качестве выражений. Например, можно напрямую вывести строку:

    <div>Это строка: ${"Привет, мир!"}</div>

  3. Математические выражения В Marko поддерживаются стандартные математические операции. Можно выполнять вычисления прямо внутри шаблона:

    <div>Сумма: ${5 + 3}</div>

  4. Логические операторы Помимо арифметических операций, можно использовать логические операторы для условий:

    <div>Результат: ${isActive ? 'Активен' : 'Не активен'}</div>

    В данном случае используется тернарный оператор для вывода различных значений в зависимости от переменной isActive.

Интерполяция в Marko

Интерполяция в Marko — это способ вставки значений JavaScript в HTML-контент через специальную конструкцию ${}. Это один из основных способов динамической генерации HTML-кода, который позволяет встраивать переменные, выражения и результаты вычислений прямо в разметку.

Синтаксис

Интерполяция выполняется с помощью синтаксиса ${}. Внутри этих скобок может быть любое выражение, которое будет вычислено во время рендеринга страницы. Пример:

<div class="greeting">${greeting}</div>

Здесь переменная greeting будет подставлена в разметку. Важно отметить, что Marko автоматически обрабатывает строки и значения переменных, подставляя их в нужное место в HTML.

Работа с объектами и массивами

Marko также поддерживает работу с объектами и массивами через интерполяцию. Например, можно выводить свойства объектов:

<div>Имя пользователя: ${user.name}</div>

Если нужно вывести значения элементов массива, можно использовать индекс:

<ul>
  <li>${items[0]}</li>
  <li>${items[1]}</li>
</ul>

Безопасность интерполяции

Marko автоматически экранирует данные, чтобы предотвратить XSS-атаки (межсайтовые скриптовые атаки). Когда значение, передаваемое в интерполяцию, представляет собой строку, Marko обеспечит безопасную вставку, экранируя все опасные символы.

Чтобы вставить HTML-контент без экранирования, можно использовать синтаксис marko-bind. Этот подход позволяет встраивать небезопасные данные, такие как raw HTML:

<div>${htmlContent}</div> <!-- HTML будет экранирован -->
<div marko-bind="${htmlContent}"></div> <!-- HTML будет вставлен как есть -->

Однако нужно быть осторожным при использовании marko-bind, так как это может привести к уязвимостям безопасности.

Условная интерполяция

Marko позволяет использовать сложные выражения в интерполяции для условной логики, таких как операторы if, for, и другие. Например, можно реализовать условное отображение элемента:

<div>${isLoggedIn ? 'Добро пожаловать!' : 'Пожалуйста, войдите'}</div>

Это условие проверяет переменную isLoggedIn и отображает одну строку, если пользователь вошел в систему, и другую — если нет.

Использование for в интерполяции

Marko позволяет выполнять итерации через массивы прямо в шаблоне. Например, чтобы вывести список элементов:

<ul>
  <for|item of items>
    <li>${item}</li>
  </for>
</ul>

Этот код создает список элементов, где каждый элемент массива items будет выведен в виде отдельного элемента списка.

Вложенные выражения

Marko поддерживает вложенные выражения, которые позволяют комбинировать несколько операций или функций внутри одной интерполяции. Например, можно создать сложное выражение с несколькими функциями и операторами:

<div>${(firstName + ' ' + lastName).toUpperCase()}</div>

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

Специальные функции

Marko предоставляет несколько встроенных функций для работы с выражениями. Например, можно использовать функцию typeof, чтобы проверить тип данных:

<div>${typeof value}</div>

Также можно использовать JSON.stringify для безопасного преобразования объектов в строку:

<div>${JSON.stringify(user)}</div>

Такие функции могут быть полезны для отладки или при необходимости выполнить какие-то дополнительные операции с данными.

Влияние производительности

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

Заключение

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

Оглавление