Разработка сайтов в Углегорске, ДНР. JavaScript-фреймворк на основе радикального компилятора

Это вызовет onSubmitфункцию, когда пользователь отправит форму. Однако есть еще одна хитрость, которую Svelte имеет в рукаве, и это модификаторы событий:

Теперь, когда Svelte увидит событие отправки в этой форме, он автоматически вызовет event.preventDefault () нас. Мне это нравится: у нас на одну проблему меньше, и мы можем передать фреймворку еще одну вещь.

Вернувшись в наш scriptтег, мы можем определить эту onSubmitфункцию. Он возьмет имя пользователя и вызовет API GitHub, чтобы получить список репозиториев (он вернет первые 30 репозиториев, поэтому вам нужно будет разбивать их на страницы, если вы хотите получить их все, но мы пока оставим это):

Когда у нас есть эти репозитории, мы хотим перечислить их на странице и разрешить пользователю искать данный репозиторий. Вместо того, чтобы делать все это в App.svelteкомпоненте, давайте создадим новый компонент с именем Search.svelte. Он возьмет список репозиториев и предоставит пользователю ввод для поиска репозитория, который ему нужен.

Создайте новый файл в существующем каталоге с именем Search.svelte. Мне нравится начинать свои компоненты с небольшого количества шаблонов, просто чтобы убедиться, что у меня все настроено:

Search component

Затем, когда я отобразлю этот компонент на странице, я смогу определить, правильно ли он отображается.

Передача свойств между компонентами Svelte и условным рендерингом

Компонент поиска примет список наших извлеченных репозиториев в качестве свойства. Чтобы объявить, что компонент принимает свойство, мы объявляем экспортируемую переменную. В Search.svelte, добавьте эту строку в

Мы можем превратить это в:

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

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

Каждая петля в Svelte

Чтобы перебрать наши репозитории, мы можем использовать #each blocks, которые берут массив и выводят некоторый HTML для каждого элемента в массиве.

Внутри Search.svelteдобавьте цикл, который будет выводить имя каждого найденного нами репозитория. Помните, что в шаблоне Svelte, как и в JSX, мы используем {}динамическое содержимое для вставки в HTML. Search.svelteтеперь должно выглядеть так:

Вывод беспорядочный, но если вы загрузите приложение, вы должны увидеть большой список всех найденных нами репозиториев. Давайте сделаем это немного чище, прежде чем мы сделаем что-нибудь еще. Не стесняйтесь использовать здесь свой собственный CSS, но вот код, который я получил, и то, как он выглядит:

Список репозиториев

Это одна из областей, где Svelte действительно сияет для меня из коробки: весь CSS в компоненте Svelte по умолчанию относится к этому компоненту. Таким образом, я могу стилизовать элементы напрямую, не беспокоясь о том, что эти стили затем повлияют на другие соответствующие элементы за пределами этого компонента.

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

Поиск репозиториев

Давайте добавим окно поиска, Search.svelteчтобы мы могли позволить пользователю искать имена репозиториев. Как и в случае с формой, в которой мы запросили у пользователя имя пользователя GitHub, мы привяжем значение к переменной, чтобы оно автоматически обновлялось по мере ввода пользователем. Я также добавил некоторые дополнительные стили и CSS, чтобы все выглядело лучше (не стесняйтесь изменять стиль в соответствии с вашими предпочтениями):

Теперь пользователь может вводить текст в поле, но сейчас мы хотим отфильтровать наш список репозиториев по мере ввода пользователем. Итак, как мы запускаем код, когда пользователь обновляет ввод? Ответ заключается в том, как Svelte справляется с реактивностью.

В компоненте Svelte рассмотрим следующую строку:

console.log (userSearchTerm)

Если вы добавите это, вы увидите, что он вышел из системы только один раз, когда компонент впервые создается и запускается. Но попробуйте добавить к этой строке префикс $:, например:

$: console.log (userSearchTerm)

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

Если вы хотите запустить более одной строки кода, вы можете заключить ее в пару фигурных скобок, чтобы создать блок:

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

$: value = x * 2;

Этот код будет valueудвоен по сравнению с x, но также гарантирует, что valueон будет обновляться всякий раз, когда xбудет обновляться в будущем.

Итак, для нашего конкретного случая использования мы можем определить новую переменную, filteredReposкоторая обновляется при userSearchTermизменении, которая фильтрует репозитории только для тех, чье имя соответствует тому, что искал пользователь:

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

Теперь я буду обновлять шаблон каждую строку, чтобы использовать этот новый массив filteredRepos:

{#each filteredRepos as repository}

Теперь он будет корректно обновляться по мере ввода в поле поиска, и вы должны увидеть, что теперь вы можете искать репозитории!

Альтернативные решения для поиска по типам пользователей

Мы использовали синтаксис Svelte $: для обновления репозиториев по мере ввода пользователем, но мы также можем немного изменить структуру нашего кода, чтобы этого избежать. Мы знаем, что Svelte автоматически перерисовывает шаблоны при изменении данных, поэтому мы можем принять это во внимание. Мы можем определить filterметод, который берет наши репозитории и условия поиска и возвращает соответствующие результаты:

И теперь мы можем вызвать эту функцию прямо в нашем шаблоне:

И это все еще работает правильно. Я не уверен, нравится ли мне лично такой подход. Мне не нравится, что вызов фильтрации скрыт глубоко внутри шаблона, и мне нравится, что наличие явной $: filteredRepos =... строки дает понять любому, кто читает код, что наши репозитории обновляются по мере того, как пользователь вводит текст.

Другим решением является использование прослушивателей событий. Мы можем привязываться к on: inputсобытию текстового поля и фильтровать наши репозитории, когда получаем событие ввода. Сначала мы привязываемся к событию в нашем шаблоне:

Затем мы пишем функцию для обновления новой переменной filteredRepositories, когда пользователь вводит:

И, наконец, мы используем эту новую переменную в нашем шаблоне:

Однако такой подход открывает перед нами ошибку. Если свойство обновится repositories, наш filteredRepositoriesсписок не будет обновлен, потому что мы только изначально установили его в прослушивателе событий. Вы можете попробовать это сами, выполнив поиск одного имени пользователя в нашем приложении, а затем выполнив поиск другого. Вы не увидите обновленный список репозиториев при повторном поиске.

Мы можем исправить это, изменив наше первоначальное объявление filteredRepositoriesна реактивное:

$: filteredRepositories = repositories;

Но теперь у нас есть еще одна ошибка, из-за которой, если список репозиториев изменяется во время применения фильтра, фильтр не применяется к новому списку репозиториев.

Вернемся к исходному решению, которое у нас было:

$: filteredRepositories = repositories.filter ((repo) => {

return repo.name.toLowerCase ().includes (userSearchTerm.toLowerCase ());

}) ;

Ни одна из упомянутых выше ошибок не возникает, и все обновляется так, как вы ожидаете. Я обнаружил, что использование функций Svelte и использование его поддержки реактивности сделает ваш код чище (обратите внимание, что это решение использует гораздо меньше кода, чем-то, в котором мы сами привязали прослушиватель событий) и уменьшит вероятность ошибок, когда ваш Пользовательский интерфейс не синхронизируется с вашим состоянием.

Комплектация Svelte для производства

Теперь, когда наше приложение полностью функционально, давайте упакуем его для производства. Стартовый шаблон Svelte определяется npm run buildкак команда, которую вы можете запустить, чтобы связать ваше приложение, готовое к работе. Запуск этого в нашем приложении генерирует bundle.js, размер которого составляет 6 КБ, иbundle.cssкоторый имеет размер 1kB. Хотя 6 КБ может показаться большим, и вы могли бы написать подобное простое приложение без помощи фреймворка, обратите внимание, что большая часть стоимости этого пакета 6 КБ фиксирована: вы уже заплатили цену за объединение Svelte, поэтому ожидается, что размер файла по мере роста вашего приложения не станет намного больше. Конечно, он будет расти вместе со всем кодом, который вы пишете, но с точки зрения стоимости фреймворка это довольно мало. И вы можете пойти дальше с разделением кода и другими методами, чтобы максимально уменьшить первоначальный размер пакета.