Что нужно знать о действиях в Svelte

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

Фреймворк Svelte — один из самых популярных фреймворков JavaScript в экосистеме веб-разработки. Его простой для понимания синтаксис делает его идеальным выбором для тех, кто хочет создавать потрясающие веб-приложения, аналогичные обычному JavaScript.

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

Что такое действие в Svelte?

На самом базовом уровне действие в Svelte — это просто функция JavaScript, которая запускается всякий раз, когда привязывается элемент. Действия Svelte могут возвращать объект JavaScript с методом уничтожения, который браузер вызывает каждый раз, когда удаляет элемент из объектной модели документа (DOM). Например, если вы хотите захватить текст внутри элемента DOM, когда браузер закрепляет его в DOM, вот как это сделать:

{#if messageShown} Это сообщение. {/if} (messageShown = !messageShown)}>Переключить сообщение

В приведенном выше блоке кода в теге скрипта есть две переменные с именами messageShown и message. Браузер назначает элемент div только в том случае, если messageShown правдив, а элемент button отвечает за управление состоянием переменной messageShown.

Компонент div имеет директиву привязки: привязывает компонент хоста (в случае div) к переменной messageShown. Символ $ отмечает следующую команду как ответ. Это означает, что любые функции в команде будут перезапускаться каждый раз при изменении каких-либо зависимостей.

В этом случае символ $ сообщает браузеру, что нужно прослушивать любые изменения в следующей команде и записывать внутренний текст сообщения ссылки. Помните, что сообщение связано с элементом div.

Это код для простой проблемы. Действия Svelte упрощают процесс прослушивания присоединенного состояния элемента.

Как создать экшен Svelte

Вот как вы можете воссоздать описанную выше функциональность с помощью альтернативного действия. Svelte предоставляет директиву use:, которую вы можете прикрепить к любому элементу вашего компонента. Директива use: будет ссылаться на действие, которое вы хотите выполнить, как только браузер прикрепит элемент к DOM.

{#if messageShown} Это сообщение. {/if} messageShown=!messageShown}>Переключить сообщение

В приведенном выше блоке кода тег сценария содержит функцию уведомления, которая записывает уведомление в консоль браузера. В разделе разметки элемент div имеет команду use:, которая ссылается на функцию уведомления.

Это действие сообщает браузеру запускать функцию уведомления всякий раз, когда браузер присоединяет элемент div к DOM. Обратите внимание на параметр node в функции notify. Это относится к элементу, прикрепленному к этому действию.

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

Поскольку действие Svelte — это всего лишь функция, это означает, что вы можете создать обычный файл .js и экспортировать действие как модуль, который смогут использовать элементы вашего приложения. К одному элементу можно прикрепить несколько действий со своими задачами. Распространенный подход — создать каталог lib с файлом action.js, который экспортирует различные события.

экспортная функция action1(node) { // Код để chạy. } Export function action2(node) { // Код để chạy. }

Теперь вы можете импортировать соответствующие действия туда, где они вам нужны:

Используйте метод уничтожения в действии

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

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

const notify = (node) => { console.log(“Mounted”, node.innerText); return { уничтожить: ()=>console.log(‘Отключено!’) } }

Эта функция возвращает объект с помощью метода уничтожения. Когда браузер удаляет этот элемент, он вызывает метод уничтожения, который отвечает за отображение текста Unmounted! в консоли.

Передача параметров в действие

При прикреплении действия к элементу с помощью команды use: Svelte автоматически привязывает этот элемент к параметру (обычно называемому узлом), на который можно ссылаться из вашего действия. Однако вы можете передать другие параметры действию следующим образом:

Если вам нужна переменная параметра в вашем действии, код выглядит следующим образом:

function action(node, param){ // Код ввода, который вы используете. }

Также возможна передача нескольких параметров в одно действие. Для этого необходимо передать параметры как объекты.

Теперь вы можете использовать этот параметр в действии следующим образом:

function action(node, {param1, param2}) { // Код ввода будет изменен. }

Используйте метод обновления действия.

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

{message} Number=number+5}>Увеличить на 5 Number=number-5}>Уменьшить на 5

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

Выше указано, что вам нужно знать о действиях в Svelte. Надеюсь, статья окажется для вас полезной.

В приведенной выше статье вы познакомились с «Что нужно знать о действиях в Svelte». СоветыНадейтесь, что эта статья вам поможет! Если эта статья кажется вам интересной и полезной, не забудьте поделиться ею. Спасибо!