Používanie vlastných funkcií JavaScriptu v serverovej aplikácii Blazor na úpravu plátna HTML5

Integrácia JavaScriptu s HTML5 Canvas v Blazor

Aplikácie Blazor Server poskytujú vývojárom flexibilitu pri vytváraní výkonných webových aplikácií pomocou technológií C# a .NET. Existujú však scenáre, v ktorých je potrebné využiť JavaScript, najmä pri úlohách, ako je manipulácia s prvkom plátna HTML5. Jeden takýto scenár zahŕňa dynamické kreslenie na plátne na základe údajov prechádzajúcich komponentom Blazor.

V tomto konkrétnom nastavení môžete mať na svojej stránke Blazor Razor slučku, kde sa zoznam údajov používa na generovanie jednotlivých prvkov plátna HTML. Pre každé plátno chcete zavolať vlastnú funkciu JavaScript na vykreslenie obrázkov alebo tvarov. Táto kombinácia C# a JavaScriptu ponúka jedinečnú výzvu, ale poskytuje veľkú všestrannosť.

Aj keď ste svoj kód JavaScript mohli úspešne otestovať v samostatných projektoch HTML, jeho integrácia do Blazor, najmä jeho volanie zo sekcie Razor HTML, si vyžaduje iný prístup. Tu vstupuje do hry Blazorova súčinnosť JavaScript, konkrétne prostredníctvom služby `IJSRuntime`.

V tejto príručke preskúmame, ako môžete zavolať svoju vlastnú funkciu JavaScript na manipuláciu s plátnom z časti HTML projektu servera Blazor. Postup rozoberieme krok za krokom, aby sme zabezpečili hladkú integráciu medzi Blazorom a JavaScriptom.

Vysvetlenie spolupráce Blazor a JavaScriptu pre manipuláciu s plátnom

Prvý príklad skriptu ukazuje, ako využiť pákový efekt IJSRuntime na vyvolanie funkcií JavaScriptu z komponentu Blazor. The @injektovať Smernica sa používa na injekciu IJSRuntime služba, ktorá uľahčuje komunikáciu medzi Blazorom a JavaScriptom. Toto je nevyhnutné, keď potrebujete manipulovať s prvkami HTML, ako je napr HTML5 plátno z C#. V tomto príklade slučka prechádza zoznamom údajov a pre každú položku v zozname sa dynamicky generuje prvok plátna. Pomocou kliknutia na tlačidlo, funkcia JavaScript kresliťObrázok sa volá, pričom odovzdá ID plátna a príslušné údaje.

Kľúčom k tomuto prístupu je použitie InvokeVoidAsync, metóda, ktorá umožňuje C# volať funkcie JavaScriptu bez očakávania návratovej hodnoty. Je to dôležité, keď chcete jednoducho vykonať akciu, napríklad nakresliť obrázok na plátno, a nepotrebujete odpoveď z JavaScriptu. Ďalšou pozoruhodnou časťou je OnAfterRenderAsync metóda životného cyklu v Blazore, ktorá zaisťuje, že funkcia JavaScript sa volá po úplnom vykreslení komponentu. Toto je obzvlášť dôležité pri manipulácii s prvkami DOM, ako je plátno, pretože príliš skorý pokus o prístup k plátnu môže viesť k chybám.

V druhom príklade skriptu je zavedený modulárnejší prístup IJSObjectReference. To vám umožňuje načítať kód JavaScript ako modul, ktorý možno opätovne použiť vo viacerých komponentoch. Modul sa načíta raz a potom sa v prípade potreby zavolajú funkcie v ňom. Táto metóda zlepšuje udržiavateľnosť kódu a uľahčuje správu väčších databáz JavaScriptu. Jediným importovaním modulu JavaScript sa zvýši výkon vašej aplikácie a vyhnete sa zbytočnému opätovnému načítaniu skriptov.

Nakoniec skript na testovanie jednotiek využíva Moq knižnicu, aby ste sa uistili, že interop volania JavaScript fungujú správne. The Overiteľné metóda sa používa na označenie očakávaných volaní do InvokeAsync ako overiteľné, čo znamená, že počas testov môžete skontrolovať, či bola interop funkcia skutočne volaná so správnymi parametrami. Táto metóda zaisťuje, že integrácia medzi Blazorom a JavaScriptom je robustná a pridáva do vášho projektu ďalšiu vrstvu spoľahlivosti overením správnosti interopových volaní počas testovania.

// MyPage.razor
@page "/mypage"
@inject IJSRuntime JSRuntime
@code {
    private async Task DrawImageOnCanvas(MyData data)
    {
        await JSRuntime.InvokeVoidAsync("drawImage", data.Id, data);
    }
}

<div>@foreach (var data in ListOfMyData) {
    <div><canvas id="@data.Id" class="myDataImage"></canvas></div>
    <button @onclick="() => DrawImageOnCanvas(data)">Draw Image</button>
}</div>

// MyPage.razor
@page "/mypage"
@inject IJSRuntime JSRuntime
@code {
    private IJSObjectReference _jsModule;
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            _jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./js/MyJavaScript.js");
        }
    }
    private async Task DrawImageOnCanvas(MyData data)
    {
        await _jsModule.InvokeVoidAsync("drawImage", data.Id, data);
    }
}

<div>@foreach (var data in ListOfMyData) {
    <div><canvas id="@data.Id" class="myDataImage"></canvas></div>
    <button @onclick="() => DrawImageOnCanvas(data)">Draw Image</button>
}</div>

// TestComponent.razor.cs
@page "/testpage"
@inject IJSRuntime JSRuntime
@code {
    public void TestDrawImage()
    {
        var jsInteropMock = new Mock<IJSRuntime>();
        jsInteropMock.Setup(x => x.InvokeAsync<Void>("drawImage", It.IsAny<object[]>())).Verifiable();
        jsInteropMock.Verify();
    }
}

Preskúmanie interoperability JavaScriptu pre dynamickú manipuláciu s plátnom v Blazor

Schopnosť volať vlastné funkcie JavaScriptu v Blazore otvára výkonné možnosti pre dynamickú manipuláciu front-endu, najmä pri práci s grafickými prvkami, ako je napr. HTML5 plátno. Jedným z kľúčových aspektov tohto procesu, ktorý ešte nebol pokrytý, je použitie asynchrónnych volaní JavaScriptu v rámci serverovej architektúry Blazor. Keďže Blazor funguje na serveri, komunikácia medzi klientom a serverom prebieha cez SignalR, čo znamená, že keď zo stránky Razor zavoláte funkciu JavaScript, interakcia sa mierne oneskorí. Pochopenie toho, ako zvládnuť tieto asynchrónne operácie, zaisťuje, že manipulácia s plátnom prebieha hladko.

Ďalším dôležitým faktorom je optimalizácia spôsobu interakcie JavaScriptu a C#, keď je na stránke viacero prvkov plátna. Keď prechádzate zoznamom a každá položka má svoje vlastné prvok plátna, úlohou je zabezpečiť, aby každé plátno dostalo správne pokyny na kreslenie z príslušnej funkcie JavaScript. Dá sa to efektívne zvládnuť tak, že sa zabezpečí, aby každé plátno malo jedinečný identifikátor odovzdaný ako parameter vo volaní interoperability. Správne spracovanie chýb a overenie v JavaScripte sa stávajú kľúčovými aj pri spracovaní viacerých plátien.

A napokon, úvahy o výkone sú dôležité pri riešení interoperability JavaScriptu v Blazore. Zatiaľ čo malé skripty fungujú vo väčšine prípadov dobre, náročné operácie plátna, ako je vykresľovanie zložitých tvarov alebo obrázkov, môžu spôsobiť problémy s výkonom, ak nie sú optimalizované. Techniky, ako je obmedzenie veľkosti plátna, používanie plátna mimo obrazovky alebo dávkové spracovanie grafických zmien, môžu pomôcť zvýšiť rýchlosť vykresľovania. Pochopenie týchto optimalizačných stratégií zaistí, že vaša aplikácia Blazor zostane výkonná pri zvládaní zložitých úloh vykresľovania front-endu.