Uporaba funkcij JavaScript po meri v aplikaciji strežnika Blazor za spreminjanje platna HTML5

Integracija JavaScripta s platnom HTML5 v Blazorju

Aplikacije Blazor Server ponujajo razvijalcem prilagodljivost pri gradnji zmogljivih spletnih aplikacij z uporabo tehnologij C# in .NET. Vendar pa obstajajo scenariji, kjer je uporaba JavaScripta potrebna, zlasti za naloge, kot je manipulacija elementa platna HTML5. Eden takih scenarijev vključuje dinamično risanje na platnu na podlagi podatkov, posredovanih prek komponente Blazor.

V tej posebni nastavitvi imate morda na strani Blazor Razor zanko, kjer se seznam podatkov uporablja za ustvarjanje posameznih elementov platna HTML. Za vsako platno želite poklicati funkcijo JavaScript po meri za upodabljanje slik ali oblik. Ta kombinacija C# in JavaScript ponuja edinstven izziv, vendar zagotavlja veliko vsestranskost.

Čeprav ste morda uspešno preizkusili svojo kodo JavaScript v samostojnih projektih HTML, je za njeno integracijo v Blazor, zlasti priklic iz razdelka Razor HTML, potreben drugačen pristop. Tu pride v poštev Blazorjeva interakcija JavaScript, zlasti z uporabo storitve `IJSRuntime`.

V tem priročniku bomo raziskali, kako lahko pokličete svojo funkcijo JavaScript po meri za manipulacijo s platnom iz razdelka HTML projekta strežnika Blazor. Postopek bomo razčlenili po korakih, da zagotovimo gladko integracijo med Blazorjem in JavaScriptom.

Razlaga Blazor in JavaScript Interop za manipulacijo platna

Prvi primer skripta prikazuje, kako uporabiti vzvod IJSRuntime za priklic funkcij JavaScript znotraj komponente Blazor. The @inject se uporablja za vbrizgavanje IJSRuntime storitev, ki omogoča komunikacijo med Blazorjem in JavaScriptom. To je bistveno, ko morate manipulirati z elementi HTML, kot je HTML5 platno iz C#. V tem primeru gre zanka skozi seznam podatkov in za vsako postavko na seznamu se dinamično ustvari element platna. S pritiskom na gumb, funkcija JavaScript drawImage se pokliče, posreduje ID platna in ustrezne podatke.

Ključ tega pristopa je uporaba InvokeVoidAsync, metoda, ki C# omogoča klicanje funkcij JavaScript brez pričakovanja vrnjene vrednosti. To je pomembno, ko preprosto želite izvesti dejanje, kot je risanje slike na platno, in ne potrebujete odgovora JavaScripta. Drug pomemben del je OnAfterRenderAsync metoda življenjskega cikla v Blazorju, ki zagotavlja, da se funkcija JavaScript pokliče, ko je komponenta v celoti upodobljena. To je še posebej pomembno pri ravnanju z elementi DOM, kot je platno, saj lahko poskus prezgodnjega dostopa do platna povzroči napake.

V drugem primeru skripta je predstavljen bolj modularen pristop z uporabo IJSObjectReference. To vam omogoča, da kodo JavaScript naložite kot modul, ki ga je mogoče znova uporabiti v več komponentah. Modul se naloži enkrat, nato pa se po potrebi pokličejo funkcije v njem. Ta metoda izboljša vzdržljivost kode in olajša upravljanje večjih kodnih baz JavaScript. Če samo enkrat uvozite modul JavaScript, se učinkovitost vaše aplikacije izboljša in izognete se ponovnemu nalaganju skriptov po nepotrebnem.

Končno, skript za testiranje enote uporablja Moq knjižnico za zagotovitev pravilnega delovanja interop klicev JavaScript. The Preverljivo metoda se uporablja za označevanje pričakovanih klicev na InvokeAsync kot preverljivo, kar pomeni, da lahko med preizkusi preverite, ali je bila interop funkcija res poklicana s pravilnimi parametri. Ta metoda zagotavlja, da je integracija med Blazorjem in JavaScriptom robustna, vašemu projektu pa doda dodatno raven zanesljivosti s preverjanjem pravilnosti interop klicev med testiranjem.

// 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();
    }
}

Raziskovanje interakcije JavaScript za manipulacijo dinamičnega platna v Blazorju

V Blazorju možnost klicanja funkcij JavaScript po meri odpira zmogljive možnosti za dinamično manipulacijo sprednjega dela, zlasti pri delu z grafičnimi elementi, kot je HTML5 platno. Eden od ključnih vidikov tega procesa, ki še ni bil zajet, je uporaba asinhronih klicev JavaScript znotraj Blazorjeve arhitekture na strani strežnika. Ker Blazor deluje na strežniku, se komunikacija med odjemalcem in strežnikom upravlja prek SignalR, kar pomeni, da ko pokličete funkcijo JavaScript s strani Razor, je interakcija nekoliko zakasnjena. Razumevanje, kako ravnati s temi asinhronimi operacijami, zagotavlja, da manipulacija s platnom poteka gladko.

Drug pomemben dejavnik je optimizacija načina interakcije JavaScript in C#, ko je na strani več elementov platna. Ko se pomikate po seznamu in ima vsak element svojega element platna, je izziv zagotoviti, da vsako platno prejme pravilna navodila za risanje iz ustrezne funkcije JavaScript. To je mogoče učinkovito rešiti tako, da zagotovite, da ima vsako platno edinstven identifikator, posredovan kot parameter v interop klicu. Pravilno obravnavanje napak in preverjanje veljavnosti v JavaScriptu prav tako postaneta ključnega pomena pri obdelavi več platen.

Nenazadnje so vidiki zmogljivosti pomembni, ko se ukvarjate z interopom JavaScript v Blazorju. Medtem ko majhni skripti v večini primerov delujejo dobro, lahko težke operacije platna, kot je upodabljanje zapletenih oblik ali slik, povzročijo ozka grla v delovanju, če niso optimizirana. Tehnike, kot je omejevanje velikosti platna, uporaba platna zunaj zaslona ali paketna obdelava grafičnih sprememb, lahko pomagajo izboljšati hitrost upodabljanja. Razumevanje teh optimizacijskih strategij bo zagotovilo, da bo vaša aplikacija Blazor ostala zmogljiva, medtem ko bo obravnavala zapletene naloge upodabljanja na sprednji strani.