在Blazor客户端中加载JS模块的最佳实践是什么？

编程问答 2022-06-03

问题描述

在Blazor中，有几种执行JavaScript代码的选项：

  1. 将js文件加载到 IJSObjectReference 的实例中，并在其上调用 InvokeAsync ：

Blazor组件在文件后面的代码：

        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            if (firstRender)
            {
                IJSObjectReference module = await JSRuntime.InvokeAsync<IJSObjectReference>("import",".script1.js");
                await module.InvokeVoidAsync("sampleFunction1");
            }
        }
  1. 将js文件作为脚本添加到HTML标记，并在 IJSRuntime 实例上调用 InvokeAsync ：

index.html：

<script src="script1.js"></script>

Blazor组件在文件后面的代码：

        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            if (firstRender)
            {
                await JSRuntime.InvokeVoidAsync("sampleFunction1");
            }
        }

两种方法都行得通，但是从性能，代码维护和代码清洁度的角度来看，哪一种方法更可取？

解决方法

我会使用第一个（在 OnAfterRenderAsync 期间导入），这是我的解释：

  1. 如果您将 js 编写为特定组件的扩展，您将获得一个可重用、可分解和可维护的 js 模块，这些模块在未来可以轻松被单元测试覆盖/重构。

  2. 未使用但加载到浏览器中的 js 内容的百分比会更小且更高效。最终用户不应该为了“以防万一”而收到一堆 js。可悲的是，blazor 本身并没有使用这种前端优化，并且会加载大量“以防万一”代码。 coverage for several js modules in comparison to blazor.server.js

  3. 无需在渲染中放置 javascript 链接。它带来了一些好处：

asp.net-blazorblazorblazor-client-sideblazor-webassembly