Изолированный JavaScript в Blazor с совмещенными файлами JS

· 2 мин чтения
.NET Blazor JavaScript
Available in: Русский · English · Español · Français · Deutsch · Português · 한국어 · 日本語 · 中文 · العربية · हिन्दी · Polski · Türkçe · Bahasa Indonesia · Nederlands

Если вы раньше работали с Blazor и JS Interop, вы, вероятно, получили огромный файл app.js со случайными функциями для разных компонентов. Это работает, но быстро портится. К счастью, есть гораздо более простой подход: совместное размещение файлов JavaScript.

Идея

Как и в случае с изоляцией CSS, Blazor позволяет разместить файл .razor.js рядом с вашим компонентом. Модуль JavaScript загружается по требованию, только тогда, когда компоненту это действительно необходимо. Никаких глобальных сценариев, никакого загрязнения.

Настройка

Допустим, у нас есть компонент Clipboard.razor который копирует текст в буфер обмена. Создайте файл с именем Clipboard.razor.js рядом с ним:

[[[ТОК_4]]]

Обратите внимание на ключевое слово export — это важно. Blazor загружает его как стандартный модуль ES.

Загрузка модуля в Blazor

В вашем компоненте вы используете IJSRuntime для импорта модуля. Путь соответствует соглашению: ./_content/{ASSEMBLY_NAME}/{COMPONENT_PATH}.razor.js для библиотек или просто относительный путь для текущего проекта.

[[[ТОК_8]]]

Здесь следует отметить несколько вещей:

  • Мы загружаем модуль в OnAfterRenderAsync, поскольку JS Interop недоступен во время предварительного рендеринга на стороне сервера.
  • Сохраняем ссылку на модуль с помощью IJSObjectReference
  • Мы реализуем IAsyncDisposable для очистки модуля при уничтожении компонента.

Почему это лучше

Раньше я сбрасывал все в один wwwroot/js/app.js. Это работало, но поиск функций был трудной задачей, и каждая страница загружала ненужный JavaScript. С совмещенными файлами JS:

  • Каждый компонент имеет свой собственный JavaScript.
  • Модули загружаются лениво, только при необходимости
  • Отсутствие конфликтов имен глобальных функций.
  • Легче поддерживать и удалять — при удалении компонента вы удаляете вместе с ним и JS.

Ошибка с путем

Путь, который вы передаете к import зависит от того, находитесь ли вы в автономном приложении Blazor или в библиотеке классов Razor. Для обычного приложения Blazor путь указывается относительно wwwroot. Файл .razor.js копируется туда во время сборки, поэтому вы ссылаетесь на него из местоположения компонента в проекте.

Если при загрузке модуля вы получаете ошибку 404, дважды проверьте путь и убедитесь, что файл заканчивается на .razor.js, а не только на .js.

Надеюсь, вам понравился пост! Не стесняйтесь обращаться ко мне в любой социальной сети по адресу @emimontesdeoca.

Ресурсы