В этой статье мы рассмотрим Svelte 3, интерфейсный фреймворк JavaScript, который использует несколько иной подход к фреймворкам. В то время как такие фреймворки, как React, содержат большой пакет JavaScript, приложения Svelte компилируются компилятором Svelte в JavaScript, который, как утверждается, намного меньше, чем эквивалентный код React. А поскольку код выполняется через компилятор Svelte, его также можно оптимизировать.
Svelte также использует совершенно другой подход к управлению данными и хирургически обновляет DOM — никаких useStateкрючков в поле зрения — и с ним очень весело работать. Даже если вы большой поклонник React или любого другого популярного фреймворка, стоит попробовать Svelte. В этом введении мы создадим небольшой пример приложения, чтобы получить представление о том, что может предложить Svelte. Давайте начнем!
Начало работы со Svelte
В этом руководстве мы не будем слишком углубляться в объединение и инфраструктуру приложений Svelte, поэтому мы будем следовать руководству Svelte, чтобы настроить и запустить приложение.
Нам нужно будет установить Node и Git локально. Затем мы можем запустить:
npx degit sveltejs/template
Это клонирует репозиторий шаблонов Svelte в
После завершения этой команды вы можете cd
Создайте компонент Svelte
Прежде чем мы начнем создавать дополнительные компоненты Svelte, давайте взглянем на существующий компонент, с которым поставляется шаблон. Первое, что нужно отметить, это то, что компоненты Svelte определены в.svelteфайле. App.svelte (находится в srcпапке) разделен на три части:
Работать с этими файлами Svelte будет намного проще, если ваш редактор понимает их и может правильно выделить их синтаксис. Svelte предоставляет расширение VS Code, которое я использую, но если вы используете другой редактор, я предлагаю выполнить поиск в Google. У Svelte большое сообщество, поэтому вполне вероятно, что для большинства популярных редакторов существуют плагины.
Компоненты Svelte разделены на три части:
Тег script— это место, где написан весь JavaScript для компонента.
Тег style— это место, где определяется весь CSS компонента. В компоненте Svelte весь CSS по умолчанию привязан к этому компоненту, поэтому любые стили здесь применяются только к компоненту, а не глобально.
Все остальное, представленное в компоненте, обрабатывается как HTML для вывода компонента. Svelte также предоставляет логику шаблонов для поддержки условного рендеринга, циклов по массивам и т. д.
Чтобы запустить наше приложение, используйте npm run dev. Это запустит Rollup, наш упаковщик, а также небольшой
Запрос у пользователя имени пользователя GitHub
Первый шаг нашего приложения — попросить пользователя указать имя пользователя GitHub. Затем мы возьмем это имя и найдем в GitHub список репозиториев, которые есть у пользователя. Давайте обновим, App.svelteчтобы сделать именно это.
Сначала в scriptблоке удалите export let nameстроку. Вот как мы определяем реквизиты в Svelte, которые работают так же, как реквизиты в React. Ключевое exportслово здесь объявляет, что это значение является реквизитом, который будет предоставлен родителем компонента. Однако в нашем случае наш компонент не будет принимать никаких свойств, поэтому мы можем его удалить. Вам также потребуется выполнить обновление src/main.js, чтобы удалить props: {... }код, так как наш Appкомпонент не принимает никаких реквизитов. После того, как вы это сделаете, main.jsдолжно выглядеть так:
Этот файл содержит то, что фактически является точкой входа в ваше приложение. Думайте об этом как о ReactDOM.render, если вы знакомы с React.
Давайте обновим App.svelteHTML, который нам нужен. Мы создадим простую форму, которая запрашивает у пользователя имя пользователя:
В этом уроке мы не будем фокусироваться на CSS (я не дизайнер!), но я применил небольшое количество CSS, чтобы все выглядело немного лучше. Теперь, когда у нас есть форма, давайте посмотрим, как мы подключим ее к Svelte. Первое, что нужно отметить, это отсутствие явного useStateхука или
Объявим переменную для ввода:
let usernameInputField = '';
Затем используйте директиву Svelte bind: valueв шаблоне:
Svelte сделает все остальное за нас: по мере того, как пользователь вводит данные, переменная usernameInputFieldбудет обновляться и синхронизироваться.
После того, как пользователь ввел имя пользователя, нам нужно прослушать, когда он отправил форму. Svelte использует следующий синтаксис для привязки прослушивателей событий: