Поскольку 2021 год приближается к полпути, наступает золотой век JavaScript продолжается. Один из самых интересных персонажей в текущей главе – Svelte framework. Эта статья дает вам основы для создания проекта Svelte и использования некоторых простых элементов пользовательского интерфейса.

В отличие от текущего группового мышления, представленного React, Angular и Vue, Svelte работает на стороне сервера, чтобы скомпилировать ваше приложение в оптимизированный JavaScript. Это означает, что Svelte требует настройки конвейера сборки.

Хотя настройка конвейера сборки может показаться дополнительной работой, правда в том, что вся реальная разработка на React, Angular или Vue в любом случае требует конвейера сборки в той или иной форме (например, create-react-app или конфигурация Webpack). Кроме того, настройка среды Svelte позволяет быстро получить такие вещи, как режим горячего развертывания для разработчиков.

Svelte настройка

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

Листинг 1. Исходный шаблон

npx degit sveltejs/template infoworld-svelte
cd infoworld-svelte
npm install
npm run dev

На этом этапе стартовое приложение будет работать на localhost: 5000; проверьте это в своем браузере. Откройте папку / infoworld-svelte в редакторе кода или IDE. В каталоге / src есть два представляющих интерес исходных файла: App.svelte и main.js. Эти два работают вместе, чтобы определить, что вы видите в браузере.

Примечание. Весь код доступен в это репо.

Если вы используете Visual Studio Code, существует ряд полезных (бесплатных) расширений Svelte, которые обеспечивают подсветку синтаксиса и автозаполнение.

Чтобы найти их, перейдите к инструменту расширений слева и введите «ext: svelte» в строку поиска.

main.js – это основная точка входа в приложение. Он импортирует App.svelte в первой строке, как показано в листинге 2.

Листинг 2. main.js

import App from './App.svelte';
const app = new App({
            target: document.body,
            props: {
                        name: 'world',
            }
});

export default app;

В листинге 2 показано кое-что интересное о том, как работает Svelte: экспорт из App.svelte был преобразован в объект, который создается с помощью new App({...}) вызов.

В App объект настраивается парой параметров. Они используются для предоставления значений параметров объекта Svelte. В target param – встроенное свойство, которое Svelte использует, чтобы указать, где находится корень приложения (аналогично второму аргументу в ReactDOM.render).

Теперь посмотри на App.svelte. Это основа синтаксиса компонентов в Svelte, который сочетает в себе три элемента JavaScript, разметку и CSS с script, main, а также style теги соответственно. Они объединены вместе с параметрами, предоставленными при создании экземпляра в main.js., into a component. Note that the main тег может быть любым допустимым тегом HTML.

Обратите внимание, что Svelte использует токены переменных в том же синтаксисе, что и другие фреймворки: <h1>Hello {name}!</h1>. Также обратите внимание, что эта переменная, значение которой предоставляется параметрами в main.js, экспортируется в раздел скрипта: export let name;. Это также можно сделать прямо в скрипте. Чтобы понять, что я имею в виду, измените эту строку на let name = "InfoWorld";, полностью исключив экспорт. Дело в том, что нет ничего волшебного или необходимого в параметризации App объект через main.js. Это просто поддерживаемая функция для организации вещей.

Поскольку вы работаете в режиме разработки, изменение сразу же отразится. Теперь в браузере будет отображаться новое приветствие «Hello InfoWorld!»

Для создания сложных пользовательских интерфейсов необходимо множество функций. Среди наиболее важных – итераторы и обработка объектов. Давайте посмотрим, добавив код из листинга 3.

Листинг 3. Итерация по массиву объектов

<script>
            let quotes = [
                        {author:"Emerson", quote:"To be great is to be misunderstood."},
                        {author:"James", quote:"The art of being wise is the art of knowing what to overlook."},
                        {author:"Thoreau", quote:"That government is best which governs least."}
            ];
</script>
<main>
  <ul>
                        {#each quotes as { quote, author }, i}
                                    <li>{i} - {quote}</li>               
                        {/each}
  </ul>
</main>

Базовый синтаксис – это {#each} тег. Используется для ссылки на переменную quotes. Затем отображаются элементы этой переменной массива (через деструктуризация) во внутреннюю часть тега вместе со счетчиком итератора i. На эти открытые переменные затем ссылаются с тем же синтаксисом токена, что и на любую другую переменную. Если вы знакомы с другим фреймворком, думаю, вы согласитесь, что синтаксис здесь очень лаконичный.

Обработка событий в Svelte

Добавление обработчиков вроде onClick аналогично легко. Вы можете добавить один элемент в список, как показано в листинге 4.

Листинг 4. Добавление обработчика onClick

<script>
...
function click(){           alert("ok"); }
...
</script>
<main>
...
<li on:click="{click}">{i} - {quote}</li>           
...
</main>

The event handling syntax is fairly self-explanatory. You can also pass in params to the handler by wrapping the handler function, like so:

<li on:click="{() => click(author)}">{i} - {quote}</li>

This can be used by the handler function:

function click(author){ alert("hello from " + author); }

Svelte components and inputs

Now get a taste for the component system, along with two-way binding of input elements. You are adding a new component that will create quotes to add to the list. First, create a new file called /src/AddQuote.svelte and paste in the contents of Listing 5.

Listing 5. The AddQuote component (event dispatch and input binding)

<script>
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher(); // create dispatcher
  let author = "";
  let quote = "";
  function onAdd(author, quote){
    dispatch('quote', { // use dispatcher
                                    author: author, quote: quote
                        });
  }
</script>

<main>
  <div class="add-quote">
    <h2>New Quote</h2>
    <div>Author: <input bind:value={author} placeholder="Author"></div>
    <div>Quote: <input bind:value={quote} placeholder="Quote"></div>
    <button on:click={()=>{onAdd(author, quote)}}>Add It!</button>
  </div>
</main>

Component events

Several new concepts are introduced here. First is component events. These are events that components can raise and that are handled by other components just like DOM events. The basic process is to import the createEventDispatcher из Svelte, затем используйте его для создания функции диспетчера. Эта функция диспетчера вызывается и передает имя события ('quote') и содержание события (в данном случае информация о новой котировке).

This event is then handled by our App компонент, как мы увидим чуть позже.

Input bindings

Binding the HTML inputs, aka two-way bindings, is also simple. You can see this in the main элемент листинга 5. Обратите внимание на bind:value атрибуты входных элементов. Они ссылаются на переменные, к которым будет привязан ввод – в данном случае на переменные автора и кавычки.

You then use a button element with an onClick обработчик, чтобы вызвать событие отправки в onAdd функция.

Catching custom events in Svelte

Back in the App.svelte file, you can use the AddQuote компонент, как показано в листинге 6.

Listing 6. Using the AddQuote component

<script>
...
            function onAddQuote(event){
                        quotes = [...quotes, {author:event.detail.author, quote:event.detail.quote}];
            }
</script>
...
<main>
...
<AddQuote on:quote={onAddQuote}></AddQuote>
...
</main>

Listing 6 shows how, in the markup, you use on:quote чтобы прослушать пользовательское событие цитаты и отправить его в функцию-обработчик, onAddQuote, который определен в разделе скрипта. Этой функции передается событие, которое содержит объект события, который мы отправили в AddQuote в event.detail член.

From there it’s a simple matter of updating the data in the quotes массив, чтобы отразить новый элемент. Обратите внимание, что вы должны обновить массив с помощью присваивания, иначе Svelte не заметит изменения. Другими словами, просто используя Array.push не запускает обновление. (Это похоже на другие реактивные фреймворки.)

API fetching in Svelte

As a quick extra bonus, let’s see how quickly we can add a remote API fetch to this app. Listing 7 shows how to add an API fetch to App.svelte.

Listing 7. Using a REST API (App.svelte)

<script>
...
            async function addRandom(){
                        const res = await fetch("https://api.quotable.io/random");
                        const json = await res.json();
                        quotes = [...quotes, {author:json.author, quote:json.content}];
            }
</script>
...
<main>
...
<button on:click={addRandom}>Add Random Quote</button>
...
</main>

Listing 7 adds a button that calls the async addRandom функция. Эта функция просто вызывает API удаленных котировок а затем обновляет массив котировок новой цитатой. Простой!

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

Svelte также быстро делает прибыль на рынке. Он занимает четвертое место в использовании после большой тройки (React, Angular и Vue), но первый в удовлетворении требований разработчиков и первый в интересах.

Авторские права © 2021 IDG Communications, Inc.


#Как #использовать #фреймворк #Svelte #JavaScript

Source link