یک نکتهی تکمیلی: امکان بارگذاری با تاخیر فایلهای جاوااسکریپتی در برنامههای Blazor
در مطلب جاری، فرض بر این است که توابع جاوا اسکریپتی، سراسری هستند و قرار است در تمام کامپوننتهای برنامه قابل دسترسی باشند. به همین جهت ارجاع مستقیمی از فایل js. آنها را در فایل index.html و یا Host_، قرار میدهیم. اما اگر تنها یک کامپوننت، نیاز به اسکریپت خاصی را داشته باشد و نه تمام کامپوننتهای دیگر، چطور؟
در این حالت Blazor از مفهومی به نام JavaScript Isolation پشتیبانی میکند. برای توضیح آن، فایل جدید Client\wwwroot\MyMdl.Js را به پروژه اضافه کرده و سپس به صورت زیر تکمیل میکنیم:
- همانطور که مشاهده میکنید، در اینجا توابع export شدهاند (جزو پیشنیازهای JavaScript Isolation است) و در حقیقت یک ES-6 module تشکیل شدهاست.
- برخلاف قبل، مدخل جدیدی را از این فایل، به فایلهای index.html و یا Host_ اضافه نمیکنیم. چون میخواهیم فقط کامپوننتی که به آن نیاز دارد، آنرا بارگذاری کند.
سپس کامپوننت جدید Client\Pages\JsIsolation.razor را به صورت زیر تکمیل خواهیم کرد:
- کار در قسمت OnAfterRenderAsync و در اولین بار رندر کامپوننت شروع میشود. در اینجا روش بارگذاری و import یک ماژول جاوااسکریپتی را مشاهده میکنید. در این حالت، این فایل js. پس از فراخوانی متد InvokeAsync بارگذاری شده و اطلاعات آن تنها در همین کامپوننت قابل دسترسی خواهد بود.
- اکنون که module یا IJSObjectReference را در اختیار داریم، میتوان با استفاده از متدهای InvokeAsync و یا InvokeVoidAsync، با متدهای موجود در آن کار کرد.
در مطلب جاری، فرض بر این است که توابع جاوا اسکریپتی، سراسری هستند و قرار است در تمام کامپوننتهای برنامه قابل دسترسی باشند. به همین جهت ارجاع مستقیمی از فایل js. آنها را در فایل index.html و یا Host_، قرار میدهیم. اما اگر تنها یک کامپوننت، نیاز به اسکریپت خاصی را داشته باشد و نه تمام کامپوننتهای دیگر، چطور؟
در این حالت Blazor از مفهومی به نام JavaScript Isolation پشتیبانی میکند. برای توضیح آن، فایل جدید Client\wwwroot\MyMdl.Js را به پروژه اضافه کرده و سپس به صورت زیر تکمیل میکنیم:
export function showPrompt(message) { return prompt(message, "Type name"); } export function showAlert(message) { return prompt(message, "Hello"); }
- برخلاف قبل، مدخل جدیدی را از این فایل، به فایلهای index.html و یا Host_ اضافه نمیکنیم. چون میخواهیم فقط کامپوننتی که به آن نیاز دارد، آنرا بارگذاری کند.
سپس کامپوننت جدید Client\Pages\JsIsolation.razor را به صورت زیر تکمیل خواهیم کرد:
@page "/js-isolation" @inject IJSRuntime jSRuntime <button class="btn btn-primary" @onclick="Prompt">Prompt</button> <button class="btn btn-primary" @onclick="ShowAlert">Alert</button> @code { private IJSObjectReference module; protected override async Task OnAfterRenderAsync(bool firstRender) { if(firstRender) { module = await jSRuntime.InvokeAsync<IJSObjectReference>("import", "./MyMdl.Js"); } } private async Task Prompt() { var result = await module.InvokeAsync<string>("showPrompt", "What's your name?"); } private async Task ShowAlert() { await module.InvokeVoidAsync("showAlert", "Hello!"); } }
- اکنون که module یا IJSObjectReference را در اختیار داریم، میتوان با استفاده از متدهای InvokeAsync و یا InvokeVoidAsync، با متدهای موجود در آن کار کرد.