Понимание .svelte файлов: script, style, markup

Файл с расширением .svelte представляет собой основной строительный блок приложений, созданных с использованием фреймворка Svelte. Он включает в себя три основных раздела: script, style и markup. Каждый из этих разделов выполняет свою роль в компоненте, и понимание их функционала является ключом к эффективной разработке на Svelte.

Раздел script

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

Переменные и состояние

Для объявления переменных в script используется стандартный JavaScript. Также здесь можно определить реактивные переменные, которые Svelte будет отслеживать для обновления DOM. Чтобы сделать переменную реактивной, необходимо использовать специальный синтаксис — $:.

Пример:

<script>
  let count = 0;
  
  $: doubled = count * 2;  // реативное вычисление
</script>

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

Импорты и экспорт

Часто в разделе script импортируются другие компоненты или модули для выполнения задач. Импортирование выполняется как в обычном Jav * aScript:

<script>
  import { onMount } from 'svelte';
  import ChildComponent from './ChildComponent.svelte';
</script>

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

<script>
  export let name = 'World';
</script>

Теперь компонент может принимать значение переменной name как пропс.

Методы жизненного цикла

Svelte предоставляет несколько методов жизненного цикла, которые можно использовать для выполнения логики в разные моменты работы компонента. Один из таких методов — onMount, который вызывается после того, как компонент был добавлен в DOM.

<script>
  import { onMount } from 'svelte';

  onMount(() => {
    console.log('Компонент был смонтирован');
  });
</script>

Раздел style

Стили для компонента размещаются внутри тега <style> в самом компоненте. В Svelte стили являются локальными по умолчанию — это означает, что они применяются только к этому компоненту и не будут влиять на другие компоненты или элементы за пределами компонента.

<style>
  h1 {
    color: red;
  }
</style>

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

Изоляция стилей

Одной из уникальных особенностей Svelte является автоматическая изоляция стилей на уровне компонента. Когда стили внутри <style> блока скомпилируются, Svelte добавляет специальные атрибуты к элементам, чтобы они применялись только в рамках этого компонента.

Например, стиль, написанный для элемента <h1>, не затронет другие компоненты:

<style>
  h1 {
    color: blue;
  }
</style>

<h1>Заголовок</h1>

Это позволяет избегать конфликтов стилей и поддерживать чистоту кода.

CSS-переменные и динамическое обновление стилей

Иногда возникает необходимость динамически менять стиль компонента в зависимости от его состояния. В Svelte для этого можно использовать CSS-переменные, которые можно задавать через стиль компонента и изменять в коде.

Пример:

<script>
  let color = 'green';
</script>

<style>
  h1 {
    color: var(--text-color);
  }
</style>

<h1 style="--text-color: {color}">Текст с динамическим цветом</h1>

В этом примере цвет текста будет изменяться в зависимости от значения переменной color.

Раздел markup

Раздел markup содержит HTML-разметку компонента. Здесь находятся элементы и шаблон, которые будут отображены на экране. Разметка в Svelte используется в привычном HTML-формате, но с возможностью добавлять динамическую логику прямо в HTML-код.

Динамическая привязка данных

В разметке можно привязывать данные и выражения к элементам с помощью {}. Это позволяет вставлять значения переменных прямо в HTML.

Пример:

<script>
  let message = 'Привет, мир!';
</script>

<h1>{message}</h1>

В этом примере значение переменной message будет вставлено в заголовок, и любое изменение переменной приведет к обновлению содержимого на странице.

Условия и циклы

Для динамического отображения элементов можно использовать стандартные конструкции JavaScript, такие как if и each.

Пример с условием:

<script>
  let isLoggedIn = true;
</script>

{#if isLoggedIn}
  <p>Добро пожаловать!</p>
{:else}
  <p>Пожалуйста, войдите в систему</p>
{/if}

Пример с циклом:

<script>
  let items = ['яблоко', 'банан', 'вишня'];
</script>

<ul>
  {#each items as item}
    <li>{item}</li>
  {/each}
</ul>

Директивы событий

Svelte позволяет работать с событиями прямо в разметке, привязывая обработчики событий к элементам. Для этого используется синтаксис on:event, где event — это тип события (например, click, input и т. д.).

Пример:

<script>
  let count = 0;
  function increment() {
    count += 1;
  }
</script>

<button on:click={increment}>Увеличить</button>
<p>Значение: {count}</p>

Подведение итогов

Каждый .svelte файл представляет собой единую сущность, которая инкапсулирует в себе все необходимые аспекты компонента: от бизнес-логики до стилизации и разметки. Разделение на три основных части — script, style, markup — позволяет логически организовать код и способствует лучшей поддерживаемости. Важной особенностью является возможность работать с реактивными данными, изоляция стилей и легкость в обработке событий, что делает разработку на Svelte эффективной и удобной.

Оглавление