Тематизация и переменные

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

Тематизация в Marko

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

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

Пример тематики

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

<template>
  <div style="background-color: ${theme.background}">
    Контент с изменяемым фоном
  </div>
</template>

<script>
  module.exports = {
    onCreate() {
      this.theme = {
        background: 'white',  // по умолчанию светлая тема
      };
    },
  };
</script>

В этом примере переменная theme.background задает цвет фона компонента. Можно динамически изменять значение этой переменной в зависимости от предпочтений пользователя или текущей темы.

Для реализации переключения темы можно использовать следующий подход:

<template>
  <div>
    <button on-click="toggleTheme">Переключить тему</button>
    <div style="background-color: ${theme.background}">
      Контент с изменяемым фоном
    </div>
  </div>
</template>

<script>
  module.exports = {
    onCreate() {
      this.theme = {
        background: 'white',  // начальная тема
      };
    },

    toggleTheme() {
      this.theme.background = this.theme.background === 'white' ? 'black' : 'white';
    }
  };
</script>

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

Переменные в Marko

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

Локальные переменные

Локальные переменные в Marko определяются внутри компонента и доступны только в пределах этого компонента. Они могут быть определены в методах компонента или прямо в шаблоне.

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

<template>
  <div>
    <h1>Привет, ${userName}!</h1>
  </div>
</template>

<script>
  module.exports = {
    onCreate() {
      this.userName = 'Мария';
    }
  };
</script>

В данном примере переменная userName используется для динамической вставки имени пользователя в заголовок. Эта переменная доступна только в рамках компонента.

Передача переменных в компоненты

Marko позволяет передавать данные в дочерние компоненты через атрибуты. Это позволяет создавать гибкие и повторно используемые компоненты.

Пример передачи переменной:

<template>
  <div>
    <ChildComponent name="Мария" />
  </div>
</template>
<!-- Компонент ChildComponent -->
<template>
  <div>
    Привет, ${name}!
  </div>
</template>

<script>
  module.exports = {
    onCreate() {
      this.name = this.input.name;
    }
  };
</script>

В этом примере переменная name передается из родительского компонента в дочерний, где она используется для отображения приветственного сообщения.

Глобальные переменные

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

Глобальные переменные обычно определяются на уровне приложения или через контекст.

<template>
  <div>
    <h1>Добро пожаловать, ${globalUser.name}!</h1>
  </div>
</template>

<script>
  module.exports = {
    onCreate() {
      this.globalUser = globalContext.user;
    }
  };
</script>

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

Переменные в циклах и условных выражениях

Marko поддерживает использование переменных внутри циклов и условных операторов, что позволяет легко управлять динамическим контентом.

Использование переменных в цикле
<template>
  <ul>
    ${items.map(item => {
      return `<li>${item.name}</li>`;
    })}
  </ul>
</template>

<script>
  module.exports = {
    onCreate() {
      this.items = [
        { name: 'Item 1' },
        { name: 'Item 2' },
        { name: 'Item 3' },
      ];
    }
  };
</script>

В этом примере используется метод map() для итерации по массиву items, где для каждого элемента создается новый элемент списка.

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

<script>
  module.exports = {
    onCreate() {
      this.isLoggedIn = false;
    }
  };
</script>

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

Заключение

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

Оглавление