Pasirinktinių JavaScript funkcijų naudojimas Blazor serverio programoje, norint modifikuoti HTML5 drobę

„JavaScript“ integravimas su HTML5 Canvas „Blazor“.

„Blazor Server“ programos suteikia kūrėjams lankstumo kurti galingas žiniatinklio programas naudojant C# ir .NET technologijas. Tačiau yra scenarijų, kai reikia panaudoti „JavaScript“, ypač atliekant tokias užduotis kaip manipuliavimas HTML5 drobės elementu. Vienas iš tokių scenarijų apima dinamišką piešimą ant drobės, remiantis duomenimis, perduodamais per Blazor komponentą.

Šioje konkrečioje sąrankoje Blazor Razor puslapyje gali būti kilpa, kurioje duomenų sąrašas naudojamas atskiriems HTML drobės elementams generuoti. Kiekvienai drobei norite iškviesti tinkintą „JavaScript“ funkciją, kad būtų pateikti vaizdai ar formos. Šis C# ir JavaScript derinys siūlo unikalų iššūkį, tačiau suteikia didelį universalumą.

Nors galbūt sėkmingai išbandėte „JavaScript“ kodą atskiruose HTML projektuose, norint jį integruoti į „Blazor“, ypač iškvietus jį iš „Razor HTML“ skilties, reikia kitokio požiūrio. Čia atsiranda „Blazor“ JavaScript sąveika, ypač naudojant „IJSRuntime“ paslaugą.

Šiame vadove išnagrinėsime, kaip galite iškviesti tinkintą „JavaScript“ funkciją, kad galėtumėte manipuliuoti drobe „Blazor“ serverio projekto HTML skiltyje. Mes išskaidysime procesą žingsnis po žingsnio, kad užtikrintume sklandų „Blazor“ ir „JavaScript“ integravimą.

„Blazor“ ir „JavaScript“ sąveikos paaiškinimas manipuliuojant drobėmis

Pirmasis scenarijaus pavyzdys parodo, kaip panaudoti svertą IJSRuntime iškviesti JavaScript funkcijas iš Blazor komponento. The @inject direktyva naudojama švirkšti IJSRuntime paslauga, kuri palengvina ryšį tarp Blazor ir JavaScript. Tai būtina, kai reikia manipuliuoti HTML elementais, tokiais kaip HTML5 drobė iš C#. Šiame pavyzdyje ciklas eina per duomenų sąrašą ir kiekvienam sąrašo elementui dinamiškai sugeneruojamas drobės elementas. Spustelėjus mygtuką, „JavaScript“ funkcija pieštiVaizdas iškviečiamas, perduodamas drobės ID ir atitinkamus duomenis.

Šio metodo raktas yra naudojimas InvokeVoidAsync, metodas, leidžiantis C# iškviesti JavaScript funkcijas nesitikint grąžinamos reikšmės. Tai svarbu, kai tiesiog norite atlikti veiksmą, pvz., piešti vaizdą ant drobės, ir jums nereikia atsakymo iš „JavaScript“. Kita svarbi dalis yra OnAfterRenderAsync gyvavimo ciklo metodas „Blazor“, kuris užtikrina, kad „JavaScript“ funkcija būtų iškviesta po to, kai komponentas visiškai atvaizduojamas. Tai ypač svarbu manipuliuojant DOM elementais, tokiais kaip drobė, nes per anksti bandant pasiekti drobę gali atsirasti klaidų.

Antrajame scenarijaus pavyzdyje naudojamas modulinis metodas IJSObjectReference. Tai leidžia įkelti „JavaScript“ kodą kaip modulį, kurį galima pakartotinai naudoti keliuose komponentuose. Modulis įkeliamas vieną kartą, o tada prireikus iškviečiamos jame esančios funkcijos. Šis metodas pagerina kodo priežiūrą ir leidžia lengviau valdyti didesnes JavaScript kodų bazes. Importuojant „JavaScript“ modulį tik vieną kartą, jūsų programos našumas pagerėja ir be reikalo iš naujo neįkelsite scenarijų.

Galiausiai vieneto testavimo scenarijus naudoja Moq biblioteką, kad užtikrintų, jog „JavaScript“ sąveikos skambučiai veiktų tinkamai. The Patikrinama metodas naudojamas numatomiems skambučiams pažymėti InvokeAsync kaip patikrinama, o tai reiškia, kad bandymų metu galite patikrinti, ar sąveikos funkcija iš tikrųjų buvo iškviesta su tinkamais parametrais. Šis metodas užtikrina, kad „Blazor“ ir „JavaScript“ integracija būtų tvirta, o jūsų projektui suteikiamas papildomas patikimumo lygis, tikrinant sąveikos iškvietimų teisingumą bandymo metu.

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

Naršykite „JavaScript“ sąveiką, skirtą dinaminiam drobės manipuliavimui naudojant „Blazor“.

„Blazor“ galimybė iškviesti pasirinktines „JavaScript“ funkcijas atveria galingas dinaminio priekinio valdymo parinktis, ypač dirbant su grafiniais elementais, tokiais kaip HTML5 drobė. Vienas iš pagrindinių šio proceso aspektų, kuris dar nebuvo aptartas, yra asinchroninių „JavaScript“ skambučių naudojimas „Blazor“ serverio pusės architektūroje. Kadangi Blazor veikia serveryje, ryšys tarp kliento ir serverio tvarkomas per SignalR, o tai reiškia, kad kai iškviečiate JavaScript funkciją iš Razor puslapio, sąveika šiek tiek vėluoja. Supratimas, kaip atlikti šias asinchronines operacijas, užtikrina, kad drobės manipuliavimas vyktų sklandžiai.

Kitas svarbus veiksnys yra JavaScript ir C# sąveikos optimizavimas, kai puslapyje yra keli drobės elementai. Kai naršote sąrašą ir kiekvienas elementas turi savo drobės elementas, uždavinys yra užtikrinti, kad kiekviena drobė gautų teisingas piešimo instrukcijas iš atitinkamos JavaScript funkcijos. Tai galima efektyviai tvarkyti užtikrinant, kad kiekviena drobė turėtų unikalų identifikatorių, perduodamą kaip parametras sąveikos skambutyje. Tinkamas „JavaScript“ klaidų tvarkymas ir patvirtinimas taip pat tampa labai svarbūs apdorojant kelias drobes.

Galiausiai, kalbant apie „JavaScript“ sąveiką „Blazor“, svarbu atsižvelgti į našumą. Nors maži scenarijai daugeliu atvejų veikia gerai, sunkios drobės operacijos, pvz., sudėtingų formų ar vaizdų atvaizdavimas, gali sukelti našumo kliūtis, jei jos nėra optimizuotos. Tokie metodai kaip drobės dydžio ribojimas, ne ekrano drobių naudojimas arba paketinio apdorojimo grafiniai pakeitimai gali padėti pagerinti atvaizdavimo greitį. Suprasdami šias optimizavimo strategijas užtikrinsite, kad jūsų „Blazor“ programa išliks naši atliekant sudėtingas priekinio galo atvaizdavimo užduotis.