¶ JavaScript и зачем он нужен в 2025
JS это то, что когда-то давным-давно позволило создавать не статические страницы с текстом, а именно интерактивные порталы. В наши дни над JS надстроено такое безумное количество библиотек и фреймворков, что сложнее найти те места, где он никак не используется, нежели наоборот.
Рано или поздно и вы захотите использовать какую-нибудь JS-библеотеку для улучшения пользовательского опыта.
Для примера, мы возьмем абсолютно бесполезный, но симпатичный пример с сайта https://codepen.io/ - там можно найти много интересного и это место творчества огромного количества талантливых людей. Рекомендую к посещению.
Итак, а теперь как же загрузить JavaScript в Blazor
¶ LoadScript
Как и в случае с CSS мы можем использовать IJsPoeBlazorUtils для того, чтобы загрузить
скрипт в любой нужный нам момент.
/// <summary>
/// Loads a JavaScript file dynamically and returns a promise that completes when the script loads.
/// </summary>
Task LoadScript(string scriptPath);
ВАЖНО! Этот способ загрузки подходит для подгрузки plain JavaScript, если вы хотите подгрузить модули, лучше использовать другой подход
¶ Что мы вообще хотим получить
На самом деле так как это просто демо загрузки скрипта, а скрипты могут делать что угодно, мы не хотим сейчас получить ничего
функционального - это будет просто анимация.
¶ Код
Так как наши примеры становятся все больше и больше, я буду стараться приводить теперь только те части файлов,
которые имеют значение и хотелось бы объяснить. Остальное вы можете глянуть, скачав проект с примерами, ссылка на этой странице.
¶ Разбор кода
¶ UserOverlay.cs
[Inject]
public PoeShared.Blazor.Services.IJsPoeBlazorUtils PoeBlazorUtils { get; init; }
По аналогии с IAuraTreeScriptingApi мы подключаем еще один сервис, через который и будем загружать CSS.
protected override async Task OnAfterFirstRenderAsync()
{
await base.OnAfterFirstRenderAsync();
await PoeBlazorUtils.LoadCss("Styles.css");
await PoeBlazorUtils.LoadScript("https://raw.githack.com/strangerintheq/rgba/0.0.8/rgba.js");
await PoeBlazorUtils.LoadScript("Script.js");
}
Здесь, в одном месте мы подгружаем сразу и стили, и два нужных нам скрипта. При этом один из них хранится на CDN (в облаке, rgba.js), а другой - у нас локально, в файлах проекта (Script.js). Вы можете смешивать оба подхода по мере необходимости, хотя с учетом направленности EyeAuras, хранение локально все-таки предпочтительнее.
Еще момент - обратите внимание, что мы подгружаем это все сразу после того, как произошла самая первая отрисовка - вам, как программисту, нужно понимать какие скрипты когда лучше подгружать. В данном примере я выбрал OnAfterFirstRenderAsync, однако в другом примере может быть OnInitializedAsync или даже смесь!
Более подробно о жизненном цикле компонентов есть в этой статье от Microsoft
canvas {
position: absolute;
width: 100% !important;
left: 0;
top: 1.5em;
height: calc(100% - 1.5em) !important;
}
А вот здесь у нас немного CSS-магии. Разберем по шагам.
position: absolute;- указывает, что элемент должен быть отрисован в абсолютных координатах независимо от своего положения в дереве. Обычно такие вещи применяют для графики, всплывающих меню и т.п.width: 100% !important;- элемент должен занимать 100% пространства, при этом эта настройка важнее любой другой заданной без флагаimportant- в этом примере данный флаг был нужен, так какrgba.jsпо умолчанию настраивает canvas сама, что нам мешает.left: 0;- приabsoluteпозиционировании обычно указывают где именно располагается элемент, в нашем случае мы указываем, что он должен быть прижат к левому краю окнаtop: 1.5em;- делаем отступ сверху, чтобы оставить место для заголовочной части. Есть способ гораздо более надежный, но для примера оставим пока такой вариант - это тоже бывает полезноheight: calc(100% - 1.5em) !important;- и, напоследок, целая комбинация из всего, что мы использовали ранее. Если перевести на человеческий язык, то это будетВажно! Высота элемента должна быть равна 100% высоты страницы за вычетом высоты в 1.5em (заголовочная часть)