贵州公司网站建设比选公示,中国建设银行网站对公业务流程,画室网站模板,做网站怎么注册域名前言Blazor支持执行JavaScript脚本#xff0c;通常是将脚本放在wwwroot/index.html(Blazor WebAssembly)或Pages/_Host.cshtml(Blazor Server)中。但是#xff0c;这种方式会将所有JS方法用全局函数加载#xff0c;即使某些方法只需要在特定组件中使用。既影响加载性能… 前言Blazor支持执行JavaScript脚本通常是将脚本放在wwwroot/index.html(Blazor WebAssembly)或Pages/_Host.cshtml(Blazor Server)中。但是这种方式会将所有JS方法用全局函数加载即使某些方法只需要在特定组件中使用。既影响加载性能又会造成全局污染。JavaScript隔离1. 标准方式从.NET 5.0开始Blazor支持在标准JavaScript模块中启用 JavaScript隔离(https://docs.microsoft.com/zh-cn/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?viewaspnetcore-5.0#javascript-isolation-in-javascript-modules)。实现方式如下首先在wwwroot目录下创建独立的js文件定义JS模块比如scripts.jsexport function showPrompt(message) {return prompt(message, Type anything here);
}
在Blazor组件中使用IJSRuntime将模块作为IJSObjectReference导入然后使用IJSObjectReference从模块调用导出的JS函数代码如下page /fetchdata
inject IJSRuntime JSpbutton onclickTriggerPrompt按需加载JavaScript脚本/button
/ppresult
/pcode {private IJSObjectReference module;private string result;protected override async Task OnAfterRenderAsync(bool firstRender){if (firstRender){module await JS.InvokeAsyncIJSObjectReference(import, ./scripts.js);}}private async Task TriggerPrompt(){result await module.InvokeAsyncstring(showPrompt, 输入文字);}
}
可以看到JS文件在访问页面时才加载并且运行正常2. libman方式但是这种方式有一个缺点文件必须放在wwwroot目录下。我更希望JS文件和对应的Blazor组件放在一起类似这样右键单击项目选择管理客户端库修改创建的libman.json文件内容如下{version: 1.0,defaultProvider: filesystem,libraries: [{library: Pages,files: [FetchData.razor.js],destination: wwwroot/}]
}
右键单击libman.json选择“生产时启用还原客户端库”。修改FetchData.razor代码如下protected override async Task OnAfterRenderAsync(bool firstRender)
{if (firstRender){module await JS.InvokeAsyncIJSObjectReference(import,./FetchData.razor.js);}
}
再次运行, 工作正常。3. 内嵌资源方式上述方式虽然实现了效果但是JS文件还是放在了wwwroot目录下只是工具帮你进行的复制操作。如果你就是不希望wwwroot下有多余文件可以尝试下面的方式。修改JS文件属性生成操作设置为嵌入的资源。修改FetchData.razor代码如下, 将资源文件作为JS代码加载protected override async Task OnAfterRenderAsync(bool firstRender)
{if (firstRender){string scriptContent;using (var stream this.GetType().Assembly.GetManifestResourceStream(this.GetType().Assembly.GetName().Name .Pages.FetchData.razor.js)){using (var sr new System.IO.StreamReader(stream)){scriptContent await sr.ReadToEndAsync();}}module await JS.InvokeAsyncIJSObjectReference(import, data:text/javascript;base64, Convert.ToBase64String(System.Text.Encoding.UTF8.GetBytes(scriptContent)));}
}
再次运行, 同样工作正常而且wwwroot下没有增加文件。结论今天我们介绍了按需加载JavaScript脚本的标准方式及2种变种你可以按照你的喜好选择使用。如果你觉得这篇文章对你有所启发请关注我的个人公众号”My IO“记住我
